CSS学び直し②
CSS学び直しメモ②
やってること
Udemyのコース。 最近、自動翻訳で日本語がつき始めてるので講義の選択肢が増えて嬉しい。
カスケーディングとは何か
なんとなーく分かってて、その実CSSのCをまともに理解していなかった。 滝のように伝播していくのがこれ。 宣言によって強弱があり、ある要素は反映されるけど別の要素は反映されてない、なんてことが起こる。 inline → id → class(+擬似クラス) → element(+疑似要素)の順に強い。
inlineは基本的に使わないので無視で良い。 id, class, elementそれぞれの要素で重複した宣言があった場合は、
で優先順位付けされる。 注意が必要なのは 擬似クラス と 疑似要素 は、それで1個として数えられるということ。 .hoge:hoverは、クラスが2個ある扱い。ここで優先順位が狂いやすそう。 !importantはこれらより上の領域の話（これも使い始めたら見直し検討）。
em / rem
emは各セレクタのフォントから計算される倍率。 フォントサイズに使う場合、長さに使う場合で動きが微妙に異なる（っぽい）。 カレントのフォントサイズか、親のフォントサイズを見るかという違いが出る。 remはルート宣言のfont-sizeを見て、その倍率を書く。デフォルトだと16px等。
16pxは分かりにくいので
html {
font-size:10px;
}
などとしておくと1rem = 10pxで分かりやすくなる。 emは制御が難しいので、基本的にはremで制御するのが良いとされる。
