分割CSSファイルの構成とそのルール

ひとつのスキンは、機能・役割ごとに独立したCSSファイルが複数組み合わさって構成されています。各CSSファイルがどのような役割をもち、スキンの一部として組み込まれているかを理解することで、既存スキンの編集が簡単になります。

ここでは、Vicunaで配布しているスキンについて、

• 全体の構成
• コアファイルの役割
• 記述ルール
• 分割方法の特徴

に分けて解説します。

全体の構成

次の図は、各ページが読み込むCSSファイルを示したものです。Vicunaで配布している純正のスキンは、すべて以下のような構成になっています。

ページに直接読み込まれる 0-import.css は、その下の5つのファイル

• 1-element.css
• 2-class.css
• 3-context.css
• 4-layout.css
• 5-module.css

を読み込みます。スキンのデザインのほとんどは、このうち 5-module.css を抜かした4つのCSSファイルに記述してあります。

必要なときに読み込むCSSモジュール

さきほどの図のうち、MODULE グループの中にあるCSSファイルは、デフォルトでは読み込まれていないCSSファイルです。これらは、カレンダーやグローバルナビゲーション、マルチカラム化、アイキャッチ画像などを表示する際に、5-module.cssから任意でインポートされるCSSファイルです。

例えば、カレンダーとグローバルナビゲーションをブログに表示したいときには、XHTMLの記述後、MODULEの中からそれらに対して書かれたCSSファイルだけを 5-module.css から読み込みます。5-module.css は各Moduleを読み込むためのHUBの役割を持っています。

このようにモジュールを分割することで、ある人にとって不必要となる記述を読み込ませることなく、スキンを拡張していくことができるようになっています。もちろん、これらのCSSモジュールを利用するかどうかは自由なので、すべて必要ないと考えた場合は 5-module.css もあわせて削除できます。

コアファイルの役割

全体の構成と、必要なときに読み込めるModuleについて解説しました。ここでは、スキンのデザインのすべてを決定している核となるCSSファイルを解説します。

スキンを構成するCSSファイルは細かく分割されているので、一見とても複雑なように見えるかもしれませんが、スキンのデザインは次の4つのコアCSSファイルからなっています。

各CSSファイルは役割によって独立しています。

重要なのは、0-import.css からどのような順番で読み込まれるかで、4つのCSSファイルはファイル名の先頭についた数字の順番で読み込まれます。この順序は各CSSファイルが全体を構成するときのカスケーディングの流れを示しており、広域的から局所的となるようになっています。

1-elements.css

まず最初に読み込まれるのが 1-element.css です。

1-element.css には、HTML文書の最小単位ともいえる要素(タグ)のスタイルが記述されています。このファイルの記述を変更した場合、編集したプロパティが後に読み込まれるファイルで上書きされる場合を除いて、デザイン全域に影響します。

デザイン全域の標準的な文字の色や大きさ、余白を変更したい場合はこのファイルを編集してください。

2-class.css

次に、文書中、特定の役割を持った要素に対するスタイルをまとめた 2-class.cssが読み込まれます。

これらのclassは文脈に依存しないもので、文脈によって変化するものは次に解説する 3-context.css に記述してあります。

ただ、可読性を考慮して、単体のclassでも 3-context.css に記述していることがあります。ここらへんをより厳密に分けるかどうかは検討中です。

3-context.css

3-context.css には、これまでに定義した要素やclassが、文脈によって変化するものをまとめてあります。 文脈とは、「ある要素の中に出現したとき」のことを指します。

デザインを上から辿って記述してあるので、比較的編集しやすいCSSファイルになります。

特定の文脈でのみ出現する class も混ざっています。

4-layout.css

レイアウトに関するスタイルがまとめられています。レイアウトとは主に

• 全体の幅
• カラム

に関する指定です。全体の幅やカラムの位置を変更する場合に編集します。

また、Vicunaではbodyのclassによってレイアウトが変わる作りになっていますので、

• body class="single" のときに適用されるスタイル
• body class="double" のときに適用されるスタイル

と、bodyに付加されるclassの分岐(カラム数)で変化するスタイルが分けて記述されています。

スキンによってはこれが多少複雑になっており、例えばbazookaやfutureといったスキンでは、シングルカラム時とダブルカラム時でサイドバーの装飾が大きく変わるため、body.singleとbody.doubleの記述がそれぞれ長くなっています。どちらのときも共通するものは 3-context.cssの div#utilitiesを引き継ぎます。

以下にその例を簡単に紹介します。

スタイルが分岐するサンプル

次の3-context.cssの記述により、div#utilities内のdl.naviの背景は灰色になる。

[3-context.css div#utilities]

div#utilities dl.navi {
	background-color: #eee;
}

次の4-layout.cssの記述により、body class="single"とbody class="double"でスタイルは分岐する。

[4-layout.css]

body.single div#utilities dl.navi {
	margin: 1em 20px;
}

～～～～～

body.double div#utilities dl.navi {
	margin: 0 10px;
	width: 20em;
	float: left;
}

3-context.cssの記述から、div#utilities内のdl.naviの背景色は灰色に指定されます。その後、4-layout.cssで、bodyのクラスによってdiv#utilities内のdl.naviはそれぞれ変化します。

スキン構成の特徴とまとめ

既存スキンを編集するにあたり理解してほしい特徴を、これまでに解説したものをふまえて以下にまとめます。

後に読み込まれるものほど優先度が高い

前章では、コアファイルとなる4つのCSSファイルは、最小単位となる1-element.cssから、class(分類)、context(文脈)、layout(配置)の順に読み込むことを解説しました。このように記述を分割することで、スタイルの優先度は後にいくほど自然と高くなります。(読み込み順序+セレクタの詳細度により)

各CSSファイルを編集するときは、上図のような優先度と、影響範囲をぼんやりとでも覚えておいてください。

カスケーディングのタイミング

CSSでは、あるセレクタへの指定が複数記述されているとき、優先度の高い一方を有効にすることをカスケーディングと呼びます。次の記述をみてください。

p {color: red;}
p {color: blue;}

上記の記述では、同じセレクタである p に対して最初に文字色をred, 後に blue に指定しています。こように同じセレクタに対して同じプロパティを指定した場合は、後に記述されたものが有効になり、pは青色で表示されます。では次の記述はどうでしょう。

body p {color: red;}
p {color: blue;}

上記の場合、記述順序に関係なく、より詳細度の高い div#main pの指定が有効になり、pは赤色で表示されます。ただ、このように、先に書かれた記述が後の記述をカスケーディングすることは好ましくありません。

CSSはカスケーディング・スタイル・シートという名前のとおり、セレクタへの指定をカスケーディングしてデザインパターンを定義するスタイルシート言語ですので、記述順序の中にカスケーディングの段階的な流れを作らないと、可読性が落ちるばかりか、無駄な指定が増え、メンテナンス性も落としてしまいます。

Vicunaのスキンでは、個々のCSSファイルのなかで、同じ要素を極力カスケーディングしないようにしています。カスケーディングは次のように、後に読み込まれるCSSファイルがそれ以前に読み込まれたCSSファイルの指定に対して行います。

先に読み込まれるものが後に読み込まれる指定をカスケーディングすることはありません。これは分割方法からして自然な流れになります。新たに宣言を追加した場合に、その先の指定をカスケーディングしてしまうようならば、記述場所を考え直してください。おそらく間違った場所に書いているはずです。

編集時の考え方

CSSの記述は、ビジュアルデザインのパターン・ルールを言語化したものです。もし何かしら新たなデザインを追加したいと考えたとき、新たに追加するデザインのパターン・ルールを考え、スキンのパターン・ルールの中に組み込むことになります。

たとえば、ul要素の余白を調整したいとします。まず、どのような条件下でul要素の余白を調整したいのかを考えてください。サイト全域のul要素の余白を調整したいならば、1-element.cssのulの定義を編集します。

そうではなく、サイドバー内に出現するul要素だけを変えたいというのであれば、文脈で変わるスタイル div#utilities ul となるので、3-context.cssでの調整になります。

2カラム時のサイドバー内のul要素ならば、 4-layout.cssで body.double #utilities ul となります。

このように、デザインのルールがどの領域で有効になるのかを考えれることで、記述する場所も決まり、分割されたCSSのパターン・ルールの中に綺麗に組み込むことができます。

これまで解説してきた通り、VicunaのスキンのCSSは複数に分割され、ファイル数も多くなっています。正直、このような構成のCSSファイルを編集することに慣れている人は少ないと思いますが、Vicunaの純正スキンはすべて同じ構成なので、1つのスキンの編集にさえ慣れてしまえば、他のスキンの編集も容易だと思います。 Vicunaでは、ローカルでスキンを編集するためのファイルも用意していますので、解説した内容を踏まえていろいろ試してみてください。

• ローカルで編集・調整する方法