IEにHTML5やCSS3を対応させる

HTML5やCSS3を使ってサイトを作ったとき、どうしてもIE8などの古いブラウザでもちゃんと表示させたいという状況になった場合の対処法を紹介します。これを使えば、ある程度同じ感じで表示させることができます。

スクリプトを利用する

IE8以前のバージョンでは、HTML5の要素は認識せず、無視されていまいます。そこで「html5shiv.js」というスクリプトを使って、HTML5の要素を認識するようにします。まずは、html5shivのページでファイルをダウンロードします。そして、以下のように条件付きコメントを使って読み込みます。

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

これで、IE9未満のブラウザの場合は「html5shiv.js」を読み込んでHTML5の要素を認識するようになります。ちなみに「html5shiv.js」はダウンロードしなくても直接、読み込むこともできます。

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

CSS3を反映させる

「html5shiv.js」で大体の体裁を整えたら、今度は、メディアクエリーを反映させます。css3-mediaqueriesのサイトに行って「css3-mediaqueries.js」というファイルをダウンロードして、HTMLに読み込ませます。

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

これで、IE9未満のブラウザにもメディアクエリーを対応することができます。ただし、「css3-mediaqueries.js」はローカル環境では動作しないので、サーバーにアップ、もしくはローカルサーバーを設置したりして確認する必要があります。