ノマドな海外移住計画
歩き続けること
公開日:2019.03.16
/ 最終更新日:
HTML, CSS

【上級コーダーになるために】CSSが適用されるときのクセを知っておく!CSSの詳細度とは

こんにちは。
HTML, CSSを学び始めてから13年の藤ミヤチです。

コーディングをするにあたって

悩み

CSSちゃんと書いたのに効かないのなんでじゃ..

という場面には何度も遭遇すると思います。

まあ、クラス名のスペルミスだったり、CSSの書き損じだったりすることが多いんですが、中にはCSSの詳細度が原因でうまく効いてないことも多いんです。

疑問

「詳細度」?

と言われてもピンと来ないかもしれません。

CSSを学ぶ教材などでもしっかり説明されていなかったり、詳細度に触れていてもさらっと書かれているだけだったりすることがあります。

ただし、CSSの詳細度はコーディングする上でとても重要なシステムなので、ぜひコーダーとしてレベルアップしたい方には知ってほしいです。

藤ミヤチ
藤ミヤチ

仕組みはシンプル!数分で詳細度についてわかるようになるよ〜

CSSの詳細度について考える前に知ってほしい、CSSの基礎知識

CSSの詳細度の前に、CSSの基本的な「クセ」について知ってほしいです。

つまりそれは、「あとに書いたほうが正義」ということ。

例えば、

.hoge {
  color: #0000FF;   /*青色*/
  color: #FF0000;   /*赤色*/
}

としたとき、実際に hoge というクラスが付与されたところは何色になるでしょうか。

結果は「赤色」です。

CSSはあとからどんどん上書きされていくので、より下に書いたほうが適用されます。
CSSを分けて書いた場合も同じです。

.hoge {
  color: #0000FF;   /*青色*/
}

.fuga {
  font-size: 15px;
  line-height: 1.8;
}

.hoge {
  color: #FF0000;   /*赤色*/
}

このときも、hoge というクラスが付与されたところは赤色になります。

藤ミヤチ
藤ミヤチ

あとに書いたほうが正義!


CSSの詳細度とは、どれだけ限定的に設定しているか

実は、CSSは「あとに書いたほうが正義」ルールのほかに「力を限定的にしたほうがより正義」というルールも好みます。

「あとに書いたほうが正義」ルールだけでいうと、

.fuga .hoge {
  color: #0000FF;   /*青色*/
}

.hoge {
  color: #FF0000;   /*赤色*/
}

hoge というクラスが付与されたところは赤色になりそうですが、実は青色になります。

疑問

「あとに書いたほうが正義」じゃないのか?

って突っ込みたくなりますが、実はCSSは「力を限定的にしたほうがより正義」ルールのほうが好きです。

上記のCSSを詳しく説明すると、
.hoge はHTML内に存在する全 hoge に対して赤字を強制していますが、
.fuga .hoge は fuga というクラスが付与された箱の中に存在する hoge だけに青色を強制しています。

つまり、.fuga .hoge のほうが効力を限定的にしているがゆえに、強いんです。

「どれくらい効力を限定しているか」を「CSSの詳細度」といい、「詳細度の高いほうが適用される」んです。

藤ミヤチ
藤ミヤチ

力を限定的にしたほうがより正義!

CSSが好むルールを知っておくことが大事

詳細度については、実はもっと細かいルールがたくさんあります。

気になった人は調べてみてもいいかとは思いますが、コーディングをするにあたってそこまで厳密な知識は必要ない場面も多いです。

まず覚えておいてほしいのは、

「あとに書いたほうが正義」で、「力を限定的にしたほうがより正義」です。

HTML, CSSのクラス名も正しくて、CSS自体にもミスがない……それなのにCSSが効かない……というときは、CSSの詳細度を確認してみるといいですね!

藤ミヤチ
藤ミヤチ

CSSのクセを知っておくことが大事!