HTML5テンプレートについて

このテンプレートはHTML5を利用する際の準備メモがわりで、Initializrのファイルを参考にカスタマイズしたものです。(2011-11-11)

HTML5を使うための初期準備

HTML5を利用するには少し準備が必要です。

HTML5とは？

HTML5は最近のWeb技術にあわせて、タグ要素が追加等されたHTMLの最新版にあたるものです。レガシーブラウザではHTML5の新しいタグが認識できないため、そのままでは利用することができません。この問題はJavascriptを利用して解決することができます。

レガシーブラウザでHTML5のタグを認識させるには？

レガシーブラウザでHTML5のタグを認識させるためには、JSライブラリを利用するのが最も簡単な対処方法です。

有名なものでは「html5shiv」というJSライブラリがあり、これをHEAD内に読み込むだけで、レガシーブラウザでもHTML5のタグを認識させることができます。

認識させるだけではレイアウトが崩れる

HTMLタグはそれぞれ初期要素を持っています。例えばHTML5で追加されたarticleタグはブロック要素です。ですが、JSライブラリを利用するだけでは、HTML5に対応していないブラウザはacticleタグをブロック要素とは認識してくれません。この要素を持たせるためにCSSで指定する必要が有ります。


					article {
						display:block;
					}

HTML5の各タグの初期要素を追加し、各ブラウザの見栄えの差を整えるためのリセット用のCSSが、下記ページで紹介されています。これを利用すれば、HTML5に対応している・いないに関わらず、見栄えは変わらないようになります。

HTML5 Reset Stylesheet | HTML5 Doctor

JSライブラリの紹介

HTML5でサイトを構築する際によく利用するJSライブラリを紹介します。

html5shiv
EI9.js
DD_belatedPNG
Modernizr
css3-mediaqueries.js

『html5shiv』

機能: HTML5で追加されたタグに対応していないブラウザにタグを認識させてくれます。
ダウンロード先: http://code.google.com/p/html5shiv/

『EI9.js』

機能: HTML5で追加されたタグに対応していないブラウザにタグを認識させ、さらにIEの「position:fixed」「透過png」等利用できるようになります。
ダウンロード先: http://code.google.com/p/ie7-js/

『DD_belatedPNG』

機能: IE9.jsでは透過pngのbackground-repeatが利用できません。もしbackground-repeatを利用したい場合はこちらを利用しましょう。
ダウンロード先: http://www.dillerdesign.com/experiment/DD_belatedPNG/

『Modernizr』

機能: ブラウザのHTML5やCSS3の対応状況を検出してくれます。これを利用することで「localStorageに対応していない場合はメッセージを表示する」等の処理が簡単にできます。また「html5shiv」「respond.js(IE8以下でもMedia Queriesを利用することができます。)」「yepnope.js(各ブラウザHTML5のAPIの対応ごとに読み込むJSファイルを振り分けることができます。Modernizrで利用する場合はModernizr.loadを利用します。)」を含んだ状態でダウンロードできます。
ダウンロード先: http://www.modernizr.com/

『css3-mediaqueries.js』

機能: CSS3 Media Queriesに対応していないブラウザでもCSS3 Media Queriesを利用できるようになります。
ダウンロード先: http://code.google.com/p/css3-mediaqueries-js/