« コード共有のためのネーミングルール | トップページ | 「大化改新 ー隠された真相」の印象操作 »

2007-01-31

配色管理用の CSS をモジュール化する

今日は再現性の高いスタイル(プロパティの集合)ごとに、CSS セレクタをグループ化して管理する事例として、ちょっと前から制作中のサイトで実践している、配色管理の方法を紹介してみようと思います。(とっくに似たようなことを実践されている方も、きっといらっしゃると思います。お気づきの点があれば、細かいことでもご教示・ご指摘いただけましたら幸いです。)

(なんだか、CSS が主題のエントリーって、随分、久しぶりのような気がする..。)

配色管理モジュールの作成方法

  1. 色に関するスタイルをすべて、この配色管理モジュールに集約する。
  2. 別出した color.css は、@import で上位 CSS ファイル(もしくは HTML ファイル)から読み込ませるようにする。
  3. セレクタは、同一スタイルごとにグループ化する。(注意: CSS セレクタ、グループ化の落とし穴
  4. セレクタは、浅い階層の一般的なものを先に、深い階層の特殊なものを後に、一意なものを最後に記述する。(上書き予防)
  5. 階層の深さがすぐに把握できるように、セレクタは冗長に表記する。
  6. IE 6- 用のスタイルを別途定義しない場合は、子セレクタ・隣接セレクタ・属性セレクタなどは使わず、子孫セレクタで構造を記述する。

ブランディングのためのスタイルガイド、もしくは Color glossary などと考え方が若干似ていますが、要は色に関する設定だけをモジュール化して、独自の CSS ファイルに別出します。

配色管理モジュールのサンプル

論理構造も色も適当なデッチ上げですみませんが、サクっとサンプルを用意してみると、大体こんな感じです。

配色管理モジュール(color.css)のサンプル
/* 配色管理モジュール - Color management module
======================================
- スタイルガイド文書: [url]
- CSS は後ろに記述されているものほど、適用優先順位が高くなるため、必ず浅い階層の一般的なものを先に、深い階層の特殊なものを後に、一意なものを最後に記述すること。
====================================== */
/* 背景色: #FDFDEB(淡い乳白色)*/
body {
 background: #FDFDEB;
}
/* 背景色: #7EBE5D(パステルグリーン)*/
div.header div.hot-entries,
div.header div.hot-entries h2 {
 background: #7EBE5D;
 color: #fff;
}
/* 文字色: #45392A(濃い茶色)*/
div.contents div.entry .body h3,
div.contents div.entry .body h3 a {
 color: #45392A;
}
/* リンクテキスト: #AC0605(濃い赤)*/
div.contents div.entry div.body h3 a:hover,
div.contents div.entry div.body h3 a:focus,
div.contents div.entry div.body h3 a:active {
 color: #AC0605;
}
上位 CSS(screen.css)に配色管理モジュールをインポート
@import url("color.css") screen;

この管理法の方が配色を変える時に、目的の行を探す手間が激減しますし、カテゴリーや季節ごとに配色を変える場合でも、統一感を保ったまま、容易に配色を変更できるようになります。初めてソースを覗く人にも優しいコーディングは、大規模サイトの開発やメンテナンスであっても、少なからずいい影響を与えるはず、と思ってはじめた手法です。(ただし、このブログでは、この手法は使ってません。というか、ココログでは HTML の head や body の基本構造がカスタマイズできないようになっているので、このブログでは HTML や CSS の設計は放棄してます。(- -;ゞ)

デザインはセマンティクスに依存する?

色彩デザインの心得がある人ならすでに察しがついていることと思いますが、心得のない方(僕もどちらかというと、こちら側の人間ですが)でも実際に幾つかの事例をこなしてみると、次第に色とセマンティクスの間に相関関係があることや、上記のような色彩管理法のメリットが分かってくるのではないかと思います。たとえば、閲覧者を優先的に誘導したいコンテンツほど、背景色を濃くしてたり、文字色とのコントラストを強くしてたり..とか。カラースキームなんかも、"論理的に" 色やその組み合わせを絞り込んでいくためのものですよね。

意外にあまり語られないことですが、(Louis Henry SullivanForm follows function(形態は機能に従う)ではありませんが)本来、見栄え(≒デザイン)は文書の構造(≒セマンティクス)に依存すると僕は思ってます。たとえば色の濃淡や、ボックスの大小、文字の太さなどは、しばしば、そのコンテンツの "重要度" というセマンティクスと密接に関係しています。仮にもし、この捉え方が間違っていないとすれば、(X)HTML 側だけでなく、見栄えを定める CSS の方も、本来、親文書(HTML)の構造セマンティクスを基にして、整理していった方が管理しやすいのではないでしょうか?

実際は、この表裏逆...文書構造(セマンティクス)が見栄え(デザイン)に依存してしまっている事例の方が、比較にならないほど圧倒的多数となっているのが現状なのはご承知の通り。

関連エントリー

|

« コード共有のためのネーミングルール | トップページ | 「大化改新 ー隠された真相」の印象操作 »

[Web]XHTML」カテゴリの記事

コメント

デッドリーさん、コメント、ありがとうございます。

CSS を管理するためのモジュール化モデルは、まだまだ発展途上段階にありますし、Web 制作工程上の重要な問題のひとつとして、今後、ますます注目されてくるのではないかと思います。

> こういう記事は本当に参考になります。

ありがとうございます。なんだか、少し気恥ずかしいですけど。(^ ^*;ゞ

ちなみに、この分野のリソースなら、2xup の 「CSS 分割管理の実践編」 や、境祐司さんの『Making a Rule for Web Design』 あたりが現時点ではポピュラーです。

ただ、僕は僕で、上之郷谷さんや境さんとはまた違ったモジュール化のモデルになってますし、おそらく他にもコミットされてないだけで、また違った管理ノウハウを持っているクリエイターの方がいらっしゃると思います。ただ、どのモデルも、CSS のカスケーディングや継承の理解、依存関係の把握、論理ベースのスタイル管理あたりがキモになっていると思いますし、そのあたりは動かないかと。

僕自身もまだまだ試行錯誤の段階なので、上之郷谷さんや境さんに止まらず、もっと色んな方々のモデルを拝見して、積極的に良いところを吸収していきたいと思ってます。皆でお互いに刺激しあって、少しずつ前進できるといいですね。(^-^ )

投稿: ゆう@管理人 | 2007-02-25 23:18

CSSをHTMLから切り離すっていう考えはありましたが、@importを使ったり、ましてやcolor.cssを使ったりするという考えはありませんでしたw。

こういう記事は本当に参考になります。

投稿: デッドリー | 2007-02-25 22:35

こちらこそ、いつも興味深く、ブログを拝見(というか、むしろ勉強)させていただいてます。(^ ^;ゞ

background-image に関しては、状況に応じて対応を変えていますが、少なくとも、配色管理用モジュールとは切り分けています。

  • 基本構造(ボックス管理用)モジュール(screen.css もしくは box.css)
  • インライン要素モジュール(inline.css)
  • 見出し管理用モジュール(hn.css もしくは subjects.css)
    (僕自身はあまり見出しに画像は使わないほうですけど)
概ね、この3つのモジュールに分割して管理してます。「状況に応じて」というのは、要するに依存関係次第で、大体、以下のような基準で、帰属先を決めてます。
  • 背景画像の数の多寡(数が多い場合は見出し管理用モジュールのように独自に別出します。)
  • 各モジュールの再利用性の程度(再利用性が高い場合は、モジュール単体でなるべく用が足りるようにして、依存関係を作らない。)
僕もよく悩むところなので、果たして参考に値するか今ひとつ自信はありませんけど、最近は大体こんな調子で管理してます。

投稿: ゆう@管理人 | 2007-02-02 14:10

いつも拝見させていただいております。

僕もこういうCSSを組んだことがあるのですが、どうもbackground-imageの扱いに困ったことがあります。実質colorやbackground-colorと同じ扱いなのですが、かといってこのCSSファイルに入れ込むのも変だしなーと。

どう対応していらっしゃいますか?

投稿: TRANS | 2007-02-02 12:52

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/15394/5147342

この記事へのトラックバック一覧です: 配色管理用の CSS をモジュール化する:

« コード共有のためのネーミングルール | トップページ | 「大化改新 ー隠された真相」の印象操作 »