
2_XHTMLガイドライン



基本
文書型（XHTMLのバージョン）
XHTML 1.0 Transitional を基本とする。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">


XML宣言について
XMLの仕様では、XML宣言を記述することが強く推奨されているが、XMLの標準仕様に則う事で省略が可能。つまりXHTMLの文字コードがUnicodeであれば問題ないので、前述の通り文字コードはUTF-8を基本とする。それ以外の文字コードを使用する場合は担当ディレクターと相談の上決定する事。


id属性、class属性
原則class属性を使用する。
要素が一意に特定できる場合（レイアウトにおけるheaderなど）に限り、idを使用する。
id属性とclass属性は、同一の要素に対して設定可能。


書式
原則、以下の書式で統一するが、案件によって指定がある場合は適宜対応する。

インデントによる階層表示は行わず、左詰めとする
コメントは可能な限りソース内に分かりやすく記述していく。
終了タグにid（またはclass）の名前をコメントで記述する
書式は下記の例を参照し、スペースの有無などに気をつけること。
また、この記述は、レイアウトに使用しているタグ（divやtable）においては原則とする。


エラーチェックの実施
XHTMLはW3C Markup Validation Service（http://validator.w3.org/）で必ずエラーチェックする。「This Page Is Valid XHTML 1.0 Transitional !」とならない場合は問題の箇所を修正し、必ずこの結果になるように調整する。
参考：
Firefox用アドオン｢Html Validator｣でエラーチェックを簡易化できる。
Html Validator
https://addons.mozilla.jp/firefox/details/249


レイアウト
div要素（またはtable要素）で段組を行い、適切なidを設定する。
原則、下記の表に従うものとする。
やむを得ない場合は他のスタッフにもわかりやすい名前を設定すること。

id名
備考
layout
ページ全体
header
ページのヘッダ
pageBody
ページのボディ
primary
content内の主要な要素
secondary
content内の副次的な要素
gNav
グローバルナビゲーション
lNav
ローカルナビゲーション
content
主要コンテンツ
sidebar
サイドバー
footer
ページのフッタ
topicPath
トップページからの階層構造を示したリンクリスト
banner
ページのバナー表示部
visual
大きめの画像やFlash




head要素

含める内容
head要素に含める内容について、次の点に気をつける。

<meta http-equiv="" /> はtitle要素の前に記述する。指定するのはContent-Type、Content-Style-Type、Content-Script-Typeの3つとする。
<meta name="" /> はtitle要素の直後に記述する。
link要素やscript要素はhead要素の中で最後に記述する。
タイトル属性など日本語を使用する要素は、必ずcharsetの指定後に記述する。
各ページ間の移動がスムーズに出来るように、<link rel="contents" href="/" title=" " /><link rel="index" href="/sitemap/" title="サイトマップ" />などの記述を追加する。前後にページがある場合は、next、prevも追加する。
基本CSS(base.css, module.css, reset.css)はimport.cssでまとめて読み込む。
フォルダ毎のcssは別途読み込む。

これらを踏まえ、以下を基本的な構成とする。

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>（そのページのタイトル）</title>
<meta name="description" content="(そのページの簡単な説明文)" />
<meta name="keywords" content="(そのページのキーワード。半角カンマ区切りで列挙)" />
<link href="common/css/import.css" rel="stylesheet" type="text/css" media="screen,print" />
<link href="css/top.css" rel="stylesheet" type="text/css" media="screen,print" />
<link rel="contents" href="/" title="ホーム" />
<link rel="index" href="/sitemap/" title="サイトマップ" />
<script type="text/javascript" src="common/js/script_top.js"></script>
</head>




title要素
Title要素は、SEOを意識して各ページ以下のように記述する。
また、以下titleタグ内のパイプ、及びスペースはそれぞれ半角とする。
株式会社ユーザー・センタード・デザインという会社のサイト：トップページの場合
<title>株式会社ユーザー･センタード･デザイン</title>
株式会社ユーザー・センタード・デザインという会社のサイト：第二階層の場合
<title>サービス| 株式会社ユーザー･センタード･デザイン</title>
株式会社ユーザー・センタード・デザインという会社のサイト：第三階層の場合
<title>WEB制作- サービス | 株式会社ユーザー･センタード･デザイン</title>




body要素


適切な見出し構造
h1要素から出現すること
途中の見出しレベルを飛ばさないこと。セクションにおいて、h1→h2→h3と見出しの出現順序を厳守する。

h1要素で定義すべき内容
h1要素で定義すべき内容は、ページタイトルを基本とする。

img要素の注意点
img要素には必ずalt属性で代替テキストを指定する。（意味のない画像には alt=” ” と記述）
また、更新の際の簡略化をはかるためwidth属性とheight属性は入力しない。
意味のある画像は置換してはいけない。（例：グラフ、地図等）

a要素の注意点
title属性（補足情報）はSEO上の特定の指定があるときのみ使用する。（場合によっては、SEOスパムと認識される可能性があるため）

div要素の注意点
div要素はブロック要素を包括する汎用要素なので、インライン要素（img要素、strong要素、a要素など）を直接含んではいけない。

隠しテキストの設定
音声ブラウザ・テキストブラウザなどを使用しているユーザのユーザビリティを高める為に必要と考えられる要素は、module.cssに記述されているoffscreenクラス、あるいはoffscreenクラスと同様のCSSプロパティを記述して対処する。

body要素のclassの記述
複数のページで共通のレイアウトやスタイルを指定したい場合、body要素にclass属性を設定することで対応しても良い。
また、一つのページに特定のレイアウトやスタイルを指定したい場合もbody要素にclass属性を設定することで対応し、id属性は極力使用しないものとする。

非推奨要素/属性
非推奨要素/属性を使用する事は原則禁止とする。原則外の対処の必要がある場合、事前にスタッフ内で協議のうえで使用すること。














