HTML5でWebページを作成する時用の必要最小限をまとめたシンプルなテンプレート(IE8以下も配慮)

HTML5でWebページを作成する時に役立つ、シンプルなブランクのテンプレートを紹介します。

サイトのキャプチャ

A Generic HTML5 Template
HTML5 Template -GitHub

まずは、テンプレートの完成形からご紹介。

HTML5のテンプレート

HTML5で作成する時用の必要最小限の構成になっています。

続いて、コメント版。

HTML5のテンプレート(コメント版)

※コメントは訳したもので、一部、説明を加えました。

補足:スクリプトの配置

スクリプトはページのレンダリングをブロックするため、ドキュメントの一番下、</body>の上に記述することは良い習慣です。これだけでWebページのパフォーマンスはだいぶ改善されます。

しかし、一番下に記述することは常に可能というわけではありません。例えばページのレンダリングに関するスクリプトは上に記述しておかないとページのレンダリングが遅くなります。そういった場合は可能であれば、「async」を加え並列にロードするように指定しておきます。

補足:metaタグのviewportの指定

スマフォなどの小さいサイズのスクリーン用に下記を記述します。

この指定は、ページをデバイスのビューポートの幅に合わせて、コンテンツの幅を調整します。

補足:IE9と以下のサポート

IEも最新のバージョンを使用するようにさまざまなキャンペーンを行っていますが、実際にはIE9や8以下を使用する人がまだ多くいます。HTML5の新しい要素とMedia Queriesは、html5shiv.jsとrespond.jsを加えることで問題ないでしょう。テンプレートでは信頼できる公共のCDNを利用しています。また条件付きコメントを使い、IE8以下のみロードするようにしています。

IE用にはもう一つ、次のmetaタグを加えています。

これはIEで利用できる最も互換性の高い最新のエンジンを使用するための指定です。古いIEを使用するユーザーがいなくなった時に、こういった固有のブラウザ用の記述がテンプレートから取り除かれることを望みます。

現状としては、少し余分のマークアップを加えるだけで、IE8以下でもHTML5の要素とMedia Queriesを利用できるということは、合理的な妥協点でしょう。

テンプレートの利用にあたって

テンプレートのライセンスはCC0 1.0で、個人でも商用でもクライアントの案件でも無料で利用できます。利用する際に、許可やコピーライトの明記などは必要ありません。
もし質問や気がついたことがあればメールしてください、とのことです。

top of page

©2017 coliss