2xup.org

CSS 分割管理の実践編

数日前に行ったリニューアルでは、いくつか課題を設けました。ただただリニューアルしても張りがありませんし、ウェブデザインを行うものにとって自身のウェブサイトは自身の作品のようなものだし、好き勝手できるのも魅力なわけです。何回かの記事にわけて、リニューアルでおこなった作業をまとめていこうと思います。

nipeke前回、スタイルシートを分けて管理する方法をまとめるCSS ファイルを分割管理するメリットや、どのように分割するか案を書いてみましたが、今回のリニューアルで実際に案を元に分割管理を実践し、結果はリストのようになりました。各ファイルの概要は案段階から変化がないので、そちら参照ください。以下のリストでは、テーマファイル以外の実際の CSS ファイルにリンクしています。

案から大きな変化はありませんが、記事個別ページ以外ではレイアウトを選択できるようにしたかったので layouts ディレクトリの構成をすこしだけ変更。layout-default.css というファイルを用意し、screen.css で読み込む事にしました。ですので、screen.css の内容も案の段階から若干変更。

@charset "utf-8";

@import url("common.css");
@import url("component.css");
@import url("fonts.css");

@import url("layouts/layout-default.css");

@import url("themes/nipeke/theme.css");

レイアウトを選択できる仕組み

javascript を利用し、読み込むレイアウト CSS ファイルを変更し、レイアウトの切り替えを実現しています。javascript を利用するので、javascript が有効ではない場合を考え、layout-default.css を用意。layout-default.css では、デフォルトのレイアウトとしている two-column-right (2カラム・メニュー右側) を定義し、このファイルが必ずどのレイアウトでも読み込まれるようにすることで、他のレイアウト CSS ファイルの定義を最低限に抑えています。また、レイアウトをカスタマイズしたい場合は、layout-default.css の指定を上書きするかたちでレイアウトスタイルを追加すればよいわけです。

選択したスタイルはキャッシュに登録されますので、閲覧者が 2xup.org を見たいレイアウトで閲覧し続けることができます。今回はレイアウトの切り替えに利用しましたが、テーマの切り替えなどにも利用できそうです。

HTML での参照方法

HTML ファイルで CSS ファイルをどのように参照するかも、レイアウトを選択できるページとそうではないページで異なります。レイアウト選択が可能なページでは、screen.css を参照する link 要素と、選択したレイアウト CSS ファイルを参照する link 要素を表示する switch-style.js となります。

<link type="text/css" rel="stylesheet" media="screen" href="/common/styles/screen.css" />
<script type="text/javascript" src="/common/js/layout-switch/switch-style.js"></script>

レイアウト選択のできないページは single-column (1カラム) に統一しているので、screen.css を参照する link 要素と、single-column.css を参照する link 要素となります。

<link type="text/css" rel="stylesheet" media="screen" href="/common/styles/screen.css" />
<link type="text/css" rel="stylesheet" media="screen" href="/common/styles/layouts/single-column.css" />

CSS ファイルの管理は、前回にまとめた案から大きな変更もなく、レイアウト用の CSS に少し手を加えた以外はテーマ CSS ファイルの作成に集中することができました。気が向いた時にまたデザインを作ったりするのも、一つのテーマディレクトリの管理で済むので簡単です。

もちろん課題もありました。テーマ CSS ファイルを screen.css で import すべきか、link 要素で読み込むべきかと悩み、レイアウトは増えたとしても大きな変更は無さそうなのと、screen.css の一行を変更するだけでテーマの変更が行えることを考え screen.css で読み込むことにしました。

ちゃんと CSS するためのスタイルガイド入門宣伝ぽくてもうしわけございませんが、本日長谷川恭久さん、有坂陽子さんと共著させていただいた、『スタイルシートスタイルブック2・ちゃんと CSS するためのスタイルガイド入門』が発売となります。CSS 作成のガイドラインや、CSS の分割管理にも触れていますので、書店などでみつけたらぜひチェックしてみてください。