html,cssコーディング規約

コーディングルール

ドキュメントタイプ（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以降

コーディングルール

冒頭で概要を説明する

スタイルシートの1行目には、charsetを必ず記述する。
CSSハックを使用している場合、冒頭部分で使用しているハックを説明する。
同じ要素でいくつかのデザインパターンを持ち、そららをclassで使い分ける場合など、説明が必要な場合は説明を加える。

セレクタセットルール

セレクタには下記ルールを適用する。

1. セレクタ名の後には、半角スペース1文字分空け、{を書く
2. プロパティ名は、半角スペース2文字分インデントする
3. プロパティ名の後には、スペースを空けずにコロンを書き、半角スペース1文字分空けて値を書き、最後はセミコロンで閉じる
4. プロパティは1行につき1つしか書かない
5. セレクタを閉じる}は、最後のプロパティの1行下に書き、インデントせずにセレクタ開始位置と揃える
6. セレクタの閉じブロックと次のセレクタの開始の間には、空行を1行入れる
7. カラーコードには大文字を使わない
8. セレクタを一行で書き、上下のセレクタと比べて見たい場合には、セレクタを1 行で書いてもかまわない。
   その場合、開始{の後、閉じ}の前に半角スペースを1文字分入れる。上下に空行を入れる必要はない

（例）

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

selector { property: value; property: value; }

セレクタのまとめ方

セレクタは使用するページやブロック毎になるべくまとめる。
ページやブロック毎にコメントをつけるのが望ましい。

id,class名のネーミングルール

id,classの名前は、色や形を表すものや、本人しかわからないような暗号ではなく、意味や機能を表す名前を付けることを心がける。複数単語からなる場合、各単語の先頭文字のみ大文字にしてつなげる（例）ThisIsAnExample
leftやbottomなど、補助的に付けないと意味がわからなくなる場合もあるので、適宜判断して命名する。
前述のネーミングルールが適用できない場合は、見た目や暗号での命名をする。
スタイルを使いまわさない場合は、むやみにid,classを増やさないように、なるべく親要素にふっていき、親要素を使って定義する。

ハックについて

対象ブラウザでの表示を等しくするため、CSSハックを用いることを認める。
使用する場合は、冒頭にコメントアウトして使用するハックを記述する。

プロパティの順序について

プロパティを書く順番は、以下の順序をなるべく意識する。

• 自動番号及びリスト
• ビジュアルフォーマット
• ビジュアルエフェクト
• ボックス
• 表
• バックグラウンド
• カラー
• フォント
• テキスト

プロパティリスト

自動番号及びリスト

• list-style
• list-style-type
• list-style-image
• list-style-position

ビジュアルフォーマット

• display
• position
• top
• right
• bottom
• left
• z-index
• float
• clear
• width
• min-width
• max-width
• height
• min-height
• max-height
• line-height
• vertical-align

ビジュアルエフェクト

• overflow
• clip
• visibility
• zoom

ボックス

• margin
• margin-top
• margin-right
• margin-bottom
• margin-left
• padding
• padding-top
• padding-right
• padding-bottom
• padding-left
• border
• border-width
• border-color
• border-style
• border-top
• border-right
• border-bottom
• border-left
• border-top-width
• border-right-width
• border-bottom-width
• border-left-width
• border-top-color
• border-right-color
• border-bottom-color
• border-left-color
• border-top-style
• border-right-style
• border-bottom-style
• border-left-style

表

• caption-side
• table-layout
• border-collapse
• border-spacing
• empty-cells

バックグラウンド

• background
• background-color
• background-image
• background-repeat
• background-attachment
• background-position

カラー

• color

フォント

• font
• font-family
• font-style
• font-variant
• font-weight
• font-size

テキスト

• text-indent
• text-align
• text-decoration
• letter-spacing
• word-spacing
• text-transform
• white-space

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