はじめに

目的

この規約は、HTMLの構造化とCSSの適用方法に関してのコーディング規約である。

文字コード

HTMLの文字コードはUTF-8、CSSに関してはマルチバイト文字を含めない事とする。 ただし、フォントの設定用CSSは例外とし、UTF-8で記述する。

HTML

HTMLの構造とid/classに関する規約。

インデントと改行

インデントは半角スペース２文字とし、ネストしたタグに関しては改行とインデントを行う事とする。

ただし、以下の場合は改行を行わず１行に記述して良い。

• その行でタグが閉じる
• １行の長さが概ね120文字以内で収まる

タグ名と属性名

タグ名と属性名はすべて小文字で表記し、閉じタグの省略は行わないこと。

<!-- 悪い例 -->
<p>サンプルです。<br>
   サンプルです。</p>
<ul>
  <li>リスト１
  <li>リスト２
</ul>
<!-- 正しい例 -->
<p>サンプルです。<br />
   サンプルです。</p>
<ul>
  <li>リスト１</li>
  <li>リスト２</li>
</ul>

属性値の省略

属性値の省略は行わないこと。

<!-- 悪い例 -->
<input type="check" checked/> 
<!-- 正しい例 -->
<input type="check" checked="checked" /> 

id、classの記述位置

id,classを記述する場合、原則として属性の最初の項目として設定する。

idとclass

idとして使用可能な範囲は、原則として以下の通りとする。

• 外枠となるラッパー/コンテナ（wrapper, containor)
• レイアウトの基準となるコンテナ（header, main_image, footer, contents, etc...）

これ以外の要素については原則としてすべてclassを用いる。

CSS

ファイルレイアウト

基本セットとして以下のCSSファイルを作成する

ページ毎に異なるCSSを適用する場合、ページ数が少なければlayout.cssに集約し、ページ数が多い場合は分割する。

インポート

default.cssなどを用意して、@importを使ってCSSを集約する事は行わない

セレクタ

文書構造とCSSのセレクタを対応させ、CSSとHTMLの対応関係を第一に考える事を基本方針とする。 すなわち、個別のidによるスタイルの適用や、全てのタグに対するスタイルの適用は最小限にする。

改行と括弧

セレクタの直後には半角スペースを記述し、改行をしないで括弧を配置する。 また、原則として１行に１つのプロパティを配置し、プロパティの前に半角２文字のスペースでインデントをとる事。

命名規約

CSSのクラス名とID名に関しては、英語表記を用い、一般的に通用する略語をのぞいて略語表記はしない事とする。 また、半角小文字で単語区切りはアンダースコア(_)を用いる事。

div#ln_r {} /* × */
div#line_red {} /* ○ */

インデント（字下げ）

インデントにはスペースを用い、タブ文字は使用しない事。 インデントは半角２文字とする

改行

セレクタの後で改行を行い、原則として１つのプロパティ毎に記述し改行する。 ただし、定型的なプロパティセット（例：clear-fix）は１行に記述して良い。

プロパティの記述順

プロパティは以下の順序で記述するが、それぞれのグループ内での順序は定めない。

1. レイアウトに関係するプロパティ（position, width, height, float, margin, etc...)
2. カラーに関連するプロパティ（background-color, color）
3. フォントに関するプロパティ（font-size, font-weight）
4. その他

記述原則

セレクタは、HTMLのトップレベルからのタグ構造を適切に反映するものとする。 ただし、レイアウトとなるコンテナ（idを付与しているタグ）より上の構造は省略する事とする。

div#contents div.left p {
  color: #442211;
}

スタイルのないセレクタ

あるセレクタに対して、特別なスタイルが不要な場合でも、空のセレクタを定義する。

div#contents div.left ul {
  margin-left: 20px;
}
div#contents div.left ul li {} /* 文書構造に存在するならばセレクタを定義する */

ページ毎に異なるスタイルを適用する

ページ毎に異なるスタイルを適用する場合、bodyに指定したclass名を基準として、スタイルを定義する事。

フォント

サイズ

フォントサイズは12pt（または14pt）を基準とした%相対指定で行うこと。 また、コメントとして標準の表示サイズを記述すること。

コメント

CSSには最低限のコメントを記述すること。ただし、改訂履歴はバージョン管理システムにて行うため、記述しないこと。 また、コメントには日本語（マルチバイト文字）を使用しないこと。

メジャーコメント

ヘッダ、フッタ、○○ページなど、大分類となる箇所には以下のフォーマットでコメントを記述する

/** This is Majar Comment
 *  lines if need.
 * =========================================================================================== */

マイナーコメント

大分類の中での小分類（例：○○ページの広告バナー部分）に関しては以下のフォーマットでコメントを記述する

/** This is Minor Comment
 *  lines if need.
 * ------------------------------------------------------------------------------------------- */

資料

• Dw用コードスニペットDw Snipet