最新版！Webページを作成する時のベースになる、最小限の構成で記述されたHTML5のテンプレート
Post on:2018年1月18日
sponsors
HTML5でWebページを作成する時のベースになる必要最小限の構成で記述されたHTML5のテンプレートを紹介します。
スニペットに登録しておくと、便利ですね。
イラスト: Girls Design Materials
HTML5 Boilerplate -GitHub
HTML5のテンプレート
HTML5 Boilerplateのテンプレートを日本語化しました。
オリジナルライセンスで、商用利用、修正、配布、サブライセンス可です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<!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> |
HTML5のテンプレートの解説
「.no-js」のclass
「.no-js」はModernizeの機能で、JavaScriptが無効（.no-js）であるか、有効（.js）であるかに基づいて、簡単にスタイルを加えることができるように用意されています。
lang属性
lang属性には言語コードを指定します。
日本語を指定する時は、「ja」と記述します。
|
1 |
<html class="no-js" lang="ja"> |
titleタグとmetaタグの順序
titleタグとmetaタグの順序は重要です。
- 文字コードの指定（charset）
- 文字コードの指定は、ドキュメントの最初の1,024bytes以内に含まれている必要があります。
参考: HTML Standard - IEで文字化けを防ぐため、titleタグのような文字データの前に記述します。
参考: Google Code
- 文字コードの指定は、ドキュメントの最初の1,024bytes以内に含まれている必要があります。
- 互換性機能（x-ua-compatible）
- 「IE=edge」を指定して、IEの最新バージョンの標準モードで表示させます。
- この指定は、titleタグと他のmetaタグ以外より前に記述します。
参考: Microsoft Developer Network
meta description
meta descriptionの値には、ページの簡単な説明を記述します。この説明はGoogleなどの検索結果に表示されるスニペットの一部として使用されます。
モバイルのビューポート
metaタグでのビューポートの指定は、いくつか異なる選択があります。ここでは一般的に使われるシンプルな指定を行っています。
|
1 |
<meta name="viewport" content="width=device-width, initial-scale=1"> |
他の指定方法は、下記を参考にしてください。
Webアプリ マニフェスト
このテンプレートには、Webアプリケーション マニフェストの簡単なファイルが含まれています。Webアプリケーション マニフェストとは、アプリケーションがデバイスのホーム画面に表示される様子、そのコンテキストで起動されたときの外観、起動時の動作を制御するためのシンプルなJSONファイルです。
これはHTMLから次のようにリンクされています。
|
1 |
<link rel="manifest" href="site.webmanifest"> |
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）します。
Modernizr
Modernizrはブラウザの機能に合わせて、使用可能なJavaScriptやCSSを判別し、利用することができます。
このテンプレートではModernizrをカスタマイズして使用しており、「.no-js」でJavaScriptが無効な環境な場合のスタイルを定義します。
Polyfillsについて
もしPolyfillsを含める必要があるなら、他のJavaScriptの前にロードするように記述します。
cdn.polyfill.ioのようなCDNを利用するのであれば、下記のように記述します。
|
1 2 3 4 5 6 7 |
<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> |
もしPolyfillsをインクルードさせるだけなら、js/plugins.jsに含めることもできます。
jQueryはCDNで
jQueryはCDNで利用します。また、指定する際は必ずバージョンを明記します。
オフラインで制作する時は、ローカルのファイルを指定してください。
Google Analytics
元のコードが一つ古い記述だったので、最新のコードに変更しました。
※2018年1月現在の最新です。
sponsors
