最新版!Webページを作成する時のベースになる、最小限の構成で記述されたHTML5のテンプレート

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

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

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

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

HTML5のテンプレート

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

HTML5のテンプレートの解説

「.no-js」のclass

「.no-js」はModernizeの機能で、JavaScriptが無効(.no-js)であるか、有効(.js)であるかに基づいて、簡単にスタイルを加えることができるように用意されています。

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 description

meta descriptionの値には、ページの簡単な説明を記述します。この説明はGoogleなどの検索結果に表示されるスニペットの一部として使用されます。

モバイルのビューポート

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

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

Webアプリ マニフェスト

このテンプレートには、Webアプリケーション マニフェストの簡単なファイルが含まれています。Webアプリケーション マニフェストとは、アプリケーションがデバイスのホーム画面に表示される様子、そのコンテキストで起動されたときの外観、起動時の動作を制御するためのシンプルなJSONファイルです。
これはHTMLから次のようにリンクされています。

site.webmanifestにはアプリケーションの基本的な使い方を示すための定義が含まれています。このファイルには、サイトやアプリケーションに関する詳細情報を記入する必要があります

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

アイコンのファイル(favicon.ico, apple-touch-icon.png)は、サイトのルートディレクトリにアップロードします。favicon.icoはルートに配置されている場合、ブラウザによって自動的に選択されます。

head内に記述する要素

HTMLのhead内に記述する要素は、以前の記事をご覧ください。

コンテンツ エリア

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

IE9未満用のメッセージ

2016年1月にIEの古いバージョンはOSレベルでサポートが打ち切られました。IE8以下をサポートするOSはなくなり、VistaがIE9をサポートするだけで、他はIE11がサポートブラウザとなります。

参考
Internet Explorer サポートポリシー変更の重要なお知らせ
補足
2017年4月11日にVistaのサポートが終了したため、エンドユーザー用のブラウザはIE11がサポート対象になります。
Windows Vista のサポートは終了しました

Normalize

normalize.cssは、ブラウザごとに異なるHTMLの各要素のスタイルを消去(Reset)するのではなく、スタイルを正常化(Normalize)します。

参考
Normalize.css v6.0.0がリリース、いくつかの重要な変更点に注意

Modernizr

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

Polyfillsについて

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

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

jQueryはCDNで

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

Google Analytics

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

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

sponsors

top of page

©2018 coliss