navigation>年末年始休業につきまして【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。TOPモバイルファーストマーケティングラボモバイルファーストマーケティングラボレスポンシブWebデザインをIE8に対応させる方法2013.04.092018.09.27レスポンシブWebデザインHOME技術レスポンシブWebデザインをIE8に対応させる方法InternetExplorerは昔かサイト制作者を悩ませ続けてきました。レスポンシブサイトを作ろうとしても、レスポンシブサイトというとセットでついてくるメディアクエリ、これにはIE8以下の下位バージョンが対応しておらず、表示は見事に崩れます。まとめ未だ切り捨てられないIEへの対応モバイルファーストかつレスポンシブということを思えばIE、しかも下位バージョンなら切り捨ててもいいのではないかと思いますが、様々な事情から切り捨てられないシーンもあるでしょう。以前に比べれば低くなったとは言え、特に日本ではIE8のブラウザシェアはまだまだ残っています。Shareそういった時のために、比較的手軽にIE向けの対応を行える方法があります。1.「css3-mediaqueries.js」を読み込むこちらはGoogleが推奨している比較的有名なスクリプトです。html5.jsやIE9.jsなどと併用してもOKのようです。使い方は<head>内に以下を記述します。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なのですが、こちらの方法は注意点がいくつかあります。typeを省略すると無効になるようです。(max-width:768px){}と正しく記述しましょう。CSSの読み込みは@importを使わないCSSを@importで呼び出している場合は、こちらも動作しません。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」を読み込む軽量でサクサク動きます。Queries対応チェック対応していなければCSS(link要素のみ。min-width限定。@mediaから始まるブロック)を読み取るwindow.onresizeイベントで横幅を監視して、上記2の条件と一致するstyle要素を生成・挿入する参考サイト:http://lab.informarc.co.jp/javascript/ie_responsive_webdesign.htmlどちらを利用しても問題はありません。注意点を意識してぜひお試し下さい。まとめ古いバージョンのIEに対応することは、これからのモバイル全盛時代への大きな足かせになります。アクセス解析ツールなどでブラウザごとのアクセスを見た時にIE8以下のアクセス比率が多いようでしたら、上記のようなツールを使いIEへの対応をする必要も考えなくてはなりません。海外ではすでにIE6を非推奨とすることが当たり前になっていますが、日本でも今後このようなレガシーブラウザ(古いバージョンのブラウザ)を切り捨てていくようになってくるでしょう。以前に比べると、IE8のシェアは日本では減ったもののまだ10%近く存在します。Analyticsが2013年末でIE8のサポートを終了」のように、大手のサービスが徐々にIE8のサポートを打ち切る動きを見ていると、減りゆくブラウザに余分にコストを割くよりも、よりユーザーに取って使いやすく見やすいサイト作りを意識して行く方が賢明なように感じます。上林”スマホで売れる”ためには必須の「レスポンシブECサイト」とは?2019年、ECサイトの利用者は今やスマ―トフォンからが7割を超え、市場のニーズは完全にPCからスマホに転換しました。検索エンジン大手のGoogleも「モバイルファーストインデックス」を打ち出し、スマホ対応の手段として正式に「レスポンシブWEBデザイン」を推奨しています。そのような背景から、昨今のEC市場ではスマートフォンへの適切な対応が急務となっており「レスポンシブECサイト」のニーズが非常に高まってきています。本パンフレットではECサイト運営を取り巻く環境の変化を、レスポンシブECサイト構築導入実績No.1のプラットフォームである「aishipR」の機能や実績を踏まえながらまとめました。・レスポンシブECサイトがなぜ今選ばれるのか・これまでのECサイトの課題とは何なのか・どのようにすれば解決できるのかといったノウハウから、プラットフォーム変更で得られる効果の実例まで網羅して解説しています。ECサイトの運営されておられる経営者様だけでなく、運営担当者様にも必ずお役に立つ内容となっておりますので、是非ご活用ください。無料パンフレットを請求するABOUTモバイルファーストマーケティングラボとは、スマートフォン/タブレット/PCに対応したレスポンシブECサイトの構築や成功事例の最新情報を発信するブログです。投稿一覧15歳の時に初めて携帯電話を手にして約15年。モバイルの面白さ、奥深さに魅了されて入社。中心に業種問わず様々なクライアントをサポートしております。合わせて情報サイト、「モバイルファーストマーケティングラボ」の編集長として、毎日モバイルマーケティングの情報を発信中。ECによってより便利で過ごしやすい世の中を作るお手伝いができればと思います。「インターネットでより豊かな人生を」がモットー。2014.10.30いつの間にか開発に異動した岡本です。2013.08.05今週月曜日も最新の市場動向や調査結果、キャリア各社の動きなどをご紹介いたします。コメントをキャンセルメールアドレスが公開されることはありません。コメント名前メールアドレスサイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。自社ECサイト運営でASPをオススメする理由モバイルファーストラボ。