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

IEへの対応は？

InternetExplorerは昔かサイト制作者を悩ませ続けてきました。せっかくレスポンシブサイトを作ろうとしても、レスポンシブサイトというとセットでついてくるメディアクエリ、これにはIE8以下の下位バージョンが対応しておらず、表示は見事に崩れます。

1. 未だ切り捨てられないIEへの対応

未だ切り捨てられないIEへの対応

モバイルファーストかつレスポンシブということを思えばIE、しかも下位バージョンなら切り捨ててもいいのではないかと思いますが、様々な事情から切り捨てられないシーンもあるでしょう。以前に比べれば低くなったとは言え、特に日本ではIE8のブラウザシェアはまだまだ残っています。

参照：StatCounter Global Stats – Browser Version Market Share

そういった時のために、比較的手軽にIE向けの対応を行える方法があります。

1.「css3-mediaqueries.js」を読み込む

こちらはGoogleが推奨している比較的有名なスクリプトです。html5.jsやIE9.jsなどと併用してもOKのようです。

使い方は<head>内に以下を記述します。

&amp;lt;!--[if lt IE 9]&amp;gt;
&amp;lt;script src=&amp;quot;http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;
&amp;lt;![endif]--&amp;gt;

基本的には読み込ませるだけでOKなのですが、こちらの方法は注意点がいくつかあります。

media typeを省略してはいけない

通常メディアクエリを指定する場合は、

@media (max-width:768px){}

のようにmedia type（allやscreen等）を省略しても動作しますが、css-mediaqueries.jsを利用する場合はmedia typeを省略すると無効になるようです。

@media screen and (max-width:768px){}

と正しく記述しましょう。

CSSの読み込みは@importを使わない

CSSを@importで呼び出している場合は、こちらも動作しません。

&amp;lt;link rel=&amp;quot;stylesheet&amp;quot; href=&amp;quot;base.css&amp;quot;&amp;gt;

のように、CSSの読み込みを記述しましょう。

特殊な条件で無効になる

こちらは検証はしていませんが、css3-mediaqueries.jsが効かなくて困った時のまとめで以下の報告がありました。

１．@mediaの記述だけを別ファイルにする
２．@media記述より前に@charset記述を書く
３．@mediaの記述以外の通常のCSSルールは書かない

上記の全てが揃うと100％無効になるようです。

こちらの回避方法としては、ファイルを分割しないか、メディアクエリ用cssには@charset指定をしないのどちらかになると思います。

2.「Respond.js」を読み込む

軽量でサクサク動きます。
・Respond.js（github）

Respond.jsの仕組みは以下

media属性付きのstyle要素を挿入してMedia Queries対応チェック

対応していなければCSS（link要素のみ。style要素はNG）を解析してMedia Queries（max-width or min-width限定。@mediaから始まるブロック）を読み取る

window.onresizeイベントで横幅を監視して、上記2の条件と一致するstyle要素を生成・挿入する

参考サイト：http://lab.informarc.co.jp/javascript/ie_responsive_webdesign.html

どちらを利用しても問題はありません。注意点を意識してぜひお試し下さい。

まとめ

古いバージョンのIEに対応することは、これからのモバイル全盛時代への大きな足かせになります。しかしアクセス解析ツールなどでブラウザごとのアクセスを見た時にIE8以下のアクセス比率が多いようでしたら、上記のようなツールを使いIEへの対応をする必要も考えなくてはなりません。

海外ではすでにIE6を非推奨とすることが当たり前になっていますが、日本でも今後このようなレガシーブラウザ（古いバージョンのブラウザ）を切り捨てていくようになってくるでしょう。

2013年10月11日追記

以前に比べると、IE8のシェアは日本では減ったもののまだ10％近く存在します。

しかし、「Google Analyticsが2013年末でIE8のサポートを終了」のように、大手のサービスが徐々にIE8のサポートを打ち切る動きを見ていると、減りゆくブラウザに余分にコストを割くよりも、よりユーザーに取って使いやすく見やすいサイト作りを意識して行く方が賢明なように感じます。

aishipR　上林

クラウドECのサイト構築はaishipR-カスタマイズ可能なASP実績No.1

累計2000社以上の導入の総合通販型カートシステムで、カスタマイズ性が高く、デザインの自由度はもちろん、各種システムとの連携や機能追加等も独自のカスタマイズができるため、こだわりのある本格的な通販を月額9,800円から実現できます。またモバイルファースト設計や月2回の無償バージョンアップなどの特徴があり、使いやすさと最新性を追求した通販サイトを構築できます。さらに信頼性の高いサーバーを採用しており大規模アクセスにも対応できるため、これからさらに通販での売上を伸ばされたい事業者様におすすめです。

資料請求