最近、新しいウェブサイトを立ち上げる場合、HTML5に対応していることが望まれます。でも、HTML5の複雑な仕組みを一から学ぶのに無駄な時間を費やしたくないですよね？

幸いなことに、HTML5のサンプルテンプレートが用意されているので、それを利用することができます。シンプルなフロントエンドのテンプレートで、これを使えば数分でHTML5のウェブサイトを作成できます。しかし、洗練されたフル機能のウェブサイトのベースとして使用できるほどパワフルでもあるのです。

このHTML5サンプルチュートリアルでは、テンプレートに含まれるもの、テンプレートの使用方法について知っておくべき基本的なこと、さらに勉強するためのリソースを紹介します。また、テンプレートを使って、数行のHTMLでごく基本的なサイトを作成する方法も紹介します。

html5サンプルテンプレート

HTML5サンプルからテンプレートをダウンロードすると、いくつかのフォルダとファイルが渡されます。以下はZIPファイルの内容です。

css---main.css---normalize.cssdocimgjs---main.js---plugins.js---vendor ---jquery.min.js ---modernizr.min.js.editorconfig.htaccess404.htmlbrowserconfig.xmlfavicon.icohumans.txticon.pngindex.htmlrobots.txtsite.webmanifesttile.pngtile-wide.png

ここでは、テンプレートのすべての要素をチェックするのではなく、基本的な要素のみをチェックします。しかし、すべてのファイルを使用するためのリソースを確保するために、まずはヘルプドキュメントから始めます。

html5 サンプルヘルプファイル

プロトタイプは、GitHubにホストされているヘルプドキュメントを集めています。技術的な質問があるときや、なぜそのような設計になっているのかを知りたいときに、とても役に立ちます。

ドキュメントのほぼすべてが、テンプレートのdocフォルダに含まれています。サンプル文書サイトの構築方法を理解するのに便利なMarkdown (.md) ファイルが多数表示されます。

GMから全てに目を通し、そこから他のドロップファイルへのリンクを辿りたい方。特定の問題について助けを求めている場合は、関連しそうなドキュメントを探すとよいでしょう。

html5サンプルファイルのcssからスタート

HTML5のサンプルテンプレートには、main.cssとnormalize.cssという2つのCSSファイルが付属しています。

2つ目のファイルnormalise.cssは、異なるブラウザー間で一貫した方法で要素をレンダリングするのに役立ちます。この仕組みについて詳しく知りたい方は、normalisation.cssのGitHubプロジェクトをチェックしてみてください。

一方、メインの.cssには、CSSでサイトをフォーマットするために必要なコードを入力することができます。テンプレートに含まれる標準CSSは、開発者やHTML5サンプルコミュニティによる研究の結果、生まれたものです。読みやすく、さまざまなブラウザーでうまく表示されます。

独自のCSSを追加したい場合は、作者のカスタムスタイルのセクションに追加することができます。

基本的なCSSには、便利なヘルパークラスも多数含まれており、中には標準ブラウザやスクリーンリーダー（またはその組み合わせ）から項目を隠すものもある。

また、main.cssには、レスポンシブデザインへの対応や、便利な印刷設定もあります。

これらの項目は、CSSのコメントで明確に説明されています。

一般的には、基本的なCSSから始めるとよいでしょう。

テンプレートに独自のhtmlを追加する

サンプルファイルは、404.HTMLとindex.htmlの2つのHTMLファイルから構成されています。

インデックスページは、トップページを作成する場所です（シンプルなシングルページマシンを作成する場合は、唯一のページを作成します）。

ブラウザでインデックスページを開くと、一行のテキストが表示されます。しかし、HTMLを見ることで、コードの中に隠された多くのことが見えてくる。Google Analyticsのコード（"UA-XXXX-Y "というテキストを探し、独自のトラッキングコードに置き換える）だけが、本当に心配する必要のあるものなのです。

インデックスページの残りのHTMLには、ウェブアプリケーションに関する情報、古いブラウザからの通知、便利なJavaScriptが含まれています。

しかし、これらの情報をあらかじめ入力しておくことで、HTML5を最大限に活用するための準備を整えることができます。

ページを作成するには、文書 **HTML のタグの間に入ります。 ここでは、私自身の基本的な情報を追加します。

さらにページを作るには？ このファイルのコピーを作り、名前を変えておけば、すべてのHTMLをコピー＆ペーストする必要がありません。

404ページをカスタマイズしたい場合は、HTMLファイルを変更するだけです。404ページに何を載せたらいいのかわからない？優れた404ページのデザイン例をご覧ください。

ファビコン（およびその他のアイコン）の追加

ファビコンを交換したい場合は、favicon.icoを交換する必要があります。

まだお持ちでない場合は、作成する必要があります。オンラインのファビコンジェネレータを使用するか、自分でデザインすることもできます。16×16ピクセルで、ファイルタイプが.icoであることを確認してください。

ファビコンにアイデアを盛り込むのは良いアイデアです。これらの有名なヒントを参考にして、ブレインストーミングを行ってください。新しいファビコンを追加する際に、アイコンファイルがあることを確認してください。

サイトのルートには、icon.png、tiled.png、tiled-width.pngの3つの画像があります。 これらは何のためにあるのでしょうか？

• Icon.pngは、Apple touc**のロゴに使用されています。Webアプリケーションを構築した場合、iPhoneやiPadのユーザーがアプリケーションをホーム画面に追加したときに、このアイコンを使用します。
• Tiled.pngとTile-Wide.pngはWindowsの「ピン」機能で使用されており、Windows 10では表示されます。

これらのすべてのケースにアイコンを提供することは良いアイデアです。しかし、ウェブアプリケーションを構築しないのであれば、優先順位は低くなるかもしれません。

機能追加

HTMLとファビコン（および組み込みたいCSS）を追加したら、サイトを公開する準備が整いました。それくらい、HTML5のサンプルファイルは使い勝手がいいんです。それをサーバーにアップロードして完了です。

私たちのページはこんな感じです。

ご覧のように、わずか数行のテキストで、（少し面倒ではありますが）十分に機能するホームページが出来上がりました。大したことはないが、数分しかかからなかった。そして、HTML5による高い拡張性を備えています。それが、サンプルテンプレートの力です。

しかし、あなたが望むなら、サンプルテンプレートでできることはもっとたくさんありますし、何か特定のものを探しているなら、ヘルプドキュメントで見つかる可能性が高いです。

HTML5で何ができるのかわからないけど、知りたいという方には、ウェブデザインのチュートリアルがたくさんあります。