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

Post on:2018年1月18日

HTML5のテンプレート

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

<!doctype html>
<html class="no-js" lang="">
    <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, shrink-to-fit=no">

        <link rel="manifest" href="site.webmanifest">
        <link rel="apple-touch-icon" href="icon.png">
        <!-- favicon.icoはルートディレクトに配置 -->

        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>
        <!-- IE9未満への配慮が不要であれば、削除 -->
        <!--[if lte IE 9]>
            <p class="browserupgrade">IE9未満用のメッセージ</p>
        <![endif]-->

        <!-- ここにサイトやアプリのコンテンツ -->
        <p>コンテンツ</p>

        <script src="js/vendor/modernizr-3.5.0.min.js"></script>
        <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
        <script>window.jQuery || document.write('<script src="js/vendor/jquery-3.2.1.min.js"><\/script>')</script>
        <script src="js/plugins.js"></script>
        <script src="js/main.js"></script>

        <!-- Google Analytics: UA-XXXXX-YをあなたのIDに変更 -->
        <script>
            window.ga=function(){ga.q.push(arguments)};ga.q=[];ga.l=+new Date;
            ga('create','UA-XXXXX-Y','auto');ga('send','pageview')
        </script>
        <script src="https://www.google-analytics.com/analytics.js" async defer></script>
    </body>
</html>

<!doctype html>

<head>

</head>

<body>

<!--[if lte IE 9]>

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

<![endif]-->

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

window.ga=function(){ga.q.push(arguments)};ga.q=[];ga.l=+new Date;

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

</script>

</body>

</html>

HTML5のテンプレートの解説

「.no-js」のclass

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

lang属性

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

<html class="no-js" lang="ja">

1	<html class="no-js" 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 description

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

モバイルのビューポート

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

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

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

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

Webアプリマニフェスト

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

<link rel="manifest" href="site.webmanifest">

1	<link rel="manifest" href="site.webmanifest">

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

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

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

head内に記述する要素

HTMLの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を利用するのであれば、下記のように記述します。

    <script src="js/vendor/modernizr-3.5.0.min.js"></script>
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
    <script>window.jQuery || document.write('<script src="js/vendor/jquery-3.2.1.min.js"><\/script>')</script>
    <script src="js/plugins.js"></script>
    <script src="js/main.js"></script>
</body>