IE8でAJAX挿入されたHTML5要素を有効にする方法｜html5shivの使い方を解説

IE8でHTML5要素を有効にするにはhtml5shivが必要

Internet Explorer（特にIE6〜IE9）は、sectionやarticle、navといったHTML5の新しいセクショニング要素を認識できません。そのため、これらの要素をマークアップに使ってもCSSが正しく適用されず、レイアウトが崩れる原因となります。

この問題を解決するのが「html5shiv」というJavaScriptライブラリです。html5shivを読み込むことで、レガシーなInternet ExplorerでもHTML5のセクショニング要素が使用可能になり、IE6〜IE9向けの基本的なスタイリングも行えるようになります。

html5shivの読み込み方法

条件付きコメントを利用すると、IE9未満のブラウザにのみhtml5shivを読み込ませることができます。

<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
<![endif]-->

AJAXで挿入された要素への対応

AJAX呼び出しによってページ読み込み後にDOMへ追加されたHTML5要素についても、html5shivは自動的に処理します。これは、html5shivがdocument.createElementを拡張（パッチ）しており、動的に生成されるHTML5要素にもスタイルを適用できる仕組みになっているためです。そのため、AJAXでHTML5要素を挿入する場合でも、特別な追加処理なしにhtml5shivの恩恵を受けられます。

document.createElementでカスタム要素を作成する例

html5shivに頼らずとも、document.createElementを使って独自の要素を明示的に生成すれば、IEにその要素を認識させることができます。

var demo = document.createElement("demo");

demo.innerHTML = "Working!";
document.body.appendChild(demo);

このコードでは、「demo」というカスタム要素を作成し、テキストを設定した上でドキュメントに追加しています。IEは未知の要素に対してCSSを適用しないため、createElementで要素を明示的に生成することで、スタイリングの対象として認識させられるのです。

まとめ

• IE8などのレガシーIEでHTML5要素を使うにはhtml5shivを読み込むのが最も簡単です。
• AJAXで動的に挿入されたHTML5要素も、html5shivが自動的に処理します。
• 個別の対応が必要な場合は、document.createElementで要素を生成してIEに認識させる方法もあります。