【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

ECサイト構築クラウド型プラットフォーム

【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

モバイルファーストマーケティングラボ

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

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

IEへの対応は?

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

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

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

IE8はまだまだ高い

そういった時のために、比較的手軽に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が効かなくて困った時のまとめで以下の報告がありました。

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

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

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

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

軽量でサクサク動きます。
Respond.js(github)

Respond.jsの仕組みは以下

  1. media属性付きのstyle要素を挿入してMedia Queries対応チェック
  2. 対応していなければCSS(link要素のみ。style要素はNG)を解析してMedia Queries(max-width or min-width限定。@mediaから始まるブロック)を読み取る
  3. 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サイト」とは?

CTA-IMAGE 2019年、ECサイトの利用者は今やスマ―トフォンからが7割を超え、市場のニーズは完全にPCからスマホに転換しました。
また、検索エンジン大手のGoogleも「モバイルファーストインデックス」を打ち出し、スマホ対応の手段として正式に「レスポンシブWEBデザイン」を推奨しています。 そのような背景から、昨今のEC市場ではスマートフォンへの適切な対応が急務となっており「レスポンシブECサイト」のニーズが非常に高まってきています。本パンフレットではECサイト運営を取り巻く環境の変化を、レスポンシブECサイト構築導入実績No.1のプラットフォームである「aishipR」の機能や実績を踏まえながらまとめました。

・レスポンシブECサイトがなぜ今選ばれるのか
・これまでのECサイトの課題とは何なのか
・どのようにすれば解決できるのか

といったノウハウから、プラットフォーム変更で得られる効果の実例まで網羅して解説しています。
ECサイトの運営されておられる経営者様だけでなく、運営担当者様にも必ずお役に立つ内容となっておりますので、是非ご活用ください。
機能のご確認はお気軽にお問合せ、もしくは2週間無料お試し利用で。
aishipRの無料体験、お問合わせはお気軽に。説明会・資料請求も受付中。
0120-173-163
0120-173-163
無料体験
  • 無料体験
  • 問合せ
  • 説明会
  • 資料請求
  • 問合せ
  • 説明会
  • 資料請求
+