コーディング ガイドライン

ver. html 5

XHTMLガイドライン

基本ルール

XHTML1.0 Strictへの準拠

  • 要素名、属性名には小文字を用いる。
  • 属性値を引用符「"」で囲む。
  • 開始タグ、終了タグをセットにする。終了タグを省略しない。
  • 空要素を「/」で閉じる。
  • 特殊文字を正しく使用する。「&」など。
  • XML名前空間を宣言する。
    通常は、html要素に属性「xmlns="http://www.w3.org/1999/xhtml"」を加えておけばよい。
  • 「xml:lang」属性の指定。
    通常は、html要素に「xml:lang="ja"」属性を加えておけばよい。

XHTMLとCSSの住み分け

  • XHTMLには構造を表す要素のみを用いる。
  • 表示の指定はCSSで行う。
    行間を空けるためのbr要素、字間を空けるためのスペース、表示を調整するための内容の無いdiv要素などは不適切である。

ヘッダー

XML宣言は取り除く

一部ブラウザが後方互換モードになってしまうため、XML宣言は行わない。
同様の理由のため、DOCTYPE宣言の前には、コメントを含めいかなる文字も記述しない。
ただし、場合によりPHPのブラウザ判別にてXML宣言を出力する。

DOCTYPE宣言

DOCTYPE宣言は、ファイルの先頭に記述する。

  • Transitional 
    								<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

コードフォーマット

指定がない限りは、UTF-8 / CR+LF にて作成する。

ページ情報の設定

タイトルとmeta情報は基本的にページ毎に指定し、指定がない場合は下記の通り設定する。

  • title 
    								<title>ページ名 | サイト名</title>
  • meta description 
    								<meta name="description" content="" />
  • meta keywords 
    								<meta name="keywords" content="" />

head要素内

次の順で要素を記述する。

  • meta要素
  • title要素
  • base要素
  • link要素
  • script要素
  • style要素
  • object要素
  • その他

ページの先頭へ

ネーミング

複合語の場合

複合語の場合、スペースは空けず、一語目の先頭を小文字、2語目以降の先頭を大文字にする。(camel記法)
例) "subTitle", "oldNews"

idとclass

  • ファイル内で個別の名前にはidを、ファイル内で別の要素と共有する名前にはclassを用いる。
  • div、class名は基本的に構造を表すものにする。

divブロックのid名

代表的なdivブロックは、HTML5に順次対応出来るよう次の名前を用いる。

  • wrapper
  • header
  • logo
  • nav
  • article
  • section
  • aside
  • footer
図：divブロック例

図：divブロック例

ページの先頭へ

書式 (改行、インデント、コメント)

  • 内容が一行に収まる場合は開始タグの後で改行しない。
    内容が一行(80文字程度)に収まる場合は開始タグの後で改行しない(h、p、liタグなど)。 これ以外の全ての要素の開始、終了タグの後に改行を入れる。
  • body要素にはclass (ディレクトリ名)、id (ファイル名) をつけ、サイト内のどのページであるかを明示する。
  • 複数行のブロック要素の上下には1行スペースを空ける。
    CMSを用いる場合、インデント規則を統一する手間が掛かるため、インデントは使わない。
    CMSを使わない場合はインデントをタブで1つ入れる。
  • 終了タグの前にコメントを挿入する。idの閉じコメントは「/#」classは「/.」とする。
    			    			</head>
			    			
			    			<body class="about" id="index">
			    			<div id="header">
			    				<h1>sample website</h1>
			    				<p>welcome.<br />
			    					this is sample website.</p>
			    			<!-- /#header --></div>
			    			
			    			<div class="nav">
			    				<ul>
			    					<li>about</li>
			    					<li>product</li>
			    					<li>blog</li>
			    				</ul>
			    			<!-- /.nav --></div>

ページの先頭へ

画像

  • altタグには使用されている文章をいれるか、文字のないイメージ画像については空(alt="")で挿入。
  • 図やグラフの場合には「図：組織図」「グラフ：○○の統計」などのように画像の種類も入れ読み上げても分かるようにする。
  • <img>要素には alt / width / height を設定する。

ページの先頭へ

その他

  • 不必要なdivブロックを作らない。子孫セレクタ、隣接セレクタなどを活用する。
  • 図やグラフの場合には「図：組織図」「グラフ：○○の統計」などのように画像の種類も入れ読み上げても分かるようにする。
  • 外部リンクには target="_blank" を指定。
  • サイト内のリンクは相対アドレスを使用する。
  • 英数字は半角とする。
  • HTML4.0及び4.01で非推奨とされている要素は使用しない。
  • HTML5において、削除予定である要素は使用を控える。
    詳細はW3Cのワーキングドラフトを参照。

ページの先頭へ