html-css-coding-standard.rst

DTD

1. 別途指定がない限りHTML5又はXHTML1.0を使用してください。
2. 文字コード指定がUTF-8の場合、XML宣言は含めないでください。

文字コード

1. 別途指定が無い限りBOMなしのUTF-8を使用してください。

字下げ

1. HTML要素の階層に対応した字下げをするものとします。
2. 字下げの際はタブを使用せず、スペースキー2つで行ってください。（作業中はタブを使って構いませんが、菱田への送付前にエディタの一括置換機能等を利用して2スペースに変更してください）

ID/クラス名の付け方

1. ID名・クラス名はコンテンツの内容を示す正確な英単語を使用してください。単語を知らなければGoogle翻訳を利用するか、和英辞典を調べてください。単語を調べるために多少コーディングのスピードが落ちても構いません。→参考書籍：リーダブルコード
2. クラスとIDの区別を理解した上で使い分けてください。IDは一枚のHTML文書の中でユニーク（重複なし）、クラスは一枚のHTML文書の中で重複しても良い識別名です。
3. (Optional)同種のID・クラスに関しては、命名規則に統一性を持たせてください。

悪い例 .. code-block:: html

<div class="category-1-content">...</div> <div class="category_2_area">...</div>

良い例 .. code-block:: html

<div class="category-1-area">...</div> <div class="category-2-area">...</div>

4. (Optional)スタイル指定の共通性でなく、機能の共通性によってクラス名を付けてください。 悪い例 .. code-block:: html

<div class="margin10 right">右寄せテキスト</div> <div class="margin10">標準テキスト</div> <style type="text/css">

.margin10 {

margin: 10px;

} .right {

text-align: right;

} </style>

良い例 .. code-block:: html

<div class="box"><p class="more">右寄せテキスト</p></div> <div class="box">標準テキスト</div> <style type="text/css">

.box {

margin: 10px;

} .more {

text-align: right;

}

</style>