ジャンクワードの森

HTML5で作ったWebサイトをIE8でも崩れないようにする方法

当サイトではアフィリエイト広告を利用しています。

Windows8が登場しWindows XPのサポート終了まであと1年(2014年4月9日がリミット)となったタイミングですから、今更感たっぷりな感じですけど、最近作ったサイトで引っ掛かったので自分のメモとして。
20130510

すっかり忘れてのは自分の環境を新しくして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」を読み込む方法もまだ使えます)。

簡単な流れはこんな感じ

1、Google Codeのhtml5shivのページにアクセス
2、zipファイル「download html5shiv」をダウンロード
  2013年5月10日時点のファイル名は「aFarkas-html5shiv-3.6.2-11-ge4aee47.zip」
3、ダウンロードしてファイルを解凍
4、解答したフォルダの中にあるdistフォルダ内にある「html5shiv.js」もしくは「html5shiv-printshiv.js」をサーバにアップロード
5、「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

同じカテゴリの最新記事

運営者情報など

運営サポート

35-45 WOMAN

35-45WOMAN(サンゴーヨンゴーウーマン)は、「カッコいいけど身近」な女性向けWEBマガジン。

デザインとかコーディングとか、WordPressの構築とか裏側の部分を一通りやらせていただいています。

ブログ更新のアイテムとかスキルとか