[JS]HTML5でマークアップする際に「html5shiv」でIE下位バージョンにも対応させる｜jQueryプラグイン・ライブラリ｜WEBデザインの小ネタとTIPSのまとめサイト「ウェブアンテナ」

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

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

html5shiv HTML5 CSS3

スポンサード

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

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

目次

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

html5shiv.js のダウンロード

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

html5shiv.js の設置

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

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

1

2

3

<!--[if lt IE 9]>

<script src="./html5shiv.js"></script>

<![endif]-->

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

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

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

1

2

3

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

display: block

}

スポンサード

コメント

コメントを残すコメントをキャンセル