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

2019.03.16  /  2019.06.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のクセを知っておくことが大事!
スキルアップしたいサイト制作者
向けの情報をつぶやくよ 藤ミヤチのTwitter
(ここをクリック/タップ)



LINE@で特別レクチャーなどの情報を発信中!
友だち追加

シェア


この記事も参考になるかも
SEO対策のためのmetaタグはこう書く!効果のある記述方法を丁寧に解説
コーディング初心者がやりがちなミスまとめ(HTML, CSS, JavaScript/jQuery対応)
CSSでデザインが崩れた!余白paddingが原因のデザイン崩れは、簡単に解決できる