基本・バリデーション
基本的な考え方
HTML はメンテナンス性を考慮すること。各ブロックのモジュール化を意識し、CSS の記述と合わせて、あるブロックを他のページにそのまま移動したり、同一ブロック内で要素が多少変更されたとしても(ul 要素 → ol 要素や段落の追加など)、レイアウトや見た目が変化しないように考慮し、モジュールの使い回しを容易にすること。
HTML5 で追加された新要素は適切に使用すること。ただし、旧ブラウザに配慮し、HTML5 要素をセレクタとしては原則として使用しないこと。また、input 要素の type 属性値などについても HTML5 から追加された属性値を用途に応じて適切に使い分けること(type="mail"
、type="number"
、type="tel"
、type="search"
など)。
id 属性は適切に使用すること。セレクタとしての利用も特に制限しないが、多用しすぎてメンテナンス性や再利用性が妨げられてはならない。
バリデーション
各要素は、HTML5 のコンテンツモデルや使用できる文脈に基づき適切に記述すること。またアウトラインが適切かについて必ず確認すること。
また、納品前の HTML ファイルは、必ず The W3C Markup Validation Service によるチェックを行うこと。特に HTML タグの閉じ忘れといったミスは避ける。なお、バリデーションはビルドツール等によって行っても構わない。
アクセシビリティ
JIS X 8341-3:2016 の、適合レベル A に準拠することを社内基準とする。ただし、Web サイトの特性や要件によっては、適合レベル A 対象となる全項目にわたる準拠を必須とするものではなく、また逆に 適合レベル AA、適合レベル AAA 項目を無視してよいということではない。JIS X 8341-3:2016 の全項目に関して適切な知識を持って制作にあたる。
最低限、下記の事柄についてはクリアすること。
- 各ページにはページの内容を推測しやすい適切なタイトルを必ず付けること。ページ分割等を行う場合も、(1/2ページ)などとページ数表記を入れるなどして、ページタイトルは Web サイト内で重複しないようにすること
- 画像には適切な代替テキストを付与する。代替テキストは、画像の内容を具体的に示すものとする(下記サンプル 1)
- 文字間隔の調整を空白文字を用いて行ってはならない
- 英単語をすべて大文字で記述することは避けること。
text-transform: uppercase;
などを適切に使用すること。
- 略称にはなるべく正式名称を abbr 要素を用いて付与する (下記サンプル 2)。
- 背景色と文字色には適切なコントラスト比を持たせる。
- ブラウザによる文字サイズの変更が可能なように実装すること。また、10px 以下のサイズの文字は重要でない注釈等を除いて原則として使用しないことが望ましい。
- 文字サイズ変更ボタンを Web ページ側で独自に提供しないこと(ブラウザの UI に任せる)。
- JavaScript が無効な環境を常に配慮すること。アコーディオンメニューなど、JavaScript によって開閉するような UI については、JavaScript が無効だった場合には開いた状態になるなど、重要な操作が JavaScript の無効によって不可能になるような実装は行わない。
- リンクアンカーとなるテキストは適切に選択すること。アンカーテキストに制約がある場合は、title 属性を併用すること (下記サンプル 3)。
- リンク領域、ボタンのサイズ等は適切なサイズを考慮すること。また、各リンクのマージンは適切にとり、誤クリックを誘発するような実装は行わないこと。
- PDF ファイルなど、HTML 以外のフォーマットへのリンクを提供する場合は、そのリンク先のフォーマットやファイルサイズがわかるようにしておくことが望ましい。
- フォームコントロールは、label 要素を適切に用いてラベルとの関連づけを行うこと。
- キーボードによる操作を考慮した実装を行うこと。
<!-- サンプル 1 -->
<img
src="photo.jpg"
alt="熱海に行ったときに撮影した写真。海をバックに白壁の民家とペットの黒猫が写っています。"
/>
<!-- サンプル 2 -->
<p>
<abbr title="World Wide Web Consortium">W3C</abbr> は
World Wide Web で使用される各種技術の標準化を推進する為に設立された標準化団体です。
</p>
<!-- サンプル 3 非推奨 -->
資料のダウンロードは<a href="/dl/">こちら</a>から
<!-- サンプル 3 推奨 -->
<a href="/dl/">資料のダウンロードはこちらから</a>
また、ある要素 (例えばナビゲーションなど) の位置固定表示 (e.g. position: fixed;
) を行う場合は、画面サイズが小さいときなどに画面外に要素がはみ出して閲覧できなくなるなどの可能性を十分に配慮する。
文書型宣言
新規に作成する HTML 文書は、特別な指定がある場合を除いて HTML5 を使用すること。文書型宣言は <!DOCTYPE html>
と記述。大文字小文字も左記の通りとする。
MIME Type は text/html
を指定すること。特別な指定がある場合を除いて、XHTML5 (application/xhtml+xml
) は使用しないこと。
ただし、HTML は記述統一の観点や、Movable Type から出力される XHTML との整合性等を考慮し、下記のルールに則って記述すること。
- 閉じタグは省略しないこと
- 空要素は必ず閉じること。
<br>
→ <br />
- 属性値は必ず
" "
で囲むこと
- 論理属性は必ず 属性名="属性値" という記述にすること。
<input type="check" checked />
→ <input type="check" checked="checked" />
- URL内やテキストノード内の & は
&
と文字参照で記述すること
要素や終了タグの省略
HTML における省略可能な要素、あるいは終了タグの省略は原則として行わないこと。
<!-- 非推奨 -->
<title>example page</title>
<article>
<h1>Example 1
<p>This is example page.
<!-- 推奨 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>example page</title>
</head>
<body>
<article>
<h1>Example 1</h1>
<p>This is example page.</p>
</article>
</body>
</html>
本セクションにおける 「省略可能な要素」 とは、ある要素のコンテンツモデル上は必須だが、条件を満たすことで記述を省略することができるとされている要素 (html 要素、head 要素、body 要素) がその対象となる (詳しくは下記参考リンクを参照)。記述が任意の要素、例えば table 要素内における thead 要素、tbody 要素などはこの限りではない。
なお、要素に関わらず、終了タグの省略は禁止する。
参考リンク (省略可能な要素)
セマンティクス
要素の意味と異なる動作を与えたりしないこと。例えば div 要素や p 要素をクリックすることでリンクとして機能させたりといったことは行わない。リンクを設定したい場合は a 要素を使用すること。
<!-- 非推奨 -->
<div onclick="allEntries();">すべての記事一覧へ</div>
<!-- 推奨 -->
<a href="/all/">すべての記事一覧へ</a>
また、class 名や id 名を要素に付与する際も命名規則にはセマンティクスを意識すること。
<!-- 非推奨 -->
<span class="red">注意してください</span>
<!-- 推奨 -->
<span class="elm-coution">注意してください</span>
class 名や id 名の命名規則に関して詳しくは セレクタの命名規則セクション を参照。
CSS や JavaScript ファイルの読み込み
CSS を外部ファイルとして読み込む場合、パフォーマンスを考慮して 1ファイルにまとめること。また、link 要素に対する media 属性の使用は原則として行わず、CSS ファイル内に @media規則を用いて記述すること。また、原則として CSS ファイル内での @import 規則の使用、および HTML 文書内でのインライン・スタイルの記述は禁止する。
JacaScript の読み込みは、script 要素を body 要素の終了タグ直前に記述する。また、可能な場合は async 属性や defer 属性を付与してレンダリングブロックを避ける。なお、「Google タグマネージャ」が使用できる場合は、導入することが望ましい。
<!-- 非推奨 -->
<link rel="stylesheet" href="base.css" media="screen" />
<link rel="stylesheet" href="grid.css" media="screen" />
<link rel="stylesheet" href="print.css" media="print" />
<!-- 推奨 -->
<link rel="stylesheet" href="style.css" />
<!-- 非推奨 -->
<head>
<script src="plugin.js"></script>
<script src="function.js"></script>
</head>
<!-- 推奨 -->
<script src="plugin.js" async="async" defer="defer"></script>
<script src="function.js" async="async" defer="defer"></script>
</body>
ただし、async 属性、defer 属性はスクリプトの依存関係等によって正常に動作しなくなる場合があるため、スクリプトの動作を優先してよい。
パフォーマンスのセクション もあわせて参照のこと。
type 属性
link 要素による CSS の読み込み時や、script 要素に対して type 属性は付与せず省略する。
<!-- 非推奨 -->
<link rel="stylesheet" href="style.css" />
<!-- 推奨 -->
<link rel="stylesheet" href="style.css" />
<!-- 非推奨 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"
></script>
<!-- 推奨 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
構造化データ
HTML 文書に対する構造化データの付与は、Microdata、もしくは RDFa Lite を用い、語彙は schema.org を原則として使用すること。ただし、構造化データの付与自体は必須ではない。
構造化データのテストツールとしては、Google の 構造化データテストツール を推奨する。
メタデータや OGP
メタデータ
<meta name="description" />
に関しては、主要なページでは設定しておく事。その際、重複が発生しないように注意。主要でないページで description が重複するくらいであれば最初から記述しない事。
<meta name="keywords" />
に関しては特にクライアントからの指定がない限り省略しても構わない。あるいはトップページのみ記述するなどでよい。
OGP
トップページに関しては原則として OGP の記述を入れておく事。その他、商品ページなど重要なページに関してはクライアントとの取り決め、もしくはディレクター、実装担当者の判断で記述する。下記に標準的な OGP 設定のサンプルを示す。
条件付きコメントの使用は原則として禁止する。
<!-- 非推奨 -->
<!--[if IE 8]>
...
<![endif]-->
ただし、要件上どうしても旧式のブラウザ向けにポリフィルを読み込まなければならない場合など、やむを得ない場合は使用可能。
ページ上部へのアンカーリンク
ページ上部に移動するためのページ内リンク (所謂アンカーリンク) として使用する a 要素の href 属性値には #top
を指定すること。HTML5 においては、#top
を指定することで自動的にページ上部へのリンクとして機能する。
<a href="#top">このページの上部へ</a>
参考リンク
SVG
スクリプトを伴わない SVG データに関しては img 要素での埋め込みを推奨する。スクリプトを伴う場合は、iframe、もしくは object 要素による埋め込みを推奨。文書内への svg 要素による直接記述は、メンテナンス性の面から推奨しない。
ただし、IE9 以降、および Android 4.0 以降しか SVG の表示に対応していないため、旧 Android が動作検証対象に入る場合はフォールバックを用意する。ただし、完全に装飾目的で使用された SVG であればこの限りではない。
フォールバックの手法
標準的なフォールバックの方法としては下記の方法を用いる。
- フォールバック用の画像を SVG と同ファイル名の .png 形式で用意し、SVG と同階層に設置する
- Modernizr Download Builder から SVG 判別ライブラリをダウンロード
- 上記を modernizr-svg.js として保存し、ページに読み込み
- 下記のソースコードを modernizr-svg.js の後ろで読み込み (jQuery を使用している場合)
/* Modernizr を使用し、SVG に未対応の場合は同名の .png ファイルに置き換える */
$(function(){
if (!Modernizr.svg){
$('img').each(function() {
$(this).attr('src', $(this).attr('src').replace(/\.svg/gi,'.png'));
});
}
});
フォールバックの手法は他にもあるが、メンテナンス性やパフォーマンスの関係から上記の方法を標準とする。