3_CSSガイドライン


基本


CSSのバージョン
CSS2（CSS level 2）を採用する。

エラーチェックの実施
CSSはW3C CSS Validation Service（http://jigsaw.w3.org/css-validator/）で必ずエラーチェックする。なお、チェック結果について、「エラー」は必ず修正しなければならないが、「警告」は無視してよい。

CSSオフ時でも情報が伝わるページに
CSSをオフにした状態でも情報がきちんと伝わるページにする。Firefoxでは「ツールバー」→「スタイルシート」→「スタイルシートを使用しない」を選択することでCSSをオフにできるので、この状態で情報の出現順序や流れなどをチェックする。

style属性（インラインスタイル）は使用せず、必ず外部CSSに指定する。
style要素は使用せず、必ず外部CSSに指定する。


書式

インデント（字下げ）はTab キーで行う
プロパティごとに改行し、インデントして記述する
適度に改行（Rtn キー［Enter キー］）を入れて見やすくする
1行目には必ず@charsetの記述をする。XHTMLで指定した文字コードに合わせ、基本UTF-8とする。XHTMLの文字コードがUTF-8以外の場合は、その文字コードに合わせる。
コメントには基本的に日本語は使用しないようにする。
適用対象ごとに適切にコメントで区切り、他の部分と区別しやすくする。コメントの記述の注意点として、「/*」のあと、「*/」の前に必ず半角スペースを入れる。（Win IEでの不具合回避の為）
各セレクタの間は必ず1行空け、区切りのコメント前は2行空けるようにする。
値が「0」の場合は、「px」や「%」などの単位はつけない。
原則としてプロパティの順序はアルファベット順とする。


デフォルトの記述
CSSファイルの冒頭には、そのCSSのファイル名、作成日、更新日、更新者などが分かるようにコメントを記述する。またその続きとして、そのファイルの内容が分かる目次をコメントとして記述すること。その際に各目次行頭は#つきで記述する。

ショートハンドプロパティ
margin、border、padding、backgroundプロパティはショートハンドで記述するのが望ましい。fontプロパティはショートハンドで記述しない。


色関連プロパティ
background-color、colorなどの色関連プロパティの値は16進数の小文字表記にする。

font-sizeプロパティ
フォントサイズ指定は、次のルールに基づいて指定する。
単位は%を使用する
基本サイズは75%(12px相当)とする

line-heightプロパティ
行高の指定は、値に単位をつけず、小数点以下まで記述する。


セレクタ


id/classはなるべく使わず、子孫セレクタを使う
以下のようにセレクタの影響範囲が広すぎる使用の仕方はしない。
以下の例ではdiv#content以下の全てのdivに対してスタイルが影響してしまう。適宜、id/classを指定して対処すること。

子孫セレクタは各部位からはじめる
たとえば「div#header」「div#gNav」「div#content」「div#sidebar」「div#footer」などから子孫セレクタをはじめる。
子孫セレクタで示すツリー構造は、不必要な表現を省く。

原則classを使用、一意に特定できるときはidを使用
「XHTMLガイドライン　基本」を参照。


id/classには意味的な名前を
id/classには意味的な名前をつける。たとえば「red」などの視覚的な名前をつけない。
詳しくは「命名規則」を参照。


id/classには要素タイプをつける


id/class名の区切り記号
id/class名に単語の区切りが有る場合、「shopList」や「searchBox」のように後ろの単語を大文字ではじめる。






ハック


ハックは基本的には使用しないよう努力する。止むを得ない場合に限り、以下のハックの使用を推奨する。


Windows版IE6への対応

Windows版IE6のみを対象とするハックは、「* html」という記法を利用する。



Windows版IE 7への対応

Windows版IE 7のみを適用対象とするハックは、「*:first-child+html」という記法を利用する。








