CSSの特徴をしっかりと把握しよう

CSSの特徴を把握しよう

CSSにはいくつかの特徴があります。これらを早いうちに理解しておくと、ウェブ制作の作業効率が格段に上がります。逆に、これらの特徴を理解しておかないと、無駄な記述を増やしたり思い通りに表示されない現象に遭遇します。細かい部分に着手する前に、全体像を把握しておきましょう。

これから解説する内容は大きく分けて次の三つになります。

カスケード：CSSは上から下へ処理される
継承：親要素のスタイルは子孫へと受け継がれる
詳細度・特異性：スタイルの優先度と重み付け

カスケード

CSSは「Cascading Style Sheets（カスケーディング・スタイル・シート）」の略です。そのため、名前の由来となった「カスケード」の概念を正しく理解することが最初の第一歩です。カスケードを和訳すると「滝状の流れ」です。それをイメージすると、上から下へ流れる水となります。つまり、CSSは上から下へ処理されていくスタイルシートなのです。

具体的に言うと、先に書かれたスタイルは後に書かれたスタイルに上書きされます。同じ名前のセレクタに別のプロパティが指定されていれば追加されます。同じ名前のセレクタの同じプロパティに別の値が指定されていれば、先に書かれていた内容が破棄されて後に書かれたものが採用されます。もちろん、全ての内容が重複していなければ上書きは起こりません。


/* 同じセレクタに複数のプロパティを指定すると */
h1 {	font-size: 1.5rem;}
h1 {	color: #600;}

/* 追加されて以下と同じ意味合いになる */
h1 {
	font-size: 1.5rem;
	color: #600;
}


/* 同じセレクタの同種のプロパティに異なる値を指定すると */
h1 {	font-size: 1.5rem;}
h1 {	font-size: 2rem;}

/* 後に書いた値で上書きされる */
h1 {
	font-size: 2rem;
}

このように、CSSは上から下へ流れるように処理されていくものだ、ということを覚えておいてください。ただし、以降で説明する「詳細度・特異性」によって採用されるスタイルの優先度が変わります。

継承

HTMLは入れ子構造でマークアップしていくため、要素同士の親子関係が生まれやすくなります。親要素に指定されたスタイルの中には、子要素にも引き継がれるものがあります。これを「継承」と言います。プロパティによって継承「する／しない」の初期値が定義されています。

各プロパティの継承は、初期値の振る舞いを覚えた上でマークアップするか、継承を制御するプロパティを使って個別に変更できます。例えば、ある親要素の文字色を指定した場合、その値は子要素にも引き継がれます。


<p style="color: #990000;">
	テキスト <span style="font-weight: bold;">太字の子要素</span> テキスト。
</p>

上記の例では、<span>に囲まれた文字列が、太字として表示されるだけでなく、赤い文字として表示されます。これは親要素に指定されたスタイルが子要素へと継承されたことを意味します。実際に<span>に対して文字色の変更は指定されていませんが、そのように表示されるからです。

続いて、継承されない例を見てみましょう。先ほどの内容に横幅と外枠のスタイルを追記してみます。しかし、これらの装飾は子要素には継承されません。


<p style="color: #990000; width:80%; border:1px solid #000099;">
	テキスト <span style="font-weight: bold;">太字の子要素</span> テキスト。
</p>

継承の既定値は、一般的に多くの人々が自然だと感じる振る舞いが採用されています。色であれば最初から継承した方が楽に感じますし、枠線が全ての子要素に継承されたら不便に感じるからです。

しかし、継承は制作者側でいつでも変更できる仕様になっています。各プロパティの値に、以下のキーワードを指定すると、求める効果が得られます。

継承を制御する

inherit: 継承を有効にします。この値が追加されたプロパティは親要素と同じスタイルを優先させます。
initial: ブラウザのデフォルト・スタイルシートで設定されている値と同じものにします。デフォルトのスタイルが未設定だった場合は、代わりにinheritと同様の振る舞いをします。
unset: プロパティの値が自然に継承されるものであれば、inheritと同じ動作をします。そうでない場合は、initialと同じように動作します。


<div class="sample-block">
	<p class="item1">.item1: inherit</p>
	<p class="item2">.item2: initial</p>
	<p class="item3">.item3: unset</p>
</div>


.sample-block {
	padding: 0.5rem;
	border: 3px solid #ccc;
	color: #f00;
}
.sample-block > p {
	margin-block: 0.5rem;
}
.item1 {
	border: inherit;
	color: inherit;
}
.item2 {
	border: initial;
	color: initial;
}
.item3 {
	border: unset;
	color: unset;
}

詳細度・特異性

詳細度または特異性（Specificity）は、各要素に適用されるスタイルをブラウザが決定するために用いるアルゴリズムです。複数のセレクタが同じ要素に対して違うスタイルを指定している場合に、どちらを採用すべきかを決める判断基準となります。

基本的には、より具体的なセレクタを尊重します。例え話で言うと、宇宙よりも銀河、銀河よりも太陽系、太陽系よりも地球の方が身近に感じられる、といった感覚と同じです。汎用的な要素の名前よりも、idやclass名の方がより具体的です。そして一番具体的なのは、要素そのものにstyle属性を指定する方法です。

カスケードの特性を活かしてマークアップの後半で最初に書いたスタイルを上書きしようとしたとき、抽象的なセレクタで指定したスタイルは、具体的なセレクタで指定したスタイルを上書きできません。そのため、ルールに従って書いたつもりでも、CSSが正しく反映されないという悩みに遭遇します。

それらの問題の多くは、「詳細度」を理解することで解決します。ブラウザはスタイルを決定する上で以下の三つの判断材料を持ちます。

ソースオーダー（Source order）：カスケードによる優先度
詳細度（Specificity）：ポイントによる重み付け
重要性（Importance）：恣意的な重要性

この中で、詳細度にはセレクタに重み付けを行うポイントが用意されています。各ポイントは対応する列に与えられます。このポイントは加算されますが、桁をまたいだり繰り上がったりすることはありません。例えば、一番低い桁のポイントが10以上溜まっても、高い桁の1ポイントには勝てません。

種別	重み	概要
インラインスタイル	1-0-0-0	1000ポイントの重みを持つ
ID列	1-0-0	100ポイントの重みを加算
CLASS列	0-1-0	10ポイントの重みを加算
TYPE列	0-0-1	1ポイントの重みを加算
値なし	0-0-0	ポイントを加算しない

インラインスタイルの詳細度

インラインスタイルは、要素のstyle属性に指定される値のことです。要素に直接指定しているものであり、最も具体的な詳細度を持ちます。ポイントの列は1-0-0-0であり、他のセレクタでは干渉できない桁の数値を持つため、必ずインラインスタイルが優先されます。ヘッダーや外部ファイルにいかなるセレクタが定義されていたとしても、インラインスタイルは同じプロパティの値を上書きします。

どうしてもインラインスタイルを打ち消したい場合は、プロパティの値に!importantのキーワードを追加します。これはイレギュラーな操作であるため、多用は禁物です。また、インラインスタイルも局所的なソースコードを増やす原因になるため、できる限りidやclassで管理しましょう。


<!-- style属性の内容は詳細度 1-0-0-0 -->
<div style="color: red;" class="item" id="name">
Inline style text.
</div>


/* 詳細度 0-1-0-0 で上書きできない */
#id {	color: #036;}

/* 詳細度 0-0-1-0 で上書きできない */
.class {	color: #063;}

/* 詳細度 0-2-12-0 でも上書きできない */
#id1 #id2.c1.c2.c3.c4.c5.c6.c7.c8.c9.c10.c11.c12 {}

/* 唯一 !important を使うと優先される */
.item {	color: #063; !important}
#name {	color: #036; !important}

ID列の詳細度

ID列の詳細度は、IDセレクタで指定された内容に対して与えられます。ポイントの列は1-0-0です。HTMLの文法では、id属性の値はひとつのページにひとつだけ設置して良いことになっているため、固有の識別子として扱えます。そのため、詳細度はインラインスタイルに次いで二番目に高い桁となっています。


/* 詳細度 1-0-0 */
#container {}

/* 詳細度 2-0-0 */
#container #block {}

/* 詳細度 1-1-0 */
#container .class {}

/* 詳細度 1-1-1 */
#container .class > p {}

/* 詳細度を上げたくない場合 */
:where(#id) {}

CLASS列の詳細度

CLASS列の詳細度は、CLASSセレクタ、属性セレクタ、擬似クラスセレクタで指定された内容に対して与えられます。ポイントの列は0-1-0です。HTMLの文法では、class属性の値はひとつのページにいくつでも設置して良いことになっています。そのため、詳細度はIDセレクタよりも低い三番目の桁となっています。


/* 詳細度 0-1-0 */
.block-group {}

/* 詳細度 0-1-0 */
[class="block-group"] {}

/* 詳細度 0-2-0 */
.menu .item {}

/* 詳細度 0-2-0 */
.menu > [data-item] {}

/* 詳細度 1-1-0 */
.class #id {}

/* 詳細度 1-1-1 */
.class #id > section {}

/* 詳細度 0-2-1 */
a.link:hover {}

/* 詳細度を上げたくない場合 */
:where(.class) {}

TYPE列の詳細度

TYPE列の詳細度は、要素セレクタ、擬似要素セレクタで指定された内容に対して与えられます。ポイントの列は0-0-1です。HTMLであらかじめ定義されている要素のタグ名などを指すため、汎用的なセレクタとして用いられます。任意で名前を決められるidやclassよりも抽象的であることから、最も低い桁のポイントとなります。


/* 詳細度 0-0-1 */
p {}

/* 詳細度 0-0-2 */
header nav {}

/* 詳細度 1-0-1 */
header #logo {}

/* 詳細度 0-1-1 */
header .banner {}

/* 詳細度 0-0-2 */
li::before {}

/* 詳細度を上げたくない場合 */
:where(ol, ul) {}

値なしの詳細度

詳細度の値を持たないセレクタは、ユニバーサルセレクタ（*）および:where()擬似クラスです。これらを使用して指定したスタイルは、詳細度のポイントに影響を与えません。

ユニバーサルセレクタ（*）は、一般的にソースコードの上部に配置され、ブラウザの既定値を初期化するために使われます。そこで指定された内容は、0-0-0のポイントであるため、後に配置されたセレクタでいくらでも上書きできます。

:where()擬似クラスは、それ自体では詳細度に影響を及ぼしませんが、引数に指定されたセレクタの詳細度を0-0-0にする効果を持ちます。例えばIDセレクタやCLASSセレクタで指定するスタイルの詳細度を上げたくない場合に、:where()擬似クラスで囲って低い詳細度を保つことができます。

また、セレクタ同士を関連付ける結合子（、<、+、~、||）は詳細度の重み付けには影響を与えません。結合子を使ってセレクタが対象にする要素を具体的に絞り込むことと、詳細度を上げることは関係がないということです。


/* 詳細度 0-0-0 */
* {}

/* 詳細度 0-0-0 */
:where(#id) {}

/* 詳細度 0-0-0 */
:where(.class) {}

/* 詳細度 0-0-0 */
:where(section > p) {}

重要性（!important）

CSSは、ブラウザのデフォルト・スタイルシート、ユーザーが設定したスタイルシート、ページ制作者が用意したスタイルシートの順に優先されます。つまり、制作者が用意したスタイルシートは、あくまでユーザーに提案するものであって、閲覧する側が任意のスタイルを表示するように設定していた場合は無効となります。

しかし、どうしてもこちらで意図したように表示しないと不都合が生じてしまう場合には、特定のプロパティの優先度を高くするように命令することができます。

CSSでは、特定のプロパティに!importantを指定すると、そのプロパティの優先度が高くなります。基本的な優先度を超えて強制的にスタイルを適用させたいプロパティがある場合に活用してください。

ただし、絶対に必用な箇所以外は使用を控えてください。カスケードのルールや標準仕様を超えてスタイルを強制するやり方は、デバッグを困難にするだけでなく、閲覧者の不快を誘う可能性があります。

h1 {
	color: #ff0000 !important;
}

上記の例は、優先的に文字を赤くしたい場合に指定する内容になります。要素名を元にした詳細度の低いセレクタですが、ID列やCLASS列の詳細度があったとしても、上書きしたい場合に使用します。

あとはセレクタとプロパティを覚るだけ

上記の特徴を掴んだら、あとはひたすらセレクタとプロパティを覚えて実践的に書いていくだけです。スタイルシートを使ってウェブサイトをデザインする技術は、ある程度のトライアンドエラーと経験が必要になります。

マークアップしていく過程で、思ったように表示されなかったり、レイアウトが崩れた箇所を直せない場合は、ここで解説した「カスケード」、「継承」、「詳細度」を思い出して、コードを見直してみましょう。

最初に基礎を理解していれば、膨大な数のプロパティや複雑なセレクタも使いこなせるようになります。慣れてくるまでは、有名なサイトのソースコードを見たり、Wordpressなどのオープンソースを改造して、あなたがよく使うパターンを見出しましょう。

CSSって何？初心者が最初に学ぶべき基礎知識

CSSの書き方を詳しく解説！基本的な型とルールを覚えよう