CSSコーディング規約

コーディングルール

冒頭で概要を説明する

スタイルシートの1行目には、charsetを必ず記述する。
CSSハックを使用している場合、冒頭部分で使用しているハックを説明する。
同じ要素でいくつかのデザインパターンを持ち、そららをclassで使い分ける場合など、説明が必要な場合は説明を加える。

セレクタセットルール

セレクタには下記ルールを適用する。

1. セレクタ名の後には、半角スペース1文字分空け、{を書く
2. プロパティ名は、半角スペース2文字分インデントする
3. プロパティ名の後には、スペースを空けずにコロンを書き、半角スペース1文字分空けて値を書き、最後はセミコロンで閉じる
4. プロパティは1行につき1つしか書かない
5. セレクタを閉じる}は、最後のプロパティの1行下に書き、インデントせずにセレクタ開始位置と揃える
6. セレクタの閉じブロックと次のセレクタの開始の間には、空行を1行入れる
7. カラーコードには大文字を使わない
8. セレクタを一行で書き、上下のセレクタと比べて見たい場合には、セレクタを1 行で書いてもかまわない。
   その場合、開始{の後、閉じ}の前に半角スペースを1文字分入れる。上下に空行を入れる必要はない

（例）

selector {
property: value;
property: value;
property: value;
}

selector { property: value; property: value; }

セレクタのまとめ方

セレクタは使用するページやブロック毎になるべくまとめる。
ページやブロック毎にコメントをつけるのが望ましい。

id,class名のネーミングルール

id,classの名前は、色や形を表すものや、本人しかわからないような暗号ではなく、意味や機能を表す名前を付けることを心がける。複数単語からなる場合、各単語の先頭文字のみ大文字にしてつなげる（例）ThisIsAnExample
leftやbottomなど、補助的に付けないと意味がわからなくなる場合もあるので、適宜判断して命名する。
前述のネーミングルールが適用できない場合は、見た目や暗号での命名をする。
スタイルを使いまわさない場合は、むやみにid,classを増やさないように、なるべく親要素にふっていき、親要素を使って定義する。

ハックについて

対象ブラウザでの表示を等しくするため、CSSハックを用いることを認める。
使用する場合は、冒頭にコメントアウトして使用するハックを記述する。

プロパティの順序について

プロパティを書く順番は、以下の順序をなるべく意識する。

• 自動番号及びリスト
• ビジュアルフォーマット
• ビジュアルエフェクト
• ボックス
• 表
• バックグラウンド
• カラー
• フォント
• テキスト

プロパティリスト

自動番号及びリスト

• list-style
• list-style-type
• list-style-image
• list-style-position

ビジュアルフォーマット

• display
• position
• top
• right
• bottom
• left
• z-index
• float
• clear
• width
• min-width
• max-width
• height
• min-height
• max-height
• line-height
• vertical-align

ビジュアルエフェクト

• overflow
• clip
• visibility
• zoom

ボックス

• margin
• margin-top
• margin-right
• margin-bottom
• margin-left
• padding
• padding-top
• padding-right
• padding-bottom
• padding-left
• border
• border-width
• border-color
• border-style
• border-top
• border-right
• border-bottom
• border-left
• border-top-width
• border-right-width
• border-bottom-width
• border-left-width
• border-top-color
• border-right-color
• border-bottom-color
• border-left-color
• border-top-style
• border-right-style
• border-bottom-style
• border-left-style

表

• caption-side
• table-layout
• border-collapse
• border-spacing
• empty-cells

バックグラウンド

• background
• background-color
• background-image
• background-repeat
• background-attachment
• background-position

カラー

• color

フォント

• font
• font-family
• font-style
• font-variant
• font-weight
• font-size

テキスト

• text-indent
• text-align
• text-decoration
• letter-spacing
• word-spacing
• text-transform
• white-space

サービス一覧 お問い合わせはこちら