HTML5の基本を学べる、各要素のコメントでの解説が嬉しいシンプルなテンプレート -HTML5 Bones
Post on:2013年1月8日
sponsors
ゼロからあなた自身のページを作る時のガイドとして利用されることを目的とし、最小限の要素で構成されたHTML5の基本に忠実に作成したテンプレートを紹介します。
HTML5 Bones
HTML5 Bones -GitHub
HTML5 Bonesの構成
HTML5 Bonesは非常にシンプルで、jQuery, Modernizeなどは含まれていません。含まれている外部のライブラリは、クロスブラウザ用にNormalize.css、IE8以下用にHTML5をレンダリングさせるためのhtml5shivだけです。
使用している要素もページを作成する最小限の要素で構成されており、テンプレートを利用するにあたり各要素をどのように使うべきか、インラインでコメントで細かく説明されています。
下記に、そのインラインコメントを翻訳しました。
年末年始をまたいで制作者のIanさんとやり取りをしていたので、公開に時間がかかってしまいました。
ダウンロードできるファイルにはコメント有り版だけでなく、無し版も含まれています。
index.html
index.htmlは、v.1.3.1ベースです。
<!-- あなたのサイトで使用する言語を記入します、日本語ならja、英語ならen -->
<!-- 使用する文字コードを定義します、通常はutf-8 -->
<!-- ページのタイトルを記入 -->
<title>ページのタイトル</title>
<!-- ページの簡単な説明を記入 -->
<!-- モバイルデバイスのビューポートの定義をします、ページ幅=デバイスの幅にする場合は「initial-scale=1.0」にします -->
<!-- スタイルシートの定義、各ブラウザのエレメントの相違を吸収し有用なスタイルを付与する「normalize.css」を使用します -->
<!-- あなたのサイトで使用するスタイルシートを記入 -->
<!-- IE8以下用に「html5shiv.js」と「html5shiv-printshiv.js"」をインクルードします -->
<!--[if lt IE 9]><![endif]-->
<!-- ページの先頭には通常、ヘッダやロゴ、ナビゲーションを配置します -->
<!-- 「role="banner"」はページの主要な見出しやタイトルとしてセットします -->
<header>
<h1><abbr title="HyperText Markup Language 5">HTML5</abbr> Bones</h1>
<!-- 「role="navigation」はここにナビゲーションが含まれている時に加えます -->
<nav>
<!-- ナビゲーションはリスト要素だけでなく、サイト内をナビゲート可能にするリンクを含んでいるパラグラフでもよいです -->
</nav>
</header>
<!-- もしレイアウトにラッパーが必要なら、すなわちスタイルだけが目的なら、div要素で囲みます -->
<div class="wrap">
<!-- section要素は関連した見出しに分類されるコンテンツを囲むために使用します
メモ：section要素はarticle要素を含むことができ、逆もまた同様です -->
<!-- 「role="main"」はドキュメントの主要なコンテンツが含まれている時に加えます -->
<section>
<!-- これはセクションのヘッダで、見出しを含み、ナビゲーションはセクション内のためだけのものです -->
<header>
<h2>Getting Started</h2>
<!-- 「role="navigation"」はページナビゲーションが含まれている時に加えます -->
<nav>
<ul>
<li><a href="#introduction">Introduction</a></li>
<li><a href="#instructions">Instructions</a></li>
</ul>
</nav>
</header>
<!-- article要素はその名通り記事のことで、そして再利用可能なコンテンツを囲むために使用します -->
<article id="introduction">
<!-- ここではh3要素が一つだけのため、header要素は必要ありません -->
<h3>Introduction</h3>
<!-- コンテンツ -->
<p>Welcome to <abbr title="HyperText Markup Language 5">HTML5</abbr> Bones. This is a template that contains comments to aid you with setting up your <abbr title="HyperText Markup Language 5">HTML5</abbr> document.</p>
</article>
<!-- article要素はその名通り記事のことで、そして再利用可能なコンテンツを囲むために使用します -->
<article id="instructions">
<!-- ここではh3要素が一つだけのため、header要素は必要ありません -->
<h3>Instructions</h3>
<!-- コンテンツ -->
<ol>
<li>Read the comments in this template</li>
<li>Decide how you think your content may fit into the template</li>
<li>Start building your document</li>
</ol>
</article>
<!-- aside要素は主要なコンテンツに付加的であるが不可欠でないコンテンツを囲むために使用します、つまりaside要素が取り除かれても主要なコンテンツの意味が失われないということです -->
<!-- 「role "complementary"」は主要なコンテンツをサポートする情報を含んでいる時に加えます -->
<aside>
<!-- ここではh3要素が一つだけのため、header要素は必要ありません -->
<h3>Did you know?</h3>
<!-- コンテンツ -->
<p>The article and section elements cause a lot of confusion when people are trying to decide how and when to use them. The article: <a href="http://www.iandevlin.com/blog/2011/04/html5/html5-section-or-article">section or article?</a> might help you choose.</p>
</aside>
</section>
</div>
<!-- フッタには主にコピーライトや連絡情報を配置します、またnav要素には含まれないあなたのサイトで繰り返し利用されるであろうナビゲーションを含むこともできます -->
<!-- 「role="contentinfo"」は親ドキュメントに適合するメタデータが含まれている時に加えます -->
<footer>
<!-- コピーライトはsmall要素で配置します、time要素は2012が日付であることを明示するために使用します -->
<small>Copyright © 2013</small>
</footer>
<!-- Google Analytics - Optimized version by Mathias Bynens -->
<!-- See: http://mathiasbynens.be/notes/async-analytics-snippet -->
<!-- 「UA-XXXX-XX」をあなたのサイトIDに変更します -->
var _gaq=[['_setAccount','UA-XXXX-XX'],['_trackPageview']];(function(a,b){var c=a.createElement(b),d=a.getElementsByTagName(b)[0];c.src=("https:"==location.protocol?"//ssl":"//www")+".google-analytics.com/ga.js";d.parentNode.insertBefore(c,d)})(document,"script");
video.html
video.htmlは、v.1.3.1ベースです。
<!-- あなたのサイトで使用する言語を記入します、日本語ならja、英語ならen -->
<!-- 使用する文字コードを定義します、通常はutf-8 -->
<!-- ページのタイトルを記入 -->
<title>ページのタイトル</title>
<!-- ページの簡単な説明を記入 -->
<!-- モバイルデバイスのビューポートの定義をします、ページ幅=デバイスの幅にする場合は「initial-scale=1.0」にします -->
<!-- スタイルシートの定義、各ブラウザのエレメントの相違を吸収し有用なスタイルを付与する「normalize.css」を使用します -->
<!-- あなたのサイトで使用するスタイルシートを記入 -->
<!-- IE8以下用に「html5shiv.js」と「html5shiv-printshiv.js"」をインクルードします -->
<!--[if lt IE 9]><![endif]-->
<!-- video要素はブラウザにデフォルトのコントロールセットを表示し、ユーザーがビデオを開始する前に指定したポスターイメージを使用してビデオのメタデータ（時間など）を前もって伝えます
メモ：IE9/10は動画をロードするとポスターイメージを無視するので、サポートさせるために「preload="none」をセットします -->
<!-- クロスブラウザに対応させるため複数の動画のソースを提供します -->
<!-- MP4は、Chrome, Safari, IE9+, iOS, Android用です
古いAndroidもサポートするには、source要素のmp4は削除します -->
<!-- WebMは、FireFox and Opera用です（Chrome, IE9+も） -->
<!-- Oggは、Firefox3.5/3.6用です -->
<!-- swfは、HTML5のvideoをサポートしていないIE6/7用です
ここではGoogle Playerを使用し動画はmp4で提供します。高さと幅を記入 -->
<!-- 最後に、HTML5もFlashも利用できない環境用に動画ファイルのダウンロード可能なリンクを記述します -->
<a href="url-to-video.mp4">Download MP4 video</a>
<!-- フッタには主にコピーライトや連絡情報を配置します、またnav要素には含まれないあなたのサイトで繰り返し利用されるであろうナビゲーションを含むこともできます -->
<!-- 「role="contentinfo"」は親ドキュメントに適合するメタデータが含まれている時に加えます -->
<footer>
<!-- コピーライトはsmall要素で配置します、time要素は2012が日付であることを明示するために使用します -->
<small>Copyright © 2013</small>
</footer>
<!-- Android用に動画の設定をします -->
// UAがAndroidかどうかチェックします
var isAndroid = navigator.userAgent.toLowerCase().indexOf("android") > -1;
// Androidであれば、クリックで動画が再生されるように設定します
if (isAndroid) {
var video = document.getElementById("video");
video.addEventListener("click", function() { video.play(); }, false);
}
<!-- Google Analytics - Optimized version by Mathias Bynens -->
<!-- See: http://mathiasbynens.be/notes/async-analytics-snippet -->
<!-- 「UA-XXXX-XX」をあなたのサイトIDに変更します -->
var _gaq=[['_setAccount','UA-XXXX-XX'],['_trackPageview']];(function(a,b){var c=a.createElement(b),d=a.getElementsByTagName(b)[0];c.src=("https:"==location.protocol?"//ssl":"//www")+".google-analytics.com/ga.js";d.parentNode.insertBefore(c,d)})(document,"script");
sponsors
