on:2018年1月18日sponsorsHTML5でWebページを作成する時のベースになる必要最小限の構成で記述されたHTML5のテンプレートを紹介します。スニペットに登録しておくと、便利ですね。Boilerplateのテンプレートを日本語化しました。サブライセンス可です。「.no-js」のclass「.no-js」はModernizeの機能で、JavaScriptが無効(.no-js)であるか、有効(.js)であるかに基づいて、簡単にスタイルを加えることができるように用意されています。lang属性lang属性には言語コードを指定します。日本語を指定する時は、「ja」と記述します。lang="ja">titleタグとmetaタグの順序titleタグとmetaタグの順序は重要です。文字コードの指定(charset)文字コードの指定は、ドキュメントの最初の1,024bytes以内に含まれている必要があります。StandardIEで文字化けを防ぐため、titleタグのような文字データの前に記述します。Code互換性機能(x-ua-compatible)「IE=edge」を指定して、IEの最新バージョンの標準モードで表示させます。この指定は、titleタグと他のmetaタグ以外より前に記述します。descriptionの値には、ページの簡単な説明を記述します。この説明はGoogleなどの検索結果に表示されるスニペットの一部として使用されます。モバイルのビューポートmetaタグでのビューポートの指定は、いくつか異なる選択があります。ここでは一般的に使われるシンプルな指定を行っています。initial-scale=1">他の指定方法は、下記を参考にしてください。マニフェストの簡単なファイルが含まれています。マニフェストとは、アプリケーションがデバイスのホーム画面に表示される様子、そのコンテキストで起動されたときの外観、起動時の動作を制御するためのシンプルなJSONファイルです。これはHTMLから次のようにリンクされています。href="site.webmanifest">site.webmanifestにはアプリケーションの基本的な使い方を示すための定義が含まれています。apple-touch-icon.png)は、サイトのルートディレクトリにアップロードします。favicon.icoはルートに配置されている場合、ブラウザによって自動的に選択されます。head内に記述する要素HTMLのhead内に記述する要素は、以前の記事をご覧ください。エリアは、ほぼ空っぽです。これはWebページでもWebアプリでも、どちらでも制作できるように意図的にしています。IE9未満用のメッセージ2016年1月にIEの古いバージョンはOSレベルでサポートが打ち切られました。IE8以下をサポートするOSはなくなり、VistaがIE9をサポートするだけで、他はIE11がサポートブラウザとなります。サポートポリシー変更の重要なお知らせ補足2017年4月11日にVistaのサポートが終了したため、エンドユーザー用のブラウザはIE11がサポート対象になります。サポートは終了しましたNormalizenormalize.cssは、ブラウザごとに異なるHTMLの各要素のスタイルを消去(Reset)するのではなく、スタイルを正常化(Normalize)します。v6.0.0がリリース、いくつかの重要な変更点に注意ModernizrModernizrはブラウザの機能に合わせて、使用可能なJavaScriptやCSSを判別し、利用することができます。このテンプレートではModernizrをカスタマイズして使用しており、「.no-js」でJavaScriptが無効な環境な場合のスタイルを定義します。PolyfillsについてもしPolyfillsを含める必要があるなら、他のJavaScriptの前にロードするように記述します。cdn.polyfill.ioのようなCDNを利用するのであれば、下記のように記述します。src="js/main.js"></script></body>もしPolyfillsをインクルードさせるだけなら、js/plugins.jsに含めることもできます。jQueryはCDNでjQueryはCDNで利用します。指定する際は必ずバージョンを明記します。オフラインで制作する時は、ローカルのファイルを指定してください。Analytics元のコードが一つ古い記述だったので、最新のコードに変更しました。※2018年1月現在の最新です。