High Performance HTML -さまざまなデバイスに配慮されたクリーンで簡潔なHTMLの書き方

サイト構築 -制作

Post on:2015年7月28日

要約

別の用途で使わない

HTMLは構造を加えるために使う、コンテンツのスタイルのためには使わない。
クリーンにしておく

ワークフローにコードのバリデーションを加えてください。
整然としておく

一貫したコードの構造とフォーマットを維持するためにツールやスタイルガイドを使う。
言語を学ぶ

エレメントの構造やセマンティックなマークアップを身につける。
アクセシビリティを保証する

aria属性やrole属性を加え、ページをアクセシブルにする。
テスト

エミュレータやパフォーマンスツールを使い、さまざまなデバイス・スクリーンサイズであなたのサイトをテストする。

大きい画像は、こちら。

HTML, CSSとJavaScript

HTMLはコンテンツに構造と意味を加えるマークアップ言語です。

HTMLはコンテンツにスタイルを加えるために使われるべきではありません。例えば文字を目立たせたいために、blockquotes要素を使ったりしないでください。その代わり、要素のレイアウトや見た目はCSSで指定します。

参考

HTMLのデフォルトの見た目は、ブラウザのデフォルトのスタイルシートに定義されています。各ブラウザのスタイルシートは、「revert.css」を参考にしてください。例えば、Chromeではh1要素は32pxのボールドで表示されます。

3つの一般的な原則

HTMLは構造のために、CSSはレイアウトや見た目、JavaScriptは振る舞いや動きに使ってください。
まずはHTMLを使い、それから必要ならCSSを使い、もし本当に必要ならJavaScriptを使うことを考えてください。例えば多くの場合、フォームのバリデーションのためにはHTML、そしてCSSで可能です。
CSSとJavaScriptはHTMLから独立したファイルに記述してください。これはそれらのファイルをキャッシュすることを可能にし、コードをデバッグする際も容易になります。最終的にはCSSやJavaScriptはミニファイして利用することができます。

ドキュメントの構造

HTML5の基本的なドキュメントの構造です。

<!DOCTYPE html>
<html>
<head>
 <title>Recipes: pesto</title>
</head>
<body>
  <h1>Pesto</h1>
  <p>Pesto is good!</p>
</body>
</html>

head要素内に、CSSファイルへのリンクを記述します。
これが意味することは、HTMLを解析する前にブラウザがCSSを読み込むということです。
```
<head>
  <title>My pesto recipe</title>

  <link rel="stylesheet" href="/css/global.css">
  <link rel="stylesheet" href="css/local.css">
</head>
```
JavaScriptファイルはページの一番下、</body>の前に記述します。ここに記述することで、ブラウザがJavaScriptを解析する前にページのレンダリングをすることができ、ロード時間を速めます。またJavaScriptがページ内の要素を参照するのに役立つ副作用もあります。
```
<body>
  ...
  コンテンツ
  ...
  <script src="/js/global.js">
  <script src="js/local.js">
</body>
```
JavaScriptの記述には、deferとasyncを使うのも有効です（参考: HTML5's async Script Attribute）。script要素にasync属性を加えると、非同期で読み込み、読み込み終わりしだいスクリプトを実行します。
※async属性はIE10+です（参考: asyncのサポート状況）
イベントハンドラはJavaScriptのコードに加えます。HTMLのインラインには決して加えないでください。例えば下記のコードでは、エラーが起こりがちでメンテナンス性もよくありません。
```
<head>
  ...
  <script src="js/local.js">
</head>
<body onload="init()">
  ...
  <button onclick="handleFoo()">Foo</button>
  ...
</body>
</body>
```
イベントハンドラをJavaScriptのコードに加えると、下記のようになります。まずはHTMLファイル。
```
<head>
  ...
</head>
<body>
  ...
  <button id="foo">Foo</button>
  ...
  <script src="js/local.js">
</body>
```
JavaScriptは下記のようになります。
```
init();
var fooButton =
    document.querySelector('#foo');
fooButton.onclick = handleFoo();
```

バリデーション

Webが成功した大きな理由の一つは、ブラウザが無効なHTMLでも処理することです。厳格なコードを記述しなくても、ブラウザにとりあえずは表示されます。ブラウザが無効なコードをどのようにレンダリングするべきか標準化された規則もあります（参考: HTML Standard）。

しかし、これは無効なHTMLでいいという理由ではありません。正しいValidなHTMLはデバッグが容易で、ファイルサイズも最小限で、パースやレンダリングもより速く実行されます。正しくないInvalidなHTMLはレスポンシブデザインを実行することさえ難しいかもしれません。

ValidなHTMLを書くことはテンプレートをつくる時に、特に重要です。

ワークフローに「HTMLHint」や「SublimeLinter」のようなバリデーションを取り入れてください。「W3C HTML Validator」のようなオンラインツールでコードをチェックし、プロジェクトとファイルを共有することができます。
HTML5のDocment Typeを使いましょう。
HTMLの階層を正しく保つようにしてください。特にネストされた要素は、正しく終了タグを記述しているのを確認してください。デバッグとして、終了タグにコメントを加えることはその助けになります。
```
<div id="foobar">
...
</div> 
```
自身で閉じていないすべての要素は終了タグを加えることを確実にしてください。例えば、下記の例は一応は表示されるでしょう。
```
<p>Pesto is good to eat...
<p>...and pesto is easy to make.
```
しかし、これはうまくいかない可能性が低く、それぞれのパラグラフの終わりを明示的にしてください。
```
<p>Pesto is good to eat...</p>
<p>...and pesto is easy to make.</p>
```
終了タグは、リスト要素のアイテムには必要とされません。若干の非常に賢い制作者はこれを記述すべきではないと信じています（参考: very clever developers）。アイテムはどちらでも構いませんが、リスト要素を閉じることは確実にしてください。
```
<ul>
  <li>Basil
  <li>Pine nuts
  <li>Garlic
</ul>
```
絶対的に終了タグを含まなくてはならないのは、video要素とaudio要素です。これらは自身で閉じて完了するわけではありません。
```

<video src="foo.webm" />


<video src="foo.webm">
  <p>Video element not supported.</p>
</video>
```
img要素やlink要素のような自身で閉じて完了する要素は、終了タグを加える必要はありません（参考: 終了タグを必要しない要素）。
ブーリアン属性は値を持っていません。例えば、下記のvideo要素はこれだけでは自動的に再生せず、コントローラーも表示されません。
```
<video src="foo.webm">
```
ブーリアン属性は記述がない（=省略されている）ということはその値が「false」を意味するため、下記のように指定されたのと同じになります。
```
<video src="foo.webm" autoplay="false" controls="false">
```
自動再生、コントローラーを表示させるには次のように指定します。
```
<video src="foo.webm" autoplay="true" controls="true">
```
ブーリアン属性が「true」の場合は値を省略できるため、その属性を記述するだけでOKです。
```
<video src="foo.webm" autoplay controls>
```
スタイルシートとスクリプトは、type属性を必要としません。
外部のリソースにリンクする時は、プロトコルを省いてください。下記のように記述すると、httpでアクセスしている時はhttpに、httpsでアクセスしている時はhttpsでアクセスさせることができます。
```
<a href="//en.wikipedia.org/wiki/Tag_soup">Tag soup</a>
```

コードのフォーマット

一貫したフォーマットでHTMLのコードを記述することは、コードの共有も最適化もデバッグも容易になります。

プロジェクトメンバーのためにHTMLのスタイルガイドをメンテナンスするようにしましょう。あるいは「Google HTML/CSS Style Guide」のような既存のものを使用してもよいでしょう。
コードを美しく書くために、エディタの機能を利用してください。例えばSublime Textでインデントを整形（参考: reindent shortcut in sublime text）したり、「CSS Buautify」「Beauty JavaScript」などのオンラインツールも便利です。
階層を現したHTMLのインデントにイライラしないでください。これは容易に手に負えなくなることがありますが、基準のインデントを決めて丁寧に行ってください。深い階層になるほど、その必要性を見いだすでしょう。
インデントはスペースかタブのどちかがよいでしょう、両方を混ぜるのはダメです。
要素をネストする時は、要注意です。例えば、下記は見出しであることが明確です。
```
<h2><a href="/contact">Contact</a><h2>
```
しかし、下記のように記述してしまうと、一見リンクのように見えてしまいます。
```
<a href="/contact"><h2>Contact</h2></a>
```
他の制作者が驚かない方法でコードを書いてください。ページ上の要素はコードのどこに記述しても表示することはできますが、例えばフッタの要素はHTMLファイルの一番下に記述するべきです。
引用符はシングル「'」とダブル「"」のどちらかに統一してください。
タグと属性は小文字で記述してください。大文字だとうんざりします。
```
<A HREF="/">Home</A>
```
大文字と小文字が混ざってると、もっと最悪です。
```
<H2>Pesto</h2>
```

セマンティックなマークアップ

セマンティックとは「意味に関連していること」を意味します。
HTMLのマークアップはコンテンツに意味を加え、要素と属性の名前がコンテンツの役割を記述します。

HTML5では新しいセマンティックな要素として、header要素やfooter要素やnav要素などを提起しました。正しいコンテンツのために正しい要素を使うことは、アクセシビリティにとって非常に良く、あなたのコードが理解できることを保証します。

見出しとなるテキストはh1, h2, h3などを使い、リストにはol, ulなどを使ってください。
article要素内は、h1を使った見出しを先頭に記述するべきです（参考: tutsplus）。
適切である場合は、header要素やfooter要素やnav要素やaside要素のようなHTML5のセマンティックな要素を使ってください。
ボディテキストにはp要素を使い、決して意味も無くdiv要素を使わないでください。
i要素やb要素より、em要素やstrong要素で意味を加えて使ってください。見た目のためには使わないようにします。
フォームではlabel要素を使ってください。
テキストと要素を同じ子要素として記述すると、レイアウトでバグになる傾向があります。
```
<div>Name: <input type="text" id="name"></div>
```
これはもっと正しく記述すると、こうなります。
```
<div>
  <label for="name">Name:</label><input type="text" id="name">
</div>
```
これはボーナスの効果があります。ラベルをクリックすると入力要素にフォーカスが自動であたります。これは特にチェックボックスとラジオボタンに役立ちます。

レイアウト

繰り返しになりますが、HTMLは見た目のスタイルのためではなく、コンテンツに意味と構造を加えるために使われるべきです。

p要素はレイアウトのためでなく、テキストのために使ってください。p要素はブラウザのスタイルシートでマージンが適用されたスタイルを持っています。
br要素は行をたくさん空けるために使わないでください。br要素はテキストの中で改行するために使用されるもので、スペースをたくさんとりたい時はCSSで指定してください。
hr要素は水平の線を書くために使わないでください。その場合、CSSのboderプロパティが賢い選択です。hr要素は主題の区切りを意味する要素です。
不必要にたくさんのdivを使わないでください。W3CのHTML仕様によると、div要素は「他のどのような要素も適切ではない場合の最後の頼みの綱である」と記述されています（参考: Six Revisions）。img要素やlink要素などのインライン要素は、div要素で内包するのではなく、「display: block;」を使いブロック要素にしてスタイルするとよいでしょう。
不必要にブロックレベル要素をつくるためにdivで内包するのを避けるために、どの要素がブロックレベルであるか知っておいてください。例えばdiv要素の中にリスト要素を内包する必要はありません。
table要素をレイアウトのために使わないでください。table要素は表のために使います。
最近はFlexboxが広く使用されています。
CSSのpaddingはパディングのために、marginはマージンのために使ってください。ボックスモデルはしっかりと理解しておくべきです（参考: W3C Box model）。
マージンの使い方は決めておいてください。上や左よりも、下や右にマージンを加える方がうまくいくことが多いです。何をするにしても、上と下、左と右をミックスして使うのは避けたほうがよいでしょう。最後についてしまった余分なマージンを除くには、セレクタ（last-of-type）を使います。

HTML Eメール

Eメールのためのコーディングは、Webページのためのコーディングとは異なります。ここでは詳細を述べませんが、イメージとしては1990年代後半のコーディングに似ています。テーブルでレイアウトをし、つっかえ棒のGIF画像を使い、画像を切れ切れにしたり、たくさんのマイナーなハックを使用することもあります。Eメールの基本的なテンプレートは、MailChimpのテンプレートを見てください。

CSS

この論文はHTMLについてです。ここではCSSの基本的なアドバイスを少しだけおこないます。

インラインCSSは避けてください。
idの使用は一度のみです。
複数の要素にアクセスする時はclassを使用します（参考: BEMシンタックス）。可能であれば、子要素にclassを付与するのではなく、親要素にclassを付与してください。
```

<ul>
  <li class="ingredient">Basil</li>
  <li class="ingredient">Pine nuts</li>
  <li class="ingredient">Garlic</li>
</ul>
```
親要素にclassを一つ加えるだけで、複数の子要素にアクセスできます。
```

<ul class="ingredients">
  <li>Basil</li>
  <li>Pine nuts</li>
  <li>Garlic</li>
</ul>
```

アクセシビリティ

HTMLと相互に作用するために使用されるデバイス、コンテクスト、インプットメソッドの範囲を考えてみましょう。

セマンティックな要素を使ってください。
代替となるフォールバックを用意してください。例えば、track要素にはキャプションや副題などを加え、video要素やaudio要素の次候補としてテキストや画像を用意します。動画にはポスターイメージを使うとよいでしょう。すべての画像にはalt属性を加え、もし装飾のためなら、alt属性は空の値で構いません。
link要素にはtitle属性を加えてください。
input要素にはtype属性とplaceholder属性を使ってください。
ARIA属性を使ってください（参考: HTML5 Doctor）。

ボーナスの提案

「<」「&」のようなHTMLで特別な意味をもつ文字はコード化してください。「<」は「<」、「&」は「&」と記述します。
逆に不必要な文字はコード化しないでください。例えば、「4-5」で期間を表現する「enダッシュ」、「¢」「€」などの通貨シンボル。
もしコードで何が起きているか明白でないなら、コメントを加えてください。そしてコメントされているコードは再リファクタリングの必要を示すということを心に留めておいてください。
コードにはそれが意味をなすように、例えば見出しなど、記述してください。もし大文字で見せたい場合はCSSで指定できます。あなたがテキストをコピーして利用するとき、全部大文字のテキストを必要としますか？
```
<h4>W3C Web Accessibility Initiative ARIA guidance</h4>
```
CSSはこうなります。
```
h4 {
  font-variant: small-caps;
}
```

最後に

あなたが何をするとしても、テストは忘れないでください！

ワークフローや実装のプロセスに、HTMLのテストを含めるとよいでしょう。大きいスクリーンや小さいスクリーンなど、さまざまなデバイスでページを表示してください。LynxのようなテキストブラウザやChromeVoxのようなスクリーンリーダーでもあなたのコンテンツが利用できるようにするのを忘れずに。変化するモニターに、ChromeのDevice Mode & Mobile Emulationのようなエミュレーターを使ってもよいでしょう。Page SpeedやWebPageTestや他のツールを実装の前か後にテストを自動化するためにワークフローと統合することができます。