【CSS】スタイルの適用規則(カスケーディング、詳細度)についてまとめてみた |

投稿日 : 2019年5月24日

【CSS】スタイルの適用規則(カスケーディング、詳細度)についてまとめてみた

HTML・CSS|プログラミング

こんにちは、yutaです。

Webページを制作する際に、必ず必要なものとしてCSSがあります。CSSの基本的な書き方はもちろんご存知だと思いますが、「カスケーディング」はご存知ですか？

記述したスタイルが意図したように適用されない時、カスケーディングの考え方を知っていると解決できるかもしれません。カスケーディングは複雑なCSSを記述する場合には必ず必要になる知識ですので、ここでしっかり理解しておきましょう。

1.カスケーディング
 1-1.優先度
 1-2.詳細度
 2.【番外編】インラインスタイルと!important宣言
 2-1.インラインスタイル
 2-2.!important宣言

1.カスケーディング

カスケーディング : ある要素に適用させるスタイルが複数あった時にどのスタイルを適用させるかを決める仕組み

上記のようにwrapperに対して複数のルールセット*で同じプロパティに対する記述がされている場合、どちらを適用することになるのでしょうか。これを決定するのがカスケーディングという仕組みです。

*ルールセット : スタイルを記述した一つの塊のこと。

カスケーディングでは以下の順でスタイルを適用します。

1.優先度が高いもの
2.優先度が同じ場合は、詳細度が高いもの
3.優先度と詳細度が同じ場合は、最後に宣言されたもの

1-1.優先度

優先度は、そのスタイルが何によって指定されているか、そして!important宣言があるかどうかによって決まります。優先度は以下の順で高くなります。

1.各ブラウザにデフォルトで設定されている、!important宣言付きのスタイル2.ユーザーがブラウザに追加した、!important宣言付きのスタイル
3.Webページ制作者が指定した、!important宣言付きのスタイル
4.Webページ制作者が指定したスタイル
5.ユーザーがブラウザに追加したスタイル
6.各ブラウザにデフォルトで設定されているスタイル

僕たちがWebページを制作する時にCSSファイルに書き込んでいるスタイルは3と4にあたります。

先ほどのwrapperに対するスタイルはいずれも同じCSSファイルに記述しているものとすれば、優先度は同じです。

優先度が同じ場合は、詳細度の高いスタイルが適用されますが、詳細度についてはこれからお話しします。

1-2.詳細度

詳細度 : スタイルを適用させたい要素をどれだけ詳細に指定しているかを表すスコア

これだけ書かれてもさっぱりわかりませんね。詳しくみていきましょう。

スコアと書いている通り、詳細度は計算されて導かれる値です。(なんだか難しそう・・・)

各セレクタは種類ごとに3つのグループ(a, b, c)に分けられており、セレクタ1つあたりにスコアが1与えられます。同じグループのセレクタが2つ出てきたらそのグループのスコアは2となります。

言葉だけではわかりづらいので例を出して解説します。

セレクタのグループ分けは以下のようになっています。

例えば、以下のようなHTMLコードがあるとします。

ここでh2部分に対してスタイルを適用させようとした場合、以下のようなセレクタが考えられます。

【取りうるセレクタ】
h2
.name
#name
h2.name
#profile h2
#profile h2.name
#profile .name
#profile #name

これらのセレクタに対し、上表をもとに詳細度を計算すると以下のようになります。

取りうる各セレクタを計算しましたが、これらのうち以下の順番で詳細度が高くなります。

1.aのスコアが高いもの
2.aのスコアが同じであれば、bのスコアが高いもの
3.a,bのスコアが同じであれば、cのスコアが高いもの

今回の場合は、セレクタ「h2」の詳細度が最も低く、セレクタ「#profile #name」の詳細度が最も高くなります。

セレクタ「#profile #name」が最も詳細度が高くなるため、例えばCSSで以下のように記述した場合、セレクタ「#profile #name」で記述したスタイルが適用されることになります。これは、詳細度の知識が無いと「ん？」となりますよね。

後半に書かれているスタイルよりも、詳細度の高い#profile #nameが適用される例

冒頭で、詳細度とは「スタイルを適用させたい要素をどれだけ詳細に指定しているかを表すスコア」と述べましたが、セレクタ「#profile .name」とセレクタ「#profile #name」を比較すると、前者はクラスを使って指定しているのに対し、後者はIDで指定しているので、直感的にも後者の方がスタイルを適用させる要素をより詳細に指定していることが分かります。

優先度も詳細度も同じものは、最後に記述されたスタイルが適用されます。冒頭で記述指定た以下のスタイルは、優先度も詳細度も同じであるため、後者が適用され「width:200px;」となります。

カスケーディングなどの細かい知識は、複雑なデザインを作り込んでいく際には必須になってきますが、ネット上に公開されているCSS入門などではなかなか紹介されていなかったりします。(初心者向けなので細かいことは省かれている。)

しかしながら、こういった知識は後々重要になってきますので書籍で体系的に学習しておくことをおすすめします。僕が実際に購入した書籍は以下です。CSSだけでなく、Webページを制作していくうえで重要なレイアウトや配色、フォントなどについても詳しく解説されていて大変勉強になるので持っておいて損はしない一冊です。

[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]

いちばんよくわかるWebデザインの基本きちんと入門　レイアウト／配色／写真／タイポグラフィ／最新テクニック／伊藤庄平／益子貴寛／久保知己
価格：2570円（税込、送料別) (2019/5/24時点)

楽天で購入

2.【番外編】インラインスタイルと!important宣言

ここからは番外編ですが、CSSファイルに記述するスタイルや、HTMLファイルの<style>タグに記述するスタイルとは別の「インラインスタイル」というものについて、そして「!important」というキーワードの宣言についてお話しします。

2-1.インラインスタイル

これまで詳細度について詳しく解説してきましたが、スタイルを適用させたい要素に直接style属性を記述する「インラインスタイル」というものがあります。

インラインスタイルは詳細度の計算云々以前に、要素に直接記述されているスタイルなので、CSSファイルに記述されているスタイルより優先して適用されます。インラインスタイルを使うとスタイルがほぼ確実に適用されることになりますが、CSSファイル側でのスタイルの書き換えができなくなるうえ、後々見直した時にスタイルを記述している場所が探しづらいため、メンテナンス性が悪くなります。従って、できる限りインラインスタイルは使わない方が良いようです。