ProgrammingHTML/CSSHTML4.0の基本
HTML4.0の基本

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

製作ガイドライン

検証環境

コーディング前にWindows環境、Machintosh環境、スマートフォンなど対応が必要なブラウザを明確にし、ウェブサイトのデザインや情報、機能が適切な範囲に収まっていることを確認します。

表示確認ブラウザの例

Windows環境
  • Microsoft Internet Explorer 6.0
  • Microsoft Internet Explorer 7.0
  • Microsoft Internet Explorer 8.0
  • Mozilla Firefox 3.6
Macintosh環境
  • Safari 5.0

画像解像度

1024×768ピクセルで最低限の情報を表示できるようにします。

ウェブ・アクセシビリティ

ウェブ・アクセシビリティとは、「高齢者や障害者など心身の機能に制約のある人でも、ウェブで提供されている情報にアクセスし利用できること」を意味します。
ウェブ・アクセシビリティについては「WCAG」(Web Content Accessibility Guidelines)という指針がW3Cによって提唱されています。WCAGへの対応としては、無償の範囲で以下までが含まれます。

  • 推奨タグは実装上、必要不可欠なもの以外は使わない。
  • テンプレートとなるページに関しては、HTMLチェッカーなどでソースの文法をチェックする。
  • 見出し、段落、リストなど、適切な要素を使って文書の構造や役割を示す。
  • 表示スタイルは文書の構造と分離し、書体、サイズ、色、行間、背景色などの見た目についてはスタイルシートで設定する。
  • 画像や動画には、代替情報を用意する。
  • リンクに画像を用いる場合は、リンク先の内容が予測できるようにテキストなどの代替情報を用意する。
  • 文字サイズと書体はユーザが変更できるようにする。

ユーザビリティ

パソコンやウェブの操作が慣れていない方でも、可能な限り、ストレスなくサイト内を遷移していただけるように、次のような考え方とルールの元に制作を行います。

文字色、大きさについて
地色と判別がつかなくなるような文字色や、概ね10px以下の小さすぎる文字などは用いないようにします。また、原則的に文字サイズはユーザ側の閲覧環境に合わせて可変できるように設定します。
テキストリンクについて
テキストリンク部分については、リンクがリンクであることがわかるように、原則としてアンダーラインを引き、地の文と区別して認識できるように配慮します。
また、同様の意図から、マウスを乗せた時(以下マウスオーバー時)に、色が変わる、アンダーラインが消えるなど、見た目のふるまいが変化するようにし、クリッカブルであることが認識できるように配慮します。
ボタンについて
画像でのリンク部分(ボタン、ナビゲーション等)については、リンクであることがわかるような処理(陰や立体的に見える処理を施す、アイコンを付ける)をすることで、クリッカブルであることが認識できるように配慮いたします。また、マウスオーバー時には、色が変わるなど、見た目のふるまいが変化するようにし、クリッカブルであることが認識できるように配慮します。

第2章　XHTMLコーディングガイドライン

コーディングの基本ルール

文字エンコーディング
文字エンコーディング、ファイルの保存形式はUTF-8とします。
インデント
インデントにはタブ文字を使います。
文書型
XHTML 1.0 Transitionalを採用します。特別な理由がなければ、XHTML1.0に明記されている仕様に従ったコーディングを行います。

 

XHTML1.0の仕様：http://www.w3.org/TR/xhtml1/

XML宣言と文書型宣言

XML宣言

IE6ではDOCTYPE宣言をソースの先頭行に記述しないと、後方互換モードとして解釈されてしまうバグが存在します。この後方互換モードのバグ問題を避けるため、XML宣言は省略します。

以下の宣言は記述しません。

<?xml version="1.0" encoding="utf-8"?>

HTML要素

html要素の開始タグにはxmlnsと、言語コードの指定にxml:lang属性、HTMLとの互換性のためにlang属性も合わせて記述します。

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">

HEAD要素

META要素

文字コードセットの宣言

文字コードセットはUTF-8を選択します。ファイルの文字コードをUTF-8で保存し、META要素のCONTENT属性で文字コードを宣言します。META要素は必ずTITLE要素の前に宣言します。

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
ページ紹介文

content属性に、ページの概要を全角150文字程度で記入します。

<meta name="description" content="[全角150文字程度]" />
ページキーワード

サイトやページのキーワードを半角カンマ区切りで列挙します。キーワード数は5個を目安とします。

<meta name="keywords" content=“[***],[***],[***],[***],[***]" />

TITLE要素

TITLE要素は、ページの階層によって次の書式を使います。

ホーム
<title>サイト名</title>
第2階層トップ
<title>カテゴリー名 | [サイト名]</title>
通常ページ
<title>ページ名 | カテゴリー名 | [サイト名]</title>

LINK/SCRIPT要素

LINK要素には、必要に応じて外部ファイルのCSSやRSS、ホーム、ヘルプや利用ガイド、サイトマップなどのナビゲーション情報を指定します。LINKやSCRIPT要素はHEAD要素の最後尾で宣言します。

<link rel="stylesheet" href="css/import.css" media="screen" type="text/css" />
<link rel="alternate" href="/feed/rss.xml" type="application/rss+xml" title="[サイト名]" />

HEAD要素サンプル

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="description" content="***" />
    <meta name="keywords" content="***,***,***" />

    <title>ページタイトル|[サイト名]</title>
    <script src="js/***.js" type="text/javascript"></script>
    <link rel="stylesheet" href="css/***.css" type="text/css" />
</head>

BODY要素

主な注意事項

BODY要素の直下にテキストや画像を置かない
テキストや画像は必ずブロックレベル要素に含まれるようにマークアップします。

ロゴのマークアップ

ロゴは、サイトトップではH1要素でマークアップし、それ以外ページではDIV要素でマークアップすることを推奨します。その場合、サイトトップ以外のページでは、大見出しにあたるテキストまたは画像をH1要素でマークアップします。

ナビゲーション類のマークアップ

ナビゲーションはUI要素でレイアウトを構成し、H要素でタイトル名などをマークアップします。

UL要素の利用

ナビゲーション類、リンクリストなどリストを意味するコンテンツは、UL要素でマークアップします。

DL要素の活用

用語と説明、画像と説明など内容と内容が関連するペアのリストは、DL要素でマークアップします。

IMG要素

IMG要素にはalt属性で代替テキストを指定します。

STYLE要素、style属性の禁止

STYLE要素、style属性は使用しません。代わりに外部CSSで指定します。

非推奨要素・属性などの禁止

推奨されていない要素や属性は基本的に使いませんが、ブラウザの対応状況なども考えるて一部の要素や属性は許可します。たとえばTransitionalでは次の使用を認めています。

  • A/AREA要素のtarget属性
  • IMG要素のname属性
  • FORM要素のname属性

コメント

レイアウトなどに関連するDIV要素などには、どこまでがその範囲かわかるようにコメントで区切ります。

開始コメント：　<!-- 領域名-->
終了コメント：　<!-- /領域名-->

文法チェック

現在のブラウザを考えるとWEB標準に100%準拠するのは難しいですが、不要な文法エラーがないか、納品前に文法チェックを行います。

Dreamweaverなどの専用ツールの文法チェック機能を使うか、下記サイトにて文法チェックを行います。

関連記事