リニューアル後のCSSファイル構成

CSSファイル分割方法を一新する理由

今までのテンプレートでは、CSSファイルの管理方法がアバウトだったため、カスタマイズの際にどこに手を付ければ良いのか？が非常に分かりにくいものになっていました。

どうじに、制作効率も落ちてしまうような構造になっていました＾＾；

この状態を改善するために、CSSファイルの分割方法を見直し、制作効率のアップとカスタマイズの容易性を高めることに成功しました。

各CSSファイルの構成と解説

基本的なCSSファイルの構成

1. import.css
2. common.css
3. colors.css
4. base.css
5. class.css
6. ie
   1. ie6.css
   2. ie.css

基本的には、全テンプレートで上記のようなCSSファイル構成になっており、リストアップした順番に読み込まれていきます。

各ファイルの役割解説

import.css

一番さいしょに読みこまれ、以下につづく全てのCSSファイルの読み込みを行います。それ以外の役割はありませんので、新たに読み込ませたいCSSファイルが増えた場合いがいでは、編集の必要はありません。

common.css

ブラウザ間での初期状態の差異をリセットし、最低限の再定義を行います。状況によって内容に違いがありますが、基本的に編集の必要はありません。

colors.css

テンプレートの配色を管理するもので、デザインのベースとなる配色は全てここでコントロールされています。サイト内で使われる配色ごとに部類して記述されています。基本的な配色の変更をおこなう場合に、このファイルを編集します。

base.css

colors.cssで指定された配色を元に、実際にレイアウトを組んでいきます。例えば、サイトの横幅や表示位置・背景画像の指定などです。見た目のカスタマイズを行うばあいに、もっとも多く手をいれるファイルになります。

class.css

画像の左右寄せやテキストの装飾など、特定の役割をもったクラス(class)の集合体です。何かしらの役割を持ったclassを追加する場合には、このファイルを編集します。

ie

1. ie6.css
   • インターネットエクスプローラー６（ie6）のみに適応されるスタイルです。主にie6のバグ回避などになります。
2. ie.css
   • 全てのバージョンのインターネットエクスプローラーに適応されるスタイルです。じっしつ、ie6未満は切り捨てで作成していますので、ie6とie7の共通バグ回避などがメインです。