外部スタイルシートはいくつに分けたほうが良いか？

2007年2月12日

Web DesigningでCSS特集なるものをやっていたので、今回は「外部スタイルシートはいくつに分けたほうが良いか？」というお話。

いわゆる、よくあるコーポレートサイトでは合計3つほどCSSファイルを用意すれば十分だと思う。内訳はこんな感じ。

common.css
ヘッダー、フッターやタグの初期設定を記述したCSSファイル
index.css
TOPページ用CSSファイル
content.css
２階層目以降のページ用CSSファイル

実際に各ページが読み込むのは、common.cssとindex.cssまたはcontent.cssの2つ。（読み込み順はcommon.cssが先にくるようにする）

ヘッダーやフッター、ナビゲーションなどは全てのページに共通する部分が多いためcommon.cssは全てのページに読み込ませる。

index.cssはTOPページ専用CSS。トップページのメイン部分は他のページと大きくデザインやレイアウトが異なる場合が多いため独立させたほうが良い。

content.cssは２階層目以降のページ用CSSファイル。１０ページほどのベーシックなコーポレートサイトではTOPページ以外のページの基本的な構造は共通しているので、１つのCSSファイルでまかなう。ページごとにスタイルを変えたい場合は、各要素にidを指定する。body要素にページごとのidを振ると便利。

少し前までは、フォント用CSS、レイアウト用CSSというように事細かにCSSファイルを分割しているサイトよく見かけたが、かえってメンテナンス性が低下するのでおすすめしない。

また、ページ毎にCSSファイルを用意するのもおすすめしない（特集ページなど独立したデザインの場合は除く）。CSSは複数のページで使いまわすことで、デザインの一元管理ができるわけで、それに加えおのずとデザインが統一されるというメリットもある。

と、ここまで話しましたが、これはあくまで一例です。デザイン要素が少なければ、common.cssだけのほうが良い場合もありますし、サイトの規模が大きくなればカテゴリごとにCSSを分けたほうがいい場合もあります。その他、印刷用CSSや特定のブラウザ用CSSを加えるのも良いと思います。


/*印刷用CSS*/
<link rel="stylesheet" href="print.css" type="text/css" media="print" />


/*IE5用CSS （条件分岐コメントを使用） */
<!--[if  IE 5]>
<link rel="stylesheet" href="ie5.css" type="text/css" />
<![endif]-->

条件分岐コメントは以前は使用を避ける傾向がありましたが、最近は使うサイトが増えてきたように思います。先を見据え、common.cssやindex.cssはハックを一切使わない正しい形式にし、IE5などハックが必要なブラウザには個別にCSSを読み込ませたほうが合理的なためだと思います。必要なくなれば、オーサリングツールで一括置換すれば簡単に取り除けますしね。