HTML+CSSコーディング規約

以前勤めていて、今はつぶれてしまったWeb制作会社で、僕がチームリーダーしていた時に作った資料です。
XHTMLが全盛だった時代なので今は古い情報ですが、まあこのまま削除してしまうのも勿体ないので、資料として公開します。

XHTML・CSSコーディングする際のガイドライン

制定日:2007-12-21 Ver.1.00
改訂日:2008-11-06 Ver.1.10

更新履歴

Ver.1.10 (2008-11-06): CSSの読み込みの順序と個別性についてを追加

ガイドライン: 原則／コーディングについて／チェックについて／タグの意味づけと利用方法
HTML: 宣言／ head ／ HTMLタグの記述方法／見出し要素について／ id, classの命名／その他留意点
CSS: CSSファイル構成／記述順／ CSSの記述方法／セレクタの記述
 コメントの記述／読み込みの順序／個別性について／ CSS Hack の記述法／その他留意点

［ガイドライン］

原則

原則として、HTML文書は［XHTML1.0 Strict］, CSSは［CSS2.0］に準拠したコーディングをおこなうこと。
すなわち、HTMLは文書の構造を示すことを目的とし、見た目の装飾はCSSで制御をおこなうようにする。
ただし、古いブラウザ（スタイルシート未対応など）でも表示可能にしなけらばならないなど、ユーザーの要望や事情がある場合はこの限りではない。

［参考サイト］XHTMLの書き方と留意点,　CSS2の概要

コーディングについて

表示確認のブラウザは、バグが少なくW3C規約に近い表示がされるFirefoxを主体とする。
IEへの対応は、正しくコーディングした後に、条件式コマンドやCSSハックをつかいCSSのみで修正すること。

チェックについて

コーディングのチェックはバリデータでおこなう。
下記サイトを使用するか、

もしくは下記のFirefoxのアドオン機能を使用するのが望ましい。

タグの意味づけと利用方法

タグ本来の意味に合った使用をすること。
例えば、

tableタグをレイアウトに使用しない
brタグをマージンに使用しない
スペーサーGIF画像の禁止
開始タグと終了タグの中が空であることは禁止
例）<p></p>

など、基準としてW3Cの勧告にしたがうこと。

［参考サイト］W3Cの仕様書等の文書の日本語訳集

［ HTML ］

宣言

準拠する規格は、XHTML1.0 Strictに準拠したHTMLを作成すること。
XHTML1.0 Strictの宣言文は下記のとおり。

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
  <head>
    <title>タイトル</title>
  </head>
  <body>
    <p>本文</p>
  </body>
</html>

head

ページの性質を示し，UA(User Agent)に読ませることを目的とする。
title要素は必須。サイトタイトル，カテゴリタイトル，ページタイトルを明記する。
meta要素として，name="keywords", name="description"を記述する。また、
<head>の最初に、

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

を入れ、文字コードを指定。
CSSとJavascriptを読み込ませるなら、次のメタタグも必ず入れること。

<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />

※CSSやjavascriptは基本的に別ファイルで作成して、<head>に下記のように記述し、外部から呼び出すこと。

<link href="test.css" media="all" rel="stylesheet" type="text/css" />
<script src="test.js" type="text/javascript"></script>

HTMLタグの記述方法

HTMLを記述する際には以下のルールを適用する。

<div class="section">
  <h4>......</h4>
  <p>......</p>
  <ul class="linkList">
    <li>......</li>
    <li>......</li>
    <li>......</li>
  </ul>
</div>

入れ子構造が分かりやすいようにインデントをとること。
インデント幅は半角スペース2つ分とする。

見出し要素について

見出し要素の理想的な使い方は次のとおり。

h1 要素から出現すること
途中の見出しレベルを飛ばさないこと
ただし、ページ構成によっては、ある見出しレベルを使うことが躊躇されたり、ページ間で統一的なマークアップルールを設けている場合、このような階層構造を逸脱しなければならない場合もありうる。
h1 要素は各ページ固有の内容を定義すべき
すべてのページに共通のロゴをh1 要素で定義するのは間違い（トップページぐらいしか妥当しない）。他のページは固有のページタイトルに定義するのが望ましい。

id, classの命名

命名についてはCSSネーミング規約.htmlで確認すること。

idは位置・役割を一意に特定する部位に使う。
例） header, footer, navigation, menu など
classは性質を分類するために使う。
例） imgCenter, textEmphasis, subContents など

必要に応じてひとつの要素に対してidと複数のclassをふることはOK。

※id, classを無用に増やさないために、できるだけ祖先要素のほうにふるようにする。
すなわち子孫セレクタで対応すること。

<div>
  <h4 class="section-title">......</h4>
  <p class="section-body">......</p>
  <ul>
    <li class="link">......</li>
    <li class="link">......</li>
    <li class="link">......</li>
  </ul>
</div>

これよりも次の記述方法をとると、データ量も削減でき、見た目もわかりやすい。

<div class="section">
  <h4>......</h4>
  <p>......</p>
  <ul class="linkList">
    <li>......</li>
    <li>......</li>
    <li>......</li>
  </ul>
</div>

その他留意点

見た目を整えるために<br />を連続して使用しない。
見直したときに分かりやすいように、コメントを活用する。
例）
子入れが深くなるところでは
```

</div>
```
など、終了タグの直前にコメント入れておくとわかりやすい。
見た目を設定する属性は使わない。
例）align="center" border="0" bgcolor="#cccccc"など。これらはCSSで制御すること。
文字コードは特に指定がない限りuft-8にする。必ずCSSとHTML側とも統一すること。
XHTML2.0ではimg要素が消えることや、メンテナンス上の利点から特に指定がない限り、
img要素にwidth height属性の指定はしなくてよい。

［ CSS ］

ブラウザの対応状況とバグを理解して使う。
最低限の対応として、IE6, IE7，Firefoxに対応させる。
ユーザの要望により即座に Opera, Safari, Google Chromeなどにも対応できるよう正しいコーディングを心がけること。

CSSファイル構成

CSSファイルは規模が小さい場合は一つにまとめてもよいが、予め構造ごとに分けておくと管理が容易になる。

サイト内全ページに共通するもの。例）default.css
ブラウザデフォルト値のリセットや全ページ共通で不変なパーツの指定（ヘッダやフッタ等）
各要素（h1、p、ul 等）のデフォルト値の設定を記述
レイアウトの枠組み設定。例）layout.css
装飾系のクラス設定。例）decorate.css
印刷用。例）print.css

これらをcommon.cssで以下のように一括して読み込む。

@charset "utf-8";
/* -----------------------------------------------------------
 CSS Information
----------------------------------------------------------- */

/*-----------------------------------------------
 __default.css
-----------------------------------------------*/
@import url("default.css");

/*-----------------------------------------------
 __layout.css
-----------------------------------------------*/
@import url("layout.css");

/*-----------------------------------------------
 __decorate.css
-----------------------------------------------*/
@import url("decorate.css");

/*-----------------------------------------------
 __print.css
-----------------------------------------------*/
@import url("print.css");

記述順

文字コードは特に指定がない限りuft-8にする。
　例）@charset "utf-8";
必ずCSSとHTML側とも統一すること。
CSSファイルでの文字コード指定は、1番上の行に左詰めで記入すること。一文字のスペースも空けてはならない。

またコメントアウトで、製作者情報を記述する。

[記入例]

@charset "utf-8";

/* About this file ===============================
 * Style    : a common style
 * Since    : 2008-03-07
 * Modified : 2008-04-20
 * Editor   : Hanako Yamada
================================================== */

ここまでを書いたあと、以下のとおり記述していくこと。

＜スタイルの構成順＞

/* 制作者情報 */
/* ブラウザ初期化スタイル */
/* 汎用要素スタイル */
/* 汎用クラススタイル */
/* ワイヤーフレーム部位別スタイル */
/* カテゴリー別スタイル */

＜属性の記述順＞

セレクタは祖先要素から子孫要素へ（階層順）,同じ階層のものは上から下へ（出現順）,
そして、プロパティボックスモデルの外側から内側へ記述していくこと。

display, float, visibility, position, margin
width, height, overflow
border
padding
background
list-style
line-height
text
font
color

CSSの記述方法

スタイルシートコーディングの際、ひとつのセレクタセットは以下のルールを適用する。

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

セレクタ名のあと、半角スペースを1つあけて { を入力する。
各プロパティの前には2文字の半角スペースを設けること。1つのプロパティは一行で管理する。
プロパティ名のあと: をスペース無しに入力し、: と値の前には半角スペースを1つあける。
値の後は、必ず ; で終了を示す } はスペースタブを設けない。

※複数の値がある場合、半角スペースで区切る。
　例）font-family: Osaka, sans-serif, serif;

セレクタの記述方法

複数のセレクタにスタイルを定義する場合、, の後に半角スペースを入れる。
例）h1, h2, h4, h4 { }

シンプルセレクタの区切りには必ずスペースを挟む。
これは、 > + や、その後にも増えるであろう記号の間にも適用される。
例）#header + #content > h2

コメントの記述方法

グルーピングする場合は以下のように記述する。（大カテゴリ）

/* Navigation
-------------------------------------------- */
#navigation {
  
}

大カテゴリの中で、さらにグルーピングしたい場合は以下のように記述する。（小カテゴリ）

/* --- Navigation Action --- */
#navigation li a {
  
}

ブロックそのものに注釈を記述する場合、セレクタ後の { の直後に半角スペースを挟んで記述する。
例）#header { /* for IE */

特別な注釈としてのコメントは、そのプロパティの定義の直後に半角スペースを挟んで記述する。
例）height: 100%; /* for IE */

複数のセレクタが指定されたブロックへの注釈は、
最初のセレクタの区切りの , 直後に半角スペースを挟んで記述する。
例）#header, /* for IE */ #footer {

読み込みの順序

外部スタイルシート、style要素、style属性は混在して用いることができる。これらの中に"要素"のプロパティに対して同じ優先順位を持つスタイルが複数ある場合（例：同一スタイルにcolorプロパティが2カ所で設定されている場合など）、ブラウザが後で読み込んだものに高い優先順位が与えられる。

[例]　ユーザーのカーソル/ キーアクションの順序どおりに指定する必要がある。

a:link{ color: blue; }
a:visited { color: purple; }
a:hover{ color: red; }
a:active { color: yellow; }

個別性（specificity）について

後に記述されている（読み込まれた）スタイルが優先されるという「読み込み順序のルール」は、あくまで個別性が同じ値を持つものについて適用されるわけで、まず個別性を理解しなければならない。

セレクタは使い方によって個別性を決める数値が変わる。個別性は4桁のカウントした数字で計算される。
4桁の個別性を決める計算方法は次の通り。

セレクタの種類	例
idセレクタ	div#contents
classセレクタ	p.comment
属性セレクタ	a[rel~="friend"]
擬似クラス	:hover
要素セレクタ	h1
擬似要素	:after
子孫セレクタ	ul li
子要素セレクタ	ol.toc > li
隣接セレクタ	h1 + p
ユニバーサルセレクタ	*

1000の位: HTML文書内にstyle属性があれば1 (= a)
100の位: セレクタに含まれるID属性をカウントした数 (= b)
10の位: セレクタに含まれるID以外の属性と、擬似クラスをカウントした数 (= c)
1の位: セレクタに含まれる要素、擬似要素をカウントした数 (= d)

※子孫,子要素,隣接やユニバーサルセレクタ、そしてCSS以外のタグで指定されたHTML属性（colorやsize等）はカウントしない。

個別性のサンプル

<div style="">     /* a=1 b=0 c=0 d=0 -> specificity = 1 0 0 0 */
div#header     {}  /* a=0 b=1 c=0 d=0 -> specificity = 0 1 0 1 */
li.red .level  {}  /* a=0 b=0 c=2 d=1 -> specificity = 0 0 2 1 */
ul ol li.red   {}  /* a=0 b=0 c=1 d=3 -> specificity = 0 0 1 3 */
a:hover        {}  /* a=0 b=0 c=1 d=1 -> specificity = 0 0 1 1 */
h1 + *[rel=up] {}  /* a=0 b=0 c=1 d=1 -> specificity = 0 0 1 1 */
ul ol+li       {}  /* a=0 b=0 c=0 d=3 -> specificity = 0 0 0 3 */
ul li          {}  /* a=0 b=0 c=0 d=2 -> specificity = 0 0 0 2 */
li:first-line  {}  /* a=0 b=0 c=0 d=2 -> specificity = 0 0 0 2 */
li             {}  /* a=0 b=0 c=0 d=1 -> specificity = 0 0 0 1 */
*              {}  /* a=0 b=0 c=0 d=0 -> specificity = 0 0 0 0 */

例として、以下のようにスタイルシートを読み込んだ場合、

* { color: black; } （個別性 0点）
em#site01 { color: yellow; } （個別性 101点）
em { color: gray; } （個別性 1点）
em.site { color: blue; } （個別性 11点）
p em { color: red; } （個別性 2点）

最終的に、個別性が最も高い「em#site01」のスタイルが適用され、文字色が黄色（yellow）になる。

CSS2では、スタイル設定時にプロパティの値に続けて!importantというキーワードを加えることで優先順位を最重要にすることができるが、あまり乱発すると後々混乱を来たすので最終手段のものであると考えておく。
［例］em { color: gray !important; }

CSS Hack の記述方法

CSS Hack を行う際には以下のように改行せず記述し対象ブラウザと何に対する Hack なのか、目的を明確にする。

#hack {
  property: value;
} * html #hack { /* for IE6 and below, xxx bug fix */
  property: value;
  } *:first-child+html #hack { /* for IE7 and Grater, xxx bug fix */
    property: value;
    }

また、宣言ブロック内で行う際には以下のようにする。
ただし、IE6のアンダーバーハックはW3Cバリデータでエラー表示されるので注意すること。

#hack {
  property: value;
  property: value;
  _property: value; /* for IE, xxx fix */
}

その他留意点

支障がない限り、font要素以外についてはショートハンドで記述する。
例）background: url(../test/test.gif) no-repeat left bottom #ffffff;
CSS Hackは極力使わない。やむを得ずCSS Hackを使うとき、あまりトリッキーではないハックを選択する。
CSSファイルの肥大化を抑えるよう、作成中にボツになったスタイルは必ず削除しておく。
頻繁にスタイルを変えるような場合は、指定する必要のないスタイルが残っていないかチェックすること。
見直し易いように、グルーピングしコメント注釈を付けること。
子孫セレクタを活用すること。
たとえば、子孫セレクタで要素のデザインを振り分けられることができ、同じh3でも違う装飾ができる。
div#main h3 {......}
div#seealso h3 {......}
画像にクラスをあてるときは、padding,marginのleft,rightを指定する場合はemなど可変サイズ可能なものは使用しない。（文字サイズを変更したときにレイアウト崩れが生じる）