最新版!あらゆるWebページを作成する時に使える、必要最小限をまとめたHTML5のテンプレート

HTML5でWebページを作成する時のベースになる必要最小限の構成で実装されたHTML5のテンプレートを紹介します。

スニペットに登録しておくと、便利ですね。

HTML5のシンプルなテンプレート

HTML5 Boilerplate -GitHub
イラスト: Girls Design Materials

HTML5のテンプレート

HTML5 Boilerplateのテンプレートを日本語化しました。
ライセンスはMITライセンスで、商用利用、修正、配布、サブライセンス可です。

HTML5のテンプレートの解説

「.no-js」のclass

「.no-js」はModernizeの機能で、JavaScriptが無効な環境な場合のスタイルを加えることが可能です。

lang属性

lang属性には言語コードを指定します。
日本語を指定する時は、「ja」と記述します。

titleタグとmetaタグの順序

titleタグとmetaタグの順序は重要です。

  1. 文字コードの指定(charset)
    • 文字コードの指定は、ドキュメントの最初の1,024bytes以内に含まれている必要があります。
      参考: HTML Standard
    • IEで文字化けを防ぐため、titleタグのように文字データがある前に記述します。
      参考: Google Code
  2. 互換性機能(x-ua-compatible)
    • 「IE=edge」を指定して、IEの最新バージョンの標準モードで表示させます。
    • この指定は、titleタグと他のmetaタグ以外より前に記述します。
      参考: Microsoft Developer Network

モバイルのビューポート

metaタグでのビューポートの指定は、いくつか異なる選択があります。ここでは一般的に使われるシンプルな指定を行っています。

他の指定方法は、下記を参考にしてください。

ファビコンとタッチアイコン

アイコンのファイル(favicon.ico, apple-touch-icon.png)は、サイトのルートディレクトリにアップロードします。

Modernizr

Modernizrはブラウザの機能に合わせて、使用可能なJavaScriptやCSSを判別し、利用することができます。
このテンプレートでは「.no-js」を使い、JavaScriptが無効な環境な場合のスタイルを定義します。

Polyfillsについて

もしPolyfillsを含める必要があるなら、他のJavaScriptの前にロードするように記述します。
cdn.polyfill.ioのようなCDNを利用するのであれば、下記のように記述します。

もしPolyfillsをインクルードさせるだけなら、js/plugins.jsに含めることもできます。

コンテンツ エリア

テンプレートのコンテンツ エリアは、ほぼ空っぽです。
これはWebページでもWebアプリでも、どちらでも制作できるように意図的にしています。

IE9未満用のメッセージ

元のテンプレートでは「if lt IE 8」になっていた指定を「if lt IE 9」に変更しました。
2016年1月にIEの古いバージョンはOSレベルでサポートが打ち切られたためです。IE8以下をサポートするOSはなくなり、VistaがIE9をサポートするだけで、他はIE11がサポートブラウザとなります。

参考
Internet Explorer サポートポリシー変更の重要なお知らせ

もし、このコードが不要であれば、削除してテンプレートを利用してください。

jQueryはCDNで

jQueryはCDNで利用します。また、指定する際は必ずバージョンを明記します。
オフラインで制作する時は、ローカルのファイルを指定してください。

Google Analytics

元のコードが一つ古い記述だったので、最新のコードに変更しました。
※2016年3月版です。

参考
サイトに analytics.js を追加する -Google

sponsors

top of page

©2024 coliss