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

Post on:2016年9月1日

HTML5のテンプレート

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

<!doctype html>
<html class="no-js" lang="ja">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>タイトル</title>
        <meta name="description" content="説明文">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="apple-touch-icon" href="apple-touch-icon.png">
        <!-- アイコンのファイルはルートディレクトに配置 -->

        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/main.css">
        <script src="js/vendor/modernizr-2.8.3.min.js"></script>
    </head>
    <body>
        <!--[if lt IE 9]>
            <p class="browserupgrade">IE9未満用のメッセージ</p>
        <![endif]-->

        <!-- ここにコンテンツ -->
        <p>コンテンツ</p>

        <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
        <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.12.4.min.js"><\/script>')</script>
        <script src="js/plugins.js"></script>
        <script src="js/main.js"></script>

        <!-- Google Analytics: UA-XXXXX-YをあなたのIDに変更 -->
        <script>
        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
        })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

        ga('create', 'UA-XXXXX-Y', 'auto');
        ga('send', 'pageview');
        </script>
    </body>
</html>

<!doctype html>

<head>

</head>

<body>

<!--[if lt IE 9]>

<p class="browserupgrade">IE9未満用のメッセージ</p>

<![endif]-->

<p>コンテンツ</p>

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){

(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)

})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXX-Y', 'auto');

ga('send', 'pageview');

</script>

</body>

</html>

HTML5のテンプレートの解説

「.no-js」のclass

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

lang属性

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

titleタグとmetaタグの順序

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

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

モバイルのビューポート

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

<meta name="viewport" content="width=device-width, initial-scale=1">

1	<meta name="viewport" content="width=device-width, initial-scale=1">

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

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

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

Modernizr

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

Polyfillsについて

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

    <script src="https://cdn.polyfill.io/v1/polyfill.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script>
    <script src="js/plugins.js"></script>
    <script src="js/main.js"></script>
</body>

</body>

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

コンテンツエリア

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

IE9未満用のメッセージ

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