HTML5でWebページを作成する時用の必要最小限をまとめたシンプルなテンプレート（IE8以下も配慮）
sponsors
HTML5でWebページを作成する時に役立つ、シンプルなブランクのテンプレートを紹介します。
A Generic HTML5 Template
HTML5 Template -GitHub
まずは、テンプレートの完成形からご紹介。
HTML5のテンプレート
HTML5で作成する時用の必要最小限の構成になっています。
<!DOCTYPE html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <meta charset="utf-8"> <meta name="description" content=""> <meta name="author" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href=""> <!--[if lt IE 9]> <script src="//cdn.jsdelivr.net/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]--> <link rel="shortcut icon" href=""> </head> <body> <!-- Place your content here --> <!-- SCRIPTS --> <!-- Example: <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> --> </body> </html>
続いて、コメント版。
HTML5のテンプレート（コメント版）
※コメントは訳したもので、一部、説明を加えました。
<!DOCTYPE html>
<head>
<!-- IE8+に対して「IE=edge」と指定することで、利用できる最も互換性の高い最新のエンジンを使用するよう指示できます
参考: https://www.modern.ie/en-us/performance/how-to-use-x-ua-compatible -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- ページのタイトルを記述 -->
<title></title>
<!-- パフォーマンスのために使用する文字のエンコーディングを記述
参考: https://developers.google.com/speed/docs/best-practices/rendering#SpecifyCharsetEarly -->
<meta charset="utf-8">
<!-- content属性にページの紹介文を記述 -->
<meta name="description" content="">
<!-- content属性にページの著者情報を記述 -->
<meta name="author" content="">
<!-- モバイル端末への対応、ページをビューポートの幅に合わせてレンダリング（Android, iOS6以降）
ズームを許可しない設定「user-scalable=no」は加えない -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- スタイルシートはできるだけ早くレンダリングされるため、HTMLドキュメントの上の方に記述
href属性にスタイルシートファイルのURIを記述 -->
<link rel="stylesheet" href="">
<!-- IE8以下用に2つのスクリプトを記述
html5shiv.js: IE8以下にHTML5の要素を認識するようにさせる
respond.js: IE8以下にMedia Queriesの代替え機能を提供 -->
<!--[if lt IE 9]>
<script src="//cdn.jsdelivr.net/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- href属性にファビコンファイルのURIを記述 -->
<link rel="shortcut icon" href="">
<!-- コメントアウトしてあるコードは、iOS/Android用のアイコン指定 -->
<!--
<meta name="mobile-web-app-capable" content="yes">
<link rel="icon" sizes="196x196" href="">
<link rel="apple-touch-icon" sizes="152x152" href="">
-->
<!-- スクリプトでブロッキングを起こさないものはここに記述
可能であれば「async（文書の読み込みが完了した時点でスクリプトを実行）」を使用
Example: <script src="" async></script> -->
</head>
<body>
<!-- コンテンツを記述 -->
<!-- スクリプトでブロッキングを起こすものはここに記述
ブロッキングを起こす原因としては、CSSのセレクタ操作（IE）、負荷の高いDOM操作、多数のスクリプトなど -->
<!-- SCRIPTS -->
<!-- 例: <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> -->
</body>
</html>
補足：スクリプトの配置
スクリプトはページのレンダリングをブロックするため、ドキュメントの一番下、</body>の上に記述することは良い習慣です。これだけでWebページのパフォーマンスはだいぶ改善されます。
しかし、一番下に記述することは常に可能というわけではありません。例えばページのレンダリングに関するスクリプトは上に記述しておかないとページのレンダリングが遅くなります。そういった場合は可能であれば、「async」を加え並列にロードするように指定しておきます。
<script src="my-script.js" async></script>
補足：metaタグのviewportの指定
スマフォなどの小さいサイズのスクリーン用に下記を記述します。
<meta name="viewport" content="width=device-width, initial-scale=1">
この指定は、ページをデバイスのビューポートの幅に合わせて、コンテンツの幅を調整します。
補足：IE9と以下のサポート
IEも最新のバージョンを使用するようにさまざまなキャンペーンを行っていますが、実際にはIE9や8以下を使用する人がまだ多くいます。HTML5の新しい要素とMedia Queriesは、html5shiv.jsとrespond.jsを加えることで問題ないでしょう。テンプレートでは信頼できる公共のCDNを利用しています。また条件付きコメントを使い、IE8以下のみロードするようにしています。
IE用にはもう一つ、次のmetaタグを加えています。
<meta http-equiv="X-UA-Compatible" content="IE=edge">
これはIEで利用できる最も互換性の高い最新のエンジンを使用するための指定です。古いIEを使用するユーザーがいなくなった時に、こういった固有のブラウザ用の記述がテンプレートから取り除かれることを望みます。
現状としては、少し余分のマークアップを加えるだけで、IE8以下でもHTML5の要素とMedia Queriesを利用できるということは、合理的な妥協点でしょう。
テンプレートの利用にあたって
テンプレートのライセンスはCC0 1.0で、個人でも商用でもクライアントの案件でも無料で利用できます。利用する際に、許可やコピーライトの明記などは必要ありません。
もし質問や気がついたことがあればメールしてください、とのことです。
sponsors
Post on:2014年7月7日