[JS]HTML5でマークアップする際にhtml5shivでIE下位バージョンにも対応させる

jQueryプラグイン・ライブラリ

2012.08.222024.08.27

HTML5でマークアップをする場合、IE下位バージョン（8以下）がそもそもHTML5のタグが対応していない…という理由で、IE8以下でもHTML5のタグを使えるようにするためのjavascript html5shiv.jsを使う機会も多いと思います。

そこまでしてIE下位バージョンに対応させる必要があるか？については今回は置いておいて、html5shivの簡単な取り扱い方を紹介します。

html5shiv.js のダウンロード
html5shiv.js の設置
HTML5 の新要素をブロック要素として表示

html5shiv.js のダウンロード

Google Codeでhtml5shivのjavascriptファイルが公開されています。
html5shiv.js

html5shiv.js の設置

Google Codeから直接html5shiv.jsファイルを引き込む方法もありますが、これが原因で過去に痛い思いをしているので、個人的にはhtml5shivのjavascriptファイルをダウンロードしてから、js/フォルダなどに入れて<head>に設置するようにしています。

<!--[if lt IE 9]>
<script src="./html5shiv.js"></script>
<![endif]-->

<!--[if lt IE 9]>

<![endif]-->

HTML5 の新要素をブロック要素として表示

IE下位バージョン向けに、sectionなどのHTML5の新要素をブロック要素として表示させる（display:block）ことで、レイアウト崩壊を防ぎます。

header, footer, nav, section, article, figure, aside, hgroup, figure, figcaption {
	display: block
}

header, footer, nav, section, article, figure, aside, hgroup, figure, figcaption {

display: block

}