HTML5で作ったWebサイトをIE8でも崩れないようにする方法
当サイトではアフィリエイト広告を利用しています。
Windows8が登場しWindows XPのサポート終了まであと1年（2014年4月9日がリミット）となったタイミングですから、今更感たっぷりな感じですけど、最近作ったサイトで引っ掛かったので自分のメモとして。
すっかり忘れてのは自分の環境を新しくしてWindows XPの環境が全くなくなってしまし、チェック環境がなくなったからなんですけど、シェアを見るとまだまだ残ってはいるんですよね^^
まあ反省というか言い訳のようなことはこの辺りにして、具体的に何をすればいいのかはこれね。
JavaScriptを使ってhtml5を認識させる
一番簡単な方法は下記のコードをHTMLの
[code]<!–[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]–>[/code]
Google Codeさんに置いてある「html5.js」を読み込む流れです。
ただこれは一つ前の方法で、現在はGoogle Codeから「html5shiv.js」をダウンロードして自分の使っているサーバにアップロードする方法が推奨されています（「html5.js」を読み込む方法もまだ使えます）。
簡単な流れはこんな感じ
１、Google Codeのhtml5shivのページにアクセス
２、zipファイル「download html5shiv」をダウンロード
2013年5月10日時点のファイル名は「aFarkas-html5shiv-3.6.2-11-ge4aee47.zip」
３、ダウンロードしてファイルを解凍
４、解答したフォルダの中にあるdistフォルダ内にある「html5shiv.js」もしくは「html5shiv-printshiv.js」をサーバにアップロード
５、「html5.js」の読み込み同様にIE9のコメントアウトを付け
記載例
[code]<!–[if lt IE 9]>
<script src="任意のディレクトリ名/html5shiv.js"></script>
<![endif]–>[/code]
[code]<!–[if lt IE 9]>
<script src=<"任意のディレクトリ名/html5shiv-printshiv.js"></script>
<![endif]–>[/code]
「html5shiv.js」と「html5shiv-printshiv.js」の違い
印刷関連のサポートがあるかないかです（「html5shiv-printshiv.js」が印刷もサポート）。
細かい検証が必要かもしれませんが、ファイル容量もそれほど大きなものではないので、「html5shiv-printshiv.js」を使用すれば問題はないと思います。
html5の新要素をブロック要素にすることも忘れないように
JavaScriptを読み込むことで、HTML5を使用できるようになりましたが、html5の新要素はインライン要素として認識されてしまうため、CSSでブロック要素に変更してあげる必要があります。
なんとも面倒な話ですが、この設定を行なってもIE9では変化はありませんので、デフォルトで使うCSSに記載しても大丈夫です。
[css]article, aside, figure, figcaption, details, footer, header, hgroup, nav, section, summary {
display:block;
}[/css]
IE8は徐々に消えていく運命にあるとは思いますが、企業系のパソコンではまだまだWindows XPは残るでしょうし、ビジネスでサイトを作る場合、最終決済を行うのは企業の担当者になることが多いので、まだまだ対策を講じる必要はあると思います。
って、自分が完全にミスしたんですけどね（笑
Sponsored Links
