CSSコンポーネント化

CSSコンポーネント化

　前のページであげた第1のコツ「同じ要素は1つだけにする」の具体的な例として、CSSのコンポーネント化（単位に部品化）があります。制作するWebサイトの規模によって異なってくると思いますが、トップページから見てディレクトリが深くなると、同じようなデザインのカラムや、CSSの繰り返しが発生します。

　1つのWebサイトであれば、CSSに限らずHTMLも同じ形式を使うことが、デザイン面の統一性を保つために望ましいことです。よく使うナビゲーションやコンテンツの中のカラムなど、普段よく使うCSSやHTMLは別にまとめて部品として用意（コンポーネント化）したり、テンプレートタグを作成しておくことで作業効率が高まります。

　CSSを一カ所にまとめることにより、後述するバグ対応が楽になるメリットもあります。また「第3回：万能なWebサイトを作ろう」で紹介したprint.cssなどもこのCSSコンポーネント化の1つです。では、実際によく利用される具体的なコンポーネント内容について紹介していきましょう。

CSSの地ならしデフォルトスタイルの初期化

　デフォルトスタイルとは、Webブラウザが標準で実装しているCSSのことですが、Webブラウザごとにデフォルトスタイルは異なります。特に問題になるのが、marginやpaddingの解釈の違いで、デフォルトスタイルのmarginやpaddingを上書きしない限り、Webブラウザ間では差異が発生します。このような差異を「ならす」ためのCSSを「リセットスタイル」や「リセットCSS」と呼びます。

　リセットスタイルは「reset.css」といったファイル名で保存しておき、そのほかのスタイルと区別したコンポーネントとして用意しておくのが一般的です。ほかのセレクタの前に書かなければ意味が無いので、CSSファイルの一番上に指定します。

　通常は、構造のための要素とブロックレベル要素のmarginとpaddingを0に統一して、ほかのプロパティは必要であれば指定します。またインライン要素についても、必要であればリセットしておく良いでしょう。

　また記述方式として「要素を列挙していく指定方法」と「ユニバーサルセレクタを使用する指定方法」があります。要素列挙によるリセットスタイルでは、特にどの要素を指定しておくべきか定められてはいないので、制作するWebコンテンツによって柔軟に変更すると良いでしょう。ユニバーサルセレクタを使用するリセットスタイルは、一括指定ができて便利な*（アスタリスク）を使用するので一見便利に見えますが、意図しないスタイルまでリセットしてしまったり、指定したのセレクタのプロパティに対応できないといった問題があるため、最近では要素列挙によるスタイルのリセット方法が主流です。

　次のページでは、属性のコンポーネントについて紹介します。