ProgrammingHTML/CSSスタイルガイド
スタイルガイド

CSSガイドライン

CSS設計の基本

明瞭性、再利用性、保守性を意識したCSS設計を行ってください。

明瞭性
読みやすく、理解しやすい記述、構成を心がけます。
再利用性
既存のパーツから新しいコンポーネントを簡単に作成できるように心がけます。
保守性
新しいコンポーネントや機能の追加・更新が簡単に行える設計になっているように心がけます。

CSSバリデーション

設計後はCSSが適切に記述されているか必ずバリデーションチェックをしましょう。

基本書式

セレクタセットは要素セレクタを省略した以下の書式が基本です。

.クラスセレクタ {
	プロパティ: 値;
}
サンプル
#main {
	width: 500px; height: 800px;
	line-height: 1.5;
}
  • セレクタ名の後はスペースなどの空白文字を挟まずにブレース（ { ）を続ける。
  • 各プロパティはタブでインデントする。
  • プロパティ名に続けてコロン( : )を入力し、コロン( : )と値の間にスペースを1つ挟む。
  • 各プロパティを改行で区切る。
    ※ marginとpadding、widthとheightのようなセットとして設定することが多いプロパティは並べても良い。
  • 値の後は、必ずセミコロン( ; )で明示的に終了を宣言する。
  • インデントとして、タブ文字を使います。

色の単位

シャープ（ # ）に続けて、RGB値の各値を6桁の16進数（0～f）で指定します。

body {
	color: #000000;
}

フォントの単位

フォントの単位は rem を推奨します。

html { font-size: 62.5%; }
body { font-size: 1.0rem; }
h1 { font-size: 2rem; }

上記では、基準になるフォントサイズを 10px （62.5%）に設定しています。
BODY要素は 10px、H1要素は 20px になります。

ここで、基準になるフォントサイズをパーセントで指定するための方法を紹介します。
ブラウザのデフォルトのフォントサイズは 16px なので、フォントサイズを 10px に設定したい場合は 10÷16=0.625 、つまり FONT-SIZE の値として 62.5% を指定すればよいことになります。

※わざわざ px ではなくパーセントにする理由ですが、px などの絶対値での指定だと一部のブラウザで拡大・縮小が効かなかったり、フォントサイズの変更をブラウザ側で行えないといったことがあったためです。

要素の親子関係

セレクタを定義していく際、1つの要素の中に複数の要素が含まれることがよくあり、それを要素の親子関係と呼びます。例えばDIV要素はブロック要素ですので、その中にさらにDIV要素や、インライン要素のSTRONGやIMGが含まれることがあります。

サンプル
#main{
	width: 500px; height: 800px;
	line-height: 1.5;
}
	#main .box-info{ ... }
		.box-info .box-in{ ... }

要素が親子関係にある場合は、親に続いて子となる要素を定義し、親よりも1段インデントをつけるようにします。

また、子要素を定義する際に親要素の名称を明記しても良いですが、パフォーマンスに影響がないように2階層以上の親は記載しないようにしましょう。たとえば下記のように親の親まで書く必要はありません。

#main .box-info .box-in { ... }

ID/CLASSの命名規則

意味が分かる程度に短いID/CLASS名にする

ID/CLASS名に指定する単語は意味が分かる程度まで短縮しても良いです。
他の人が見てわかりにくい短縮は避けましょう。
ただし、単語1文字のクラス名は予期せぬ重複設定になりやすいので避けてください。

#global-navigation {
...
}
↓
#g-nav {
...
}

小文字表記

セレクタ、プロパティ、値等全て、小文字で表記します。

ID/CLASSの区別

1ページの中で明確に1つしか使わないコンテンツブロックに限り、ID属性を利用します。複数使う場合、使う可能性がある場合はCLASS属性を利用します。

IDやCLASSの名称に使える文字

IDやCLASSの名称に使える文字は、英数字、ハイフン（-）、アンダースコア( _ )に限ります。ハイフンとアンダースコアに関しては、単語の区切りとして使います。
特に理由がなければハイフンを使ってください。

.main-contents{
}

状態を示すクラス名

状態を示すクラス名には is- プレフィックスを付けます。

.is-enable {
	...
}

ID/CLASSの名前リスト

ID/CLASSの名前にはなるべくレイアウトやUI上の意味があるような名前をつけるようにしてください。
また、色を示す red、フォントの太さを示すboldなどの視覚情報はなるべく避けましょう。

レイアウト枠・範囲
コンテナ id/class名
全体コンテナ container / wrapper
ヘッダー header
フッター footer
コンテンツ contents
メインコンテンツ main
区分 division
レイアウト用枠 area / box / unit
内側(入れ子構造) inner
サイドバー sidebar
カラム col
レイアウト layout
グリッド grid
パーツ
グローバルナビ global-nav
ローカルナビ local-nav
ロゴ logo
パンくずナビ topicpath
カテゴリ category
検索 search
メニュー menu
項目 item
リスト list
次へ next
前へ prev
区切り線 sep
エントリー entry
タブ tab
オプション option
ページトップ pagetop
アップロード upload
ボタン btn
バナー bnr
詳細へ more
必須 require
エラー error
モジュール module
情報
キャッチコピー catch
コピーライト copyright
メインビジュアル mv
イントロダクション instruction
案内 guide
概要 outline
要約 summary
リード文 lead
コメント comment
説明 description
話題 topic
ピックアップ pickup
注目情報 spotlight
お知らせ info
ニュース news
更新情報 update
履歴、沿革 history
プロフィール profile
質問 faq
お問い合わせ contact / inquiry
ご注意 attention
警告 alert
日付 date
キャプション caption
図版 fig
注釈 notes
現在位置 current

ノーマライズスタイル/リセットCSS

各ブラウザはH要素やP要素などにデフォルトのCSSスタイルを独自に設定しており、各ブラウザ間で差異があるため表示が統一されません。そのままだとコーディングの負担が高いため、各ブラウザの違いを解消するCSSが様々なサイトで提供されています。このようなブラウザの違いを解消するCSSをリセットCSSと呼んでいます。
ここで推奨するリセットCSSはress.cssと、HTML5 DoctorのリセットCSSです。

ress.cssはスタイルをリセットするというより、要素の特徴を残しつつ、ブラウザ間の差異がなくなるようにします。そのため、ress.cssでは B は太字、リストは黒丸といったスタイルが維持されています。
リストの黒丸などのスタイルもリセットしたい場合は、HTML5 DoctorのリセットCSSを使ってください。

ダウンロードは下記になります。

ルール

限定セレクタ

IDやCLASSを定義する際にセレクタ指定をすると見つけやすくなりますが、反面、パフォーマンスを低下させてます。
どの要素で使っているのかわかりやすくしたい場合、限定セレクタを使う代わりに、要素名をコメントにすると良いでしょう。

/*div*/#examples{ … }
/*ul*/.entry{ … }

ショートハンドプロパティ

borderやmargin等のプロパティはtop/bottom/left/right等に分割して書くことができますが、まとめて定義します。

/* OK */
.box {
	border-top: 0;
	margin: 10px auto;
	font: 100%/1.5 serif;
}

/* NG */
.box {
	border-top-style: none;
	margin-top: 10px;
	margin-left: auto;
	margin-bottom: 10px;
	margin-right: auto;
	font-family: serif;
	font-size: 100%;
	line-height: 1.5;
}

ゼロ以下の小数は接頭の0を省略

ゼロ以下の小数を指定する場合、接頭の0は省略します。

font-size: .6em;

数値ゼロは単位を省略

プロパティの値として0を指定する場合は、単位は省略します。

.box {
	margin: 0;
}

プロパティの順番

一番上になるのが、display、position、floatなどレイアウトに関係するプロパティを含むビュジュアルフォーマット。次に、margin、paddingといった余白の調整、ボックスの幅と高さを指定するwidth、heightという順番になります。

  1. display/position/float類
  2. margin/padding類
  3. width/height類
  4. ボックスモデル類
  5. 背景/前景類
  6. テキスト類
  7. フォント類
  8. その他
div#main{
	margin: 0; padding: 0;
	width: 100px; height: 100px;
	border: 1px solid #000;
	background: url("bg.gif") repeat;
	color: #00ff00;
	text-align: right;
	font-size: 80%; font-weight: bold;
}

※プロパティの順番は可読性を高めるためのもので、コーディング作業に影響するほど厳密に守る必要はありません。

コメントの記入方法

セクション毎に区切り線を入れて見やすくしてください。

/*###############################################
コンテナ領域
###############################################*/
div#container { ... }

上記以下の部位は下記のように宣言の前にコメントでID、もしくはCLASS名を記述します。

/* rss_list */
div.rss_list { ... }

CSSハック

CSSハックは、下記のみ使用可能とします。

Win IE 6以前用ハック
* html セレクタ { ... }
Win IE 7用ハック
*:first?child+html セレクタ { ... }

宣言の重複を避ける

例えば背景画像だけが違うセレクタを下記のように宣言するのは冗長です。

.box01 {
	margin: 20px auto;
	width: 80%;
	background: url("bg01.gif") repeat-y left top #fff;
}
.box02 {
	margin: 20px auto;
	width: 80%;
	background: url("bg02.gif") repeat-y left top #fff;
}

下記のようにまとめるべきです。

.box01, box02 {
	margin: 20px auto;
	width: 80%;
	background: url("bg01.gif") repeat-y left top #fff;
}
.box02{
	background-image: url("bg02.gif");
}
そのほかのガイドライン
  • CSSファイルは可能な限り1つにまとめる。
  • POSITIONプロパティのabsolute、relativeは可能な限り使わない。
  • 画像は可能な限りCSSスプライトを使って1つにまとめる。
  • ブロック間のマージンはmargin-bottomで表現する。なるべく、margin-topとmargin-bottomを混在させない。
  • 文章構造上意味のないDIV要素はなるべく使わない。
  • line-heightの値には1.5など実数を指定する。
  • @importはパフォーマンス低下の原因になるので、可能な限り使わない。
  • ユニバーサルセレクター（*{}）はパフォーマンスの低下になるので使いません。
  • !importantでトラブルを解決するのは避け、リファクタリング（コードの整理）で解決するようにします。

関連記事