HTML5 の新要素を使うための準備

Posted
2012-05-27

HTML5から新しく使える要素が追加されましたが、古いブラウザ（IE8以下）は新要素に対応していない為、思ったように表示ができません。それを解決する為に、リセットCSSとJavascriptを読み込む必要があります。

古いブラウザでは、新要素のブロックレベル要素をインラインとして読み込んでしまう為あらかじめdisplay:block のスタイルを指定しなくてはいけません。

例）
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display:block;
}

こちらのページ「HTML5 Reset Stylesheet | HTML5 Doctor」で公開されているHTML5 のリセットスタイルシートを使わせて頂くと便利です。

古いブラウザでは、新要素を認識出来ない為に、認識させる事ができるJavescript html5.jsを読み込む必要があります。IE8以下に適用するように、公開されているものを直接読み込むか、ダウンロードして読み込みます。

CDN で読み込むには下記のように記入します。

<!--&#91;if lt IE 9&#93;>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<!&#91;endif&#93;-->

ダウンロードして読み込むには下記のように記入します。

<!--&#91;if lt IE 9&#93;>
<script src="dist/html5shiv.js"></script>
<!&#91;endif&#93;-->

正しく書けているか、下記のページで構文チェックできます。
(X)HTML5 validation results for about:blank

ブックマークレット版もあるようです。便利ですね。

memocarilog