CSSの特徴をしっかりと把握しよう
CSSの特徴を把握しよう
CSSにはいくつかの特徴があります。これらを早いうちに理解しておくと、ウェブ制作の作業効率が格段に上がります。逆に、これらの特徴を理解しておかないと、無駄な記述を増やしたり思い通りに表示されない現象に遭遇します。細かい部分に着手する前に、全体像を把握しておきましょう。
カスケード
CSSは「Cascading Style Sheets（カスケーディング・スタイル・シート）」の略です。そのため、名前の由来となった「カスケード」の概念を正しく理解することが最初の第一歩です。カスケードを和訳すると「滝状の流れ」です。それをイメージすると、上から下へ流れる水となります。つまり、CSSは上から下へ処理されていくスタイルシートなのです。
具体的に言うと、先に書かれたスタイルは後に書かれたスタイルで上書きされます。同じセレクタに別のプロパティが指定されていれば追加されます。同じセレクタの同じプロパティに別の値が指定されていれば、先に書かれていた内容は破棄されます。もちろん、全ての内容が重複しなれれば上書きされません。
このように、CSSは上から下へ流れるように処理されていくものだ、ということを覚えておいて下さい。ただし、以降で説明する「詳細度・特異性」によって採用されるスタイルの優先度が変わります。
継承
親要素に指定されたスタイルの中には、子要素にも引き継がれるものがあります。これを「継承」と言います。プロパティによって継承「する／しない」の初期値が定義されています。これらは継承を制御するプロパティによって個別に変更できます。
例えば、ある親要素の文字色を指定した場合、その値は子要素にも引き継がれます。
<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と同じように動作します。
#contents {
color: #ff0000;
}
.item1 {
color: inherit;
}
.item2 {
color: initial;
}
.item3 {
color: unset;
}
詳細度・特異性
詳細度または特異性（Specificity）は、各要素に適用されるスタイルをブラウザが決定するために用いるアルゴリズムです。複数のセレクタが同じ要素に対して違うスタイルを指定している場合に、どちらを採用すべきかを決める判断基準となります。
基本的には、より具体的なセレクタを尊重します。例え話で言うと、宇宙よりも銀河、銀河よりも太陽系、太陽系よりも地球の方が身近に感じられる、といった感覚と同じです。汎用的な要素の名前よりも、idやclass名の方がより具体的です。そして一番具体的なのは、要素そのものにstyle属性を指定する方法です。
例えば、カスケードの特性を活かしてマークアップの後半で最初に書いたスタイルを上書きしようとします。しかし、抽象的なセレクタで指定したスタイルは具体的なセレクタを上書きできません。そのため、ルールに従って書いたつもりのCSSが正しく表示されないという悩みに遭遇します。その問題の多くは、詳細度を理解することで解決します。
ブラウザはスタイルを決定する上で以下の三つの判断材料を持ちます。
- ソースオーダー（Source order）：カスケードによる優先度
- 詳細度（Specificity）：ポイントによる重み付け
- 重要性（Importance）：恣意的な重要性
この中で詳細度には、セレクタに重み付けを行うポイントが用意されています。この中で高いポイントを有するセレクタの指定したスタイルが、優先的に採用されます。
- style属性：1000ポイント
- idセレクタ：100ポイント
- classセレクタ：10ポイント
- 要素セレクタ：1ポイント
重要性（!important）
CSSは、ブラウザのデフォルト・スタイルシート、ユーザーが設定したスタイルシート、ページ制作者が用意したスタイルシートの順に優先されます。つまり、制作者が用意したスタイルシートは、あくまでユーザーに提案するものであって、閲覧する側が任意のスタイルを表示するように設定していた場合は無効となります。
しかし、どうしてもこちらで意図したように表示しないと不都合が生じてしまう場合には、特定のプロパティの優先度を高くするように命令することができます。
CSSでは、特定のプロパティに!importantを指定すると、そのプロパティの優先度が高くなります。基本的な優先度を超えて強制的にスタイルを適用させたいプロパティがある場合に活用して下さい。
ただし、絶対に必用な箇所以外は使用を控えて下さい。カスケードのルールや標準仕様を超えてスタイルを強制するやり方は、デバッグを困難にするだけでなく、閲覧者の不快を誘う可能性があります。
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属性を指定し、それをセレクタにして個別のスタイルを設定しています。
<div id="menu">
<ul>
<li>メニュー01</li>
<li>メニュー02</li>
<li>メニュー03</li>
<li>メニュー04</li>
</ul>
</div>
<div class="contents">
コンテンツ、コンテンツ、コンテンツ、コンテンツ
</div>
#menu {
width: 300px;
float: left;
font-size: 14px;
font-weight: bold;
}
.contents {
width: 500px;
float: right;
}
このように、管理の面から見てもid属性やclass属性を活用してスタイルを分かりやすく整理しておくことをお勧めします。