IE8をHTML5レスポンシブWebデザインに対応させる方法

Windows Internet Explorer 8（IE8）は、Windows XP や Windows Vista で使われていたブラウザです。

HTML5 や CSS3 に対応していないため、レスポンシブ Web デザインのサイトを正確にレンダリングすることはできません。

今（2020 年）となっては切り捨ててよいブラウザだと思いますが、JavaScript を使って IE8 でもレスポンシブ Web デザインのサイトを表示させる方法をご紹介いたします。

Headline

Googleも推奨するレスポンシブウェブデザイン

レスポンシブ Web デザインとは、スマホでも PC でも同じ HTML を配信し、CSS で表示方法を変更する方法のことです。

端末によって URL やページの内容を切り替えることがないため検索評価の分散を防ぐことができ、Google も推奨しています。

WordPress ではほとんどのテーマがレスポンシブ Web デザインになっていますから、ユーザーがとくに気にかける必要はないでしょう。

ただ、端末によっては表の見切れなどが起こり得るため、つねにスマホでの見た目を確認しておくのは大切です。

それでは、JavaScript を使った実装手順を解説していきます。

まず、Google Codeから「html5shiv」をダウンロードします。

解凍後、「src」フォルダ内の「html5shiv.js」を任意のディレクトリにアップロードし、head 内から読み込んでください。

<!--[if lt IE 9]>
<script src="ディレクトリ名/html5shiv.js"></script>
<![endif]-->

これで HTML5 に対応させられるので、続いて CSS3 にも対応させます。

GitHub から「Respond.js」をダウンロードします。

解凍後、「dest」フォルダ内の「respond.src.js」を先ほどと同じく任意のディレクトリにアップロード。head 内で読み込みます。

<script src="ディレクトリ名/respond.src.js"></script>

これで 100％対応とまではいきませんが、とりあえず HTML5 ＋ CSS3 のレスポンシブサイトは表示崩れがなくなると思います。

上記方法でもレイアウトが崩れてしまう場合、「Respond.js」のかわりに Google Code の「css3-mediaqueries-js」を試してみてください。

ただ、それでも 100 ％ OK ということにはならないと思います…。

下記のメタタグを head 内に挿入するとうまくいくかもしれません。

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

もう IE8 でブラウジングしている方は皆無だと思いますが、何らかの理由で対応が必要な場合は覚えておきましょう。

インターネット業界は目まぐるしい進歩を遂げていますから、今後もブラウザのアップデートや最新技術の開発により、様々な対応が求められると思います。

情報発信する側として、「読者が読みやすいサイトを作ることを心がける」のを忘れないようにしたいですね。

それでは、また。