スタイルシートを分けて管理する方法をまとめる

スタイルシートを分ける理由

スタイルシートを分けて管理する理由というのは、人それぞれだと思いますが、ほとんどの方があてはまるのが管理効率の向上ではないでしょうか。例えば、フォントの指定に関する CSS ファイルの場合、ファイルを別にしておくと後でフォントの指定を変更したい場合、長い CSS ファイルからどこに対象のセレクタがあるのか、ぐりぐりスクロールして探したりしなくても、フォントの指定のみを行っている CSS ファイルを編集すれば良いわけです。また、リニューアルなどに伴い、大きくフォントの指定を変更したい場合は、いくつか指定パターンの違うフォント用 CSS ファイルを用意しておけば、そのファイルを入れ替えるだけで変更することができます。

それだけではなく、作成したいウェブサイトの仕様にあわせて分けたスタイルシートを選択し、合体ロボットのように組み合わせれば、ウェブサイト構築のほとんどの作業ステップをスキップできるということも実現できますね。つまり、自分用スタイルシートライブラリを作成するような感じでしょうか。組み合わせ方法によっては、様々な用途に向けたスタイルシートファイルの作成が可能になりますね。

実際にスタイルシートを分けてみる

リニューアル中の 2xup を例に、スタイルシートをどのように分けているか実際にまとめてみます。ディレクトリ構造なども明示しておきますが、実際には変更になるかもしれません。

• common/
  • css/
    • themes/
      • elephant/
        • theme-elephant.css
        • images/
    • common.css
    • modules.css
    • fonts.css
    • layouts/
      • one-column.css
      • two-column-right.css
      • two-column-left.css
      • three-column.css
      • three-column-right.css
      • three-column-left.css
    • alternate/
      • print.css
      • mobile.css
      • no-style.css
      • outline.css
      • zoom.css

各々のディレクトリ、CSS ファイルの概要を説明します。

themes ディレクトリ

テーマごとディレクトリに含まれるデザインに関するスタイルシートや、そのテーマで利用される画像を格納するディレクトリを含むディレクトリ。基本的にデザインのリニューアルはこのディレクトリ内のみで完了する。

common.css

ブラウザによって微妙な違いのある、各要素のデフォルトスタイルの差異を無くすとともに、再定義する CSS ファイル。僕自身が CSS でデザインを初めて以来、足したり引いたりしており現在に至。通称ぬかみそ

modules.css

よく使うスタイル定義を class にまとめてモジュール化しているのですが、そのモジュール化されたものをまとめた CSS ファイル。画像の回り込みや、要素の回り込み解除、リストをタブ化するなどいろいろまとめています。class 属性の値は半角スペースで区切って複数指定できるので、こうしておくと便利 (もちろん、やたらめったら class をつけないように注意をしています)

fonts.css

全体的なフォントサイズ、特定の要素のフォントファミリの指定を行っている CSS ファイル。今回のリニューアルより Yahoo! UI Library の Fonts CSS を元にフォントサイズの指定を行う予定。

layouts ディレクトリ

今回のリニューアルのポイントの一つである、同じ HTML で複数のレイアウトに対応し将来的にはユーザーによる選択も可能というのを実現する為に用意したレイアウト専門の CSS ファイルを格納するディレクトリ。moblog も同じ構造なので、moblog 用のレイアウトなどもこちらに格納する。

alternate ディレクトリ

印刷用、モバイル用、Zoom Layout 用など、目的別 CSS ファイルを格納するディレクトリ。デヴェロッパー向けに、ブロック要素に枠をつけたり、スタイルシートを適用していないように見せる CSS ファイルも用意してみました。

けっこう多く見えますが、実際にサイトを構成する際に選択する CSS ファイルは、最低5個で可能なので、問題ナッスウィング? しかも個人サイトの利用なのに、こんなに管理面を重視せんでも！という声も聞こえてきそうですが、こうして効率化を計るのもスタイルシートを理解する良い勉強になるはずだ！と自分を催眠にかけてやってみます。

HTML にどのように読み込むか

うまく CSS ファイルを分けることができても、それをどう HTML に反映させるか。うまく読み込ませないとリニューアル時に設定した目的 (こちらはリニューアル後にでも詳細を) が達成できない可能性だってあります。今回の場合は以下のようにしました。

<link type="text/css" rel="stylesheet" media="screen" href="/common/css/default.css" />
<link type="text/css" rel="stylesheet" media="screen" href="/common/css/layouts/two-column-right.css" />
<link type="text/css" rel="stylesheet" media="print" href="/common/css/alternate/print.css" title="Print Stylesheet" />
<link type="text/css" rel="stylesheet" media="tty,handheld" href="/common/css/alternate/mobile.css" title="mobile Stylesheet" />
<link type="text/css" rel="alternate stylesheet" rev="zoom" media="screen" href="/common/css/alternate/zoom.css" title="Zoom Layout" />

default.css には、common.css, module.css, fonts.css そして、theme/theme-xxx.css を読み込ませています。内容は以下のような感じ。

@charset "utf-8";

@import url("common.css"); /* common stylesheet */
@import url("modules.css"); /* modules stylesheet */
@import url("fonts.css"); /* font stylesheet */

/* theme stylesheeet */
@import url("theme/elephant/theme-elephant.css");

default.css で読み込む順序は、カスケードを意識したものに。テーマを変更する際は、theme ディレクトリとスタイルシートを変更すればよいわけです。また、今回は同じ HTML で複数のレイアウトに対応させたいという目的があるので、ページによってレイアウトを変更する可能性を考え、レイアウト用 CSS ファイルは default.css で読み込まず、別に link 要素を用いて読み込ませています。zoom layout や、alternate/ なスタイルシートファイルが不要の場合は、HTML はもうすこしシンプルにできますね。

<link type="text/css" rel="stylesheet" media="screen" href="/common/css/default.css" />
<link type="text/css" rel="stylesheet" media="screen" href="/common/css/layouts/two-column-right.css" />

Related Archives

• pre 要素のスタイル定義とマークアップ
• スタイルシートを書く時のガイドライン
• CSS Nite vol.9 にお越しいただきありがとうございました
• CSS NAKED day
• Web デザイナー 2.0 短期集中養成講座

Comments

1. Name: shogodate: 2006年10月18日 12:09

はじめまして！
ボクも以前より一つのHTMLをもとに、ユーザが複数のレイアウトCSSを選んで切り替えられるサイトをつくりたいと思っていました！
今後のリニューアルがとても楽しみです。がんばってください！！

2. Name: kaminogoyadate: 2006年10月18日 16:19

> shogo さん
ありがとうございます。公開の暁には、ぜひフィードバックをおよせください！
意見を出し合って、良いものができると良いですね！

3. Name: Phizedate: 2006年10月18日 19:51

はじめまして、いつも拝見しています。今回のエントリーはピンポイントでした。
専用のブログを持っていないものでmixi内の日記になってしまうのが大変申し訳ないのですが、
私も下の様な感じで、自分なりのコーディングガイドライン・フレームワークをまとめています。
(少し前にまとめたものなので、現在は変わっている部分があります。)

http://mixi.jp/view_diary.pl?id=246710187&owner_id=3273286

比較的、柔軟に使えるようにファイル構成を考えたのですが、これだとファイル数が多くなってしまうのが少し難点です。でも、モジュール・フレームワーク化しておくと再利用が便利ですね。
最近は、便利だけど無駄な規則集合が増えてしまうので、最終的に必要な箇所を抜き出して再構成してしまうのが良いかな、と思ってます。

非常に興味深い話題なので、他の方のフィードバックも楽しみにしています。

4. Name: kaminogoyadate: 2006年10月18日 23:36

> Phize さん

Phize さんのガイドラインを紹介いただき、ありがとうございます。
とても細かいところまでまとめてらっしゃって、ステキですね！
私もファイルの数はやはりずっと課題となりそうです。修正項目へのアクセススピードを上げるには、やはりファイルの分割をどうやるかが大きなポイントになると思うのですが、それを意識しすぎてファイル数が多くなってしまう事を気にしています。

ぜひ、mixi という参加ユーザーしかみれない場所ではなく、ご自身のポートフォリオなどで共有してみるのも良いかもしれませんね。

5. Name: kennsudate: 2006年10月19日 01:52

はじめまして、いつも楽しく拝見させていただいています。

僕もCSSは複数にわけて管理するべきだと考えています。

僕は複数人作業で同時にCSSを触る方法を以前より模索しておりました。
（http://stopnlisten.no.land.to/2006/08/css_2.html）
しかし、複数人での効率的な作業、未だ答えには至っていません。
kaminogoya様の分けっぷり、お見事ですね。参考にさせていただきます。

ところで、こちらのサイトリニューアルされるんですね！
今のデザインも好きなのでちょっと残念ではありますが・・・
でも新しいデザインでまた楽しくさせて頂きます！

6. Name: Ericdate: 2006年10月19日 05:30

couldn't agree more

7. Name: kaminogoyadate: 2006年10月19日 14:32

> kennsu さん
ありがとうございます！
kennsu さんのコーディングに関する考えも拝見しました。個人サイトではなかなか複数人での管理を実践できませんが、普段から意識していると良いですね。
デザイン気に入ってくださってありがとうございます。僕も今のデザインは嫌いでないので、すこし残してみたいとかんがえています。
ぜひ、参考にしてくださった結果、どのような答えに至ったか、教えてくださいね！

8. Name: kaminogoyadate: 2006年10月19日 14:44

> Eric
Thanks!
I felt confidence further because I obtained your agreement!
I expect feedback from you.

thanks again.

9. Name: スタイルシート外部ファイル化date: 2006年10月20日 21:14

フォームの色が変わってすばらしいです！

なかなか普通の本には載っていない
ディープ名内容です＾＾

勉強させていただきます☆

TrackBacks

TracBack URL: