XHTMLコーディング規約

コーディングルール

ドキュメントタイプ（DTD）に関して

文書型定義は、XHTML1.0 Transitionalを基本的に採用する。
要件によってStrict等を採用することもある。

文書型定義にXHTML1.0 Transitionalを採用した場合、互換モードを考慮し、冒頭でのXML宣言は書かない。

属性の順序に関して

要素に属性を複数付ける場合、以下の順番で属性を並べる。

• 必ず必要なもの（src,href,altなど）
• id,class
• あると良いもの（width,tabindex,sizeなど）

改行について

基本的にタグ毎に改行する。
要素が短い場合やリストなど、可読性が高まる場合は1行で書く。
要素の開始タグと終了タグの左端位置を揃える。

（例）

<p>
テキストテキストテキスト
</p>
<ul>
<li>リスト1</li>
<li>リスト2</li>
</ul>

改行した場合に不要な空白が出てきてしまう場合があるので、そのような場合には改行しない。
原稿部分では、不要な空白を出さないため、<br />タグの無いところで改行はしない。
モニター上の見栄えを考えて、文章中で改行はしない。
文字サイズを変更した場合や、リキッドレイアウトに変更した場合に崩れるので。

インデントについて

インデントは、入れ子階層がわかるように、ブロックごとに行なう。並列のブロックはインデントしない。
インデントは半角スペース2文字分とし、タブは使用しない。

（例）

<div class="wrapper">
<div class="header">
  <h1>テスト</h1>
  <img src="img/test.gif" alt="サイトロゴ" />
  <div>
    <p>
    テキストテキスト
    </p>
  </div>
  <span>テキストテキスト</span>
</div>
</div>

表について

tableタグにはなるべくsummary属性を付け、表の内容を簡潔に書く。
表にはなるべくcaptionタグを付け、表のタイトルを書く。

フォームについて

フォームでは、labelタグを使用して、コントロールと項目を関連付ける。
出来る限りfieldset要素や、optgroup要素を使用する。

画像のネーミングルール

画像のファイル名は、以下ように決定する。

• グローバルに使う場合は、機能や性質、配置される場所を表す名前を付ける
• 特定のページでしか使わない場合は、ページ名+機能や性質、配置される場所を表す名前を付ける
• ページ名や機能や性質、配置される場所は、アンダーバーでつなぐ （例）footer_list_background.gif

エラーチェックについて

出来上がったhtmlソースは、必ずW3CのHTMLバリデータ(http://validator.w3.org/)にかけ、正しいマークアップができているかを確認する。
error,warningが出たら、出なくなるまで修正する。
javascriptを使用しているためにerrorが出るケースがあるが、どうしようもない場合はerrorを看過する。

その他注意点

CSS、JavaScriptについて

CSSは必ず外部リンク化し、一行で済ませられるように、複数のCSSをインポートして読み込む。
JavaScriptは、可能な限り外部リンク化する。
idはなるべく使わないようにする。javascriptのライブラリとの競合を避けるため。
id,classのネーミングルールはCSSコーディング規約を参照。

コメントについて

コメントは使いすぎないように気をつける。
大枠のブロック構造や、複雑なブロック構造をわかりやすくするためなどに留める。

デザインはCSSで整える

デザインを整えるためだけの要素をなるべく使わない。
見た目を設定する属性は使わない。

（例）
bgcolor="#ffffff"
border="0"

対象ブラウザ

Windows
IE6,7,8以降
Fire fox3以降
Google Chrome2以降
Mac
Safari3以降

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