ＣＳＳ作成編
-3 セレクタの有効利用
レイアウトの設計
CSSを記述する前に HTML文書でスタイル設定の準備をします。
まずページ内容を情報のまとまり＝箱ごとに分類します。
この箱のまとまりでレイアウトを構築する考え方をボックスモデルと呼んでいます。
HTMLタグのdivを使用することが多いと思いますが、divの乱用は避け 明確かつ最小限につけることが望ましいとされています。
この時点での設計が重要です。
スタイルを設定していくと、徐々に複雑化していき、付け焼刃的な分類・設定になりがちなので、設定を施す前段階での綿密な設計に基づきCSS設定作業に入るべきです。
設定したボックスごとに それぞれ識別するための名前を セレクタを使用し付けていきます。
上図は前項で基本情報をHTML文書化した次の段階として、できあがりの設計図を念頭に、ボックスに分類する内容ごとに名前を付けています。
情報量が増えると共に複雑化していくデザイン作業が、後々突貫工事的にならない様、このセレクタも計画的に設定・利用する必要があります。
セレクタの種類
上述した「セレクタ」を種類別にまとめます。
CSS記述の基本
CSSの基本的な記述は上図の通りです。
セレクタで選択した「body：ページ全体」に、「background：背景」プロパティの「red：赤」という値を適用させるという形式で記述します。
HTML文書内にCSSを適用させる場合重要なのが、このセレクタの選択です。
どこにスタイルを適用させるのか、という基本設計ができていないと、まとまりのない記述をその都度足していくことになり、メンテナンス性の向上という本来の目的が達せられなくなります。
ユニバーサルセレクタ
「ユニバーサルセレクタ」はあらゆる要素に適用したい場合に使用します。
このセレクタを利用して、すべての要素に枠線を表示してレイアウトの確認をするなど、デザインや機能の検証にも便利です。
シンプルセレクタ
「シンプルセレクタ」はHTMLタグひとつを対象とします。
上図の場合、サイト内全h1要素に適用する場合等に用います。
グループセレクタ
同じ内容の設定を、複数の要素に適用したい時には、上図の様に、「グループセレクタ」として表記し、重複した記述でCSSが肥大化することを避けます。
IDセレクタ・クラスセレクタ
特定タグにスタイルを指定する「シンプルセレクタ」「グループセレクタ」では不可能な、もっと限定した箇所にスタイル指定をしたい場合に使用するのが「IDセレクタ」と「クラスセレクタ」です。
この二つの使用を明確に定めたルールはなく、効果自体も同じです。
ただ、マークアップの基本的なルールとして、「IDセレクタ」はページ内にひとつしかない要素に対して使用し、「クラスセレクタ」は繰り返し使用したいスタイル内容に対して使用するというやり方が一般的です。
上述の図で 各ボックスに付けた名前（container、header等）は「IDセレクタ」で識別し、そのボックス内で何度も指定する箇所では「クラスセレクタ」を利用する、等使い分けます。
また、上図「IDセレクタ」の値の例として 「複数の値の指定方法」とありますが、これは「IDセレクタ」に限ったことではなく、全てのセレクタに共有できる表記の方法です。
上図の例では、border（枠線）のborder-width(太さ)とborder-style(種類)を併記した例です。
こうすることにより、プロパティが簡略化されシンプルなCSSソースになります。ファイルサイズも軽減されます。
子孫セレクタ
さらに「子孫セレクタ」を利用することでより詳細なデザイン設定が可能になります。
上図の例は「redというクラス名がついたp要素の中のem要素」に対し、「color：色」を「red：赤」に設定するという意味になります。
「子孫セレクタ」という言葉の意味は、要素同志を家系図に例えて解釈するとわかりやすいです。
html要素の中にはbody要素がある、body要素の中にはp要素がある、というように、ひとつのページ内の要素には上位から下位までの流れがありますので、この例の最も下位にあるem要素にとって直近のp要素より上位の要素はすべて「祖先」であり、反対に上位要素から見たem要素は「子孫」である、というわけです。
