解 説

制作課題の作品を夢中で作成しているとついつい自分のPC環境が標準になってしまいます。
自分がChromeだからChromeで表示されれば満足してしまいがちです。
これではIE対策を忘れてしまいす。IE8は2014年4月時点のデスクトップブラウザシェアの1位で20.9%です。
常に色々なブラウザで確認することが重要です。

今回はHTML5とCSS3のIE8対策を手軽に行う方法の紹介です。

HTML5を使用した場合のIE8以下対策

IE8以下はHTML5のタグに対応していません。そのためHTML5の新しいタグを認識できずにレイアウトが崩れます。
これに対応するには色々方法がありますが、html5shivを使用するのが手軽です。
html5shivを利用するにはライブラリが必要です。
html5shivのサイトからデータをダウンロードします。

使い方は「html5shiv.js」を当該ファイルと同じ階層に置いた場合は、使用したいページのhead内に以下を記述します。

これでHTML5のタグを認識してくれるようになります。

CSS3を使用した場合のIE8以下対策

IE8以下は多くのCSS3に対応していません。
border-radius、box-shadow、linear-gradientを可能にする程度ですが、「PIE.htc」を使用すると手軽に解決できます。

「PIE.htc」のダウンロード先

「PIE.htc」ファイルを任意のフォルダに置き、CSSに以下の記述をおこないます。
ポイントはCSS3を使用したセレクタ内に記述する事と、ファイルのパスはhtml側からのパスを記述する事です。

「PIE.htc」を使用した場合時々不具合が出る場合があります。
「PIE.htc」の不具合はこちらを参考にしてください。