position: absolute を指定した場合、親エレメントではサイズが決まらないので、 position: absolute を指定した子エレメントのサイズに期待せず、親エレメント自身でサイズを指定する必要がある
opacity を指定した場合は子要素にまで影響が及ぶので、自要素のみに適用させてい場合は background-color: rgba(); で透明度を指定する
https://qiita.com/mikimikiman/items/3af7a53eaa46423faefc
visibility: hidden の要素では hover は効かない
CSSのネスト表記で :hover などの疑似要素を指定する場合は、 &:hover のように & と hover の間に空白をいれてはいけない
img の display のデフォルト値は inline
https://csshtml.work/display-initial/
rgbaにおいて変数でカラーを指定する場合は以下のようにする
:root {
--color-p-link-area: #faee00;
--color-p-link-area-rgb: 250, 238, 0;
}
div.p-link-area-icon {
background-color: rgba(var(--color-p-link-area-rgb), 0);
}
https://zenn.dev/rdlabo/articles/1e80620bf432e4eb09f6
querySelector で子、孫指定する場合は、 > の前後にスペースを入れない
@media (any-hover: hover) と @media (any-hover: none)
高さを指定する際は vh ではなく以下を使用する（特にスマホ環境の場合）
- lvh: スクロールバーの高さも含めた高さ
- svh: スクロールバーの高さを除いた高さ
- dvh: スクロールバーの有無に対応した高さ
タッチデバイスのイベント発生順序 https://webfrontend.ninja/js-click-and-touchend-events/
touchstart
touchend
mousedown
mouseup
click
タッチデバイスで mouseXXX 系のイベントを発生させないためには、touchイベント内で preventDefault() を実行しておく
input:checkbox、input:radio のclickイベントで preventDefault() を実行すると checked が反映されない
ピクセルのアルファチャンネル一度透明化してしまうと他の色情報が失われて元に戻せないので、アルファチャンネルを操作する場合は事前にバックアップしておく