CSSの特徴

CSSの特徴を把握しよう

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

カスケード

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

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

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

継承

親要素に指定されたスタイルの中には、子要素にも引き継がれるものがあります。これを「継承」と言います。プロパティによって継承「する/しない」の初期値が定義されています。これらは継承を制御するプロパティによって個別に変更できます。

例えば、ある親要素の文字色を指定した場合、その値は子要素にも引き継がれます。

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

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

表示確認

テキスト 太字の子要素 テキスト。

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

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

テキスト 太字の子要素 テキスト。

継承の既定値は、一般的に多くの人々が便利だと感じる振る舞いが採用されています。これは感覚に基づく仕様なので、変更したい場合は、制作者側でプロパティを制御し、個別に問題を解決します。

継承を制御する

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

詳細度・特異性

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

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

例えば、カスケードの特性を活かしてマークアップの後半で最初に書いたスタイルを上書きしようとします。しかし、抽象的なセレクタで指定したスタイルは具体的なセレクタを上書きできません。そのため、ルールに従って書いたつもりのCSSが正しく表示されないという悩みに遭遇します。その問題の多くは、詳細度を理解することで解決します。

ブラウザはスタイルを決定する上で以下の三つの判断材料を持ちます。

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

この中で詳細度には、セレクタに重み付けを行うポイントが用意されています。この中で高いポイントを有するセレクタの指定したスタイルが、優先的に採用されます。

  1. style属性:1000ポイント
  2. idセレクタ:100ポイント
  3. classセレクタ:10ポイント
  4. 要素セレクタ:1ポイント

重要性(!important)

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

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

CSSでは、特定のプロパティに「!important」を指定すると、そのプロパティの優先度が強くなります。基本的な優先度を越えて強制的にスタイルを適用させたいプロパティがある場合に活用してください。ただし、絶対に必用な箇所以外は使用を控えて下さい。カスケードのルールや標準仕様を超えてスタイルを強制するやり方は、デバッグを困難にするだけでなく、閲覧者の不快を誘う可能性があります。

CSS
h1 {
	color: #ff0000 !important;
} 

上記の例は、優先的に文字を赤くしたい場合に指定する内容になります。

idとclass名をセレクタにする

同じ種類のタグに違うスタイルを適用したい場合に、idやclass属性で与えた名前をセレクタにできます。全てのHTML要素はグローバル属性を指定できるため、どのタグに対してもidやclass属性による命名が可能です。

同一のページに複数の同一要素があり、個別のスタイルを適用したい場合や、複数のページの中に同じパターンでスタイルを適用したい場合に、名前とスタイルを共通化しておくと管理がとても楽になります。

id属性の例
<div id="content">
class属性の例
<div class="box">
id名をセレクタにする場合
id名の先頭に「#」を付けて指定(#content)
class名をセレクタにする場合
class名の先頭に「.」を付けて指定(.box)

以下の例では、コンテンツを囲う<div>にidとclass属性を指定し、それをセレクタにして個別のスタイルを設定しています。

CSS
#menu {
	width: 300px;
	float: left;
	font-size: 14px;
	font-weight: bold;
}
.contents {
	width: 500px;
	float: right;
}
HTML
<div id="menu">
	<ul>
		<li>メニュー01</li>
		<li>メニュー02</li>
		<li>メニュー03</li>
		<li>メニュー04</li>
	</ul>
</div>

<div class="contents">
コンテンツ、コンテンツ、コンテンツ、コンテンツ
</div>

このように、管理の面から見てもidやclass属性を活用してスタイルを分かりやすく整理しておくことをお勧めします。

セレクタのグループ化

CSSには、複数のセレクタに対して同じプロパティをまとめて指定するグループ化の機能が備わっています。セレクタをカンマ(,)で区切って連続で記述すれば、それらの要素に対して同じスタイルを適用できます。例えば、<h1>と<h2>に同じスタイルを指定する場合は、以下のように記述します。

CSS
h1, h2 {
	color: #ff0000;
	font-size: 18px;
}

CSSリファレンス

CSSって何? 初めての方でも分かる超基礎知識を解説します
CSSの書き方 CSSの書き方について基本的な解説です
CSSの特徴 CSSの特徴を理解して有効に活用しましょう
CSSで使えるセレクタ セレクタとはスタイルを適用する対象を指定するものです
CSSで使える単位 CSSで使える単位の一覧です
ブロックレベルとインライン ブロックレベル要素とインライン要素について詳しく解説
idとclassについて 要素にidとclassで名前を付ける
余白と外枠の関係 余白や外枠を指定する際のコツについて
DOCTYPE宣言・DOCTYPEスイッチ [!DOCTYPE]の使い方について
ユニバーサルセレクタ(*)について ユニバーサルセレクタ(全称セレクタ)を使えば全てのタグを一括で指定できます