もう「CSSが効かない」に悩まされない！詳細度を意識してクラスにスタイルを当てよう
みなさん、「CSSの詳細度」って聞いたことありますか？
「CSSが効かない！」と悩まされがちな人は要チェック！
今回はWEBサイトのスタイリングにまつわる技術ネタです✌️
目次
CSSの詳細度とは
簡単に言うと「スタイルが適用される優先順位」
同じHTMLに対して、どのCSSが優先されるべきかを判断するために使われるのが詳細度。
この値が高ければ高いほど、優先してそのスタイルが適用されます。
詳細度を高くする例
詳細度を高める方法はたくさんあります。
- 要素を連ねて指定する
- 要素ではなくクラスやIDで指定する
- !importantを使う
などなど。
同じ詳細度なら後で書いたスタイルが優先されます。
例を用いて1つ1つ見ていきましょう。
要素を連ねて指定する
親要素を追加すればするほど、詳細度は高くなります。
以下のコードは下に行けば行くほど詳細度が高いです。
|
1 2 3 4 5 6 7 8 9 10 11 |
th { background-color: #fff; } tr th { background-color: #aaa; } table tr th { background-color: #ccc; } |
一番下のスタイルがもっとも多く親要素を連ねているので、最終的に適用されるのは #ccc です。
要素ではなくクラスやIDで指定する
要素よりもクラス、クラスよりもIDで指定すると詳細度は高くなります。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
h1 { font-size: 4rem; } .heading { font-size: 5rem; } // 通常は見出しにIDはあまり使用しません #heading { font-size: 6rem; } |
IDが一番優先されるので、適用されるのは6remです。
!importantを使う
いかなる指定もこの!importantには敵いません。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
header { height: 60px!important; } header { height: 80px; } body header { height: 100px; } body .header { height: 120px; } |
もう何をしてもムダです。適用されるのは一番上の60pxです。最強。そして厄介。
もっといろいろある詳細度
紹介した3つは代表的な例で、実際にはもっと細かく詳細度が定義されています。
気になる方はMDN様のリンクがありますのでこちらをご覧ください。
クラスにスタイルを当てるのが近年のセオリー
ここで本題です。
詳細度の指定の方法はいくつもあれど、適当に指定していると大変なことになります。
いくつか例を見ていきましょう。
困ってしまう例
|
1 2 3 |
table tr th { background-color: #ccc; } |
たとえばこんなスタイルを当てていたとします。
もし、このスタイルを上書きするとしたらどうしなければいけませんか？
|
1 2 3 4 5 6 7 8 9 |
// 親要素を増やす方法 .information table tr th { background-color: #aaa; } // !importantを使用する方法 table tr th { background-color: #aaa!important; } |
これらの解決策が考えられるでしょう。
たしかにどちらも上書きできます。
なぜなら「親要素を足す」ことも、「!importantを使う」ことも、
詳細度を高めているからです。
しかし、上書きするたびに親要素は増えていきますし、!importantを使ってしまうとまた上書きするのが大変です。
（次も!importantを使う羽目になってしまいます。）
適切な例
|
1 2 3 4 5 6 7 8 |
.table-heading { background-color: #aaa; } // クラス指定で上書きできる .table-heading-primary { background-color: #999; } |
最初からクラスで指定しましょう。
すると上書きするときもクラス指定でできます。
繰り返しになりますが、同じ詳細度であれば後で書いたスタイルが優先されます。
（この場合、どちらもクラスで指定されているので、あとで書いた#999が適用される）
余談
ここまで上書きのこと語っといて何だという感じですが、
本当は上書きしないことが一番です。
|
1 2 3 |
.heading { color: #333; | |
上書きが何度も繰り返されてしまえば、この.headingに当てられているスタイルが現在有効かどうかすぐにわかりません。
ソースコードを端から端まで見るか、ブラウザを開いて確認しなければいけません。
そんなときに必要となるのがCSS設計です。
CSS設計については以下の記事にて解説していますので、ぜひご覧ください。
また、!importantは厄介だと言いましたが、使用すべき場面がないわけではありません。
たとえばjQueryなどのプラグインを使用する場合です。
jQueryプラグインなどを使用するときはHTMLタグが勝手に生成され、その中に以下のような記述がなされることがあります。
|
1 |
<img class="slide-image" width="450px" height='300px" src="xxxx/xxx/xx/xxx.jpeg"> |
インラインでスタイルが書かれています。これはクラス指定では上書きできないのです。
（インラインで書かれたスタイルのほうが詳細度が高い）
そういった場合は!importantを使わざるを得ません。
まとめ
- CSSには詳細度がある
- スタイルはクラスに当てる
- スタイルの上書きはなるべくしない
この3点を意識するだけで、CSSファイルはかなりスッキリします。
この機会に「CSSが効かない！」にはさよならしましょう🤗
関連記事
記事を書いた人
睡眠・食事・運動に気をつけてます。 100歳まで生きる予定です。
睡眠・食事・運動に気をつけてます。 100歳まで生きる予定です。