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

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

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

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

【js不要!】cssだけでIE8対応のレスポンシブサイトを作る方法

【js不要!】cssだけでIE8対応のレスポンシブサイトを作る方法

CSSのみでIE8に対応する方法

こんにちは、ECプロデュース部の岡本です。

未だに高いシェアを誇る「Internet Explorer 8」。9月にはこのようなレポートも発表されていました。

IE

IE10がシェア第2位へ – 8月ブラウザシェア | マイナビニュース

今回はこのIE8にレスポンシブサイトを「jsを使用せずに」対応させる方法を紹介いたします。

コーダー泣かせの「IE8」

IE

photo credit: Ken-Saunders via photopin cc

レスポンシブWebデザインのサイトを作成する際、必ずといっていいほど問題になるのが「IE8」対応です。

「レスポンシブ化の要」とも言える「メディアクエリ」に対応していないため、専用のjsプラグインを読み込む必要があります。

IE8でメディアクエリを読み込ませるjsプラグインについては、別の記事にて紹介しておりますのでそちらを御覧ください。

レスポンシブWebデザインをIE8に対応させる方法 | スマートフォン&モバイルEC事例ノウハウ集|モバイルファーストラボ

jsで対応させるデメリット

adapt javascript

レスポンシブWebデザインのアキレス腱でもある「メディアクエリ」をIE8でも対応させるため、「専用のJavaScript」を読み込ませることが一般的です。

有名なところでは「Respond.js」や「html5shiv.js」がありますが、どちらも一長一短と言わざるをえない現状です。

このブログでも、他のブログでも「バグが発生しやすいので、取り扱いに要注意」という内容の記事が紹介されています。

元々非対応のブラウザにjavascriptで無理やり認識させるようなものですので、やはりどこかしらで不具合が生じてしまう様子です。

HTML5 Boilerplateというコミュニティでは、「プログレッシブ・エンハンスメントに反する」として「Modernizr2.5のカスタム・ビルダー」からRespond.jsを除外することを発表した際、これらのスクリプトを使用するデメリットについて以下のようにまとめられていました。

Respond.js には @import が未対応という制限以外に、CSS ファイルを Ajax で読み込むため、次のような問題があります。

  • <head> 内の JavaScript によりブロッキングが発生する
  • 追加の HTTP リクエストが必要となる
  • Ajax 完了前にレンダリングされると、FOUC が発生する
  • クロス・ドメインとなる CSS には対応できない

古いブラウザがサポートできない機能を何らかの手段で補う、いわゆる ポリーフィル として一旦は H5BP に採用された Respond.js ですが、プログレッシブ・エンハンスメント の考え方から言っても、古いブラウザにそこまでのハンディキャップを負わせる価値はない、がコミュニティーの決定となったのです。
Respond.jsとレスポンシブWebデザインをめぐるベストプラクティス議論

発想の転換:IE8から制作する

change

photo credit: Nanagyei via photopin cc

簡単にIE8対応ができると人気のjavascriptによる対応ですが、様々なリスクを抱えていることが明らかになりました。

これらはページ速度の低下や一定条件下でエラーが発生するなど、サイトオーナーとしてはあまり喜ばしくない問題でもあります。

そこで再注目したいのが「プログレッシブ・エンハンスメント」です。

プログレッシブ・エンハンスメント – レトロブラウザベースで作る

プログレッシブ・エンハンスメント

photo credit: garethr via photopin cc

「プログレッシブ・エンハンスメント」とはブラウザの互換性に対する考え方の1つで、「どのユーザーにも同じように情報コンテンツを提供すること」を重視しています。

そのため基本的には「古いブラウザに合わせた」コンテンツを作成し、「新しいブラウザ利用者」には「よりリッチな見せ方」を提供することが推奨されています。

「IE8でも見れるサイトにして欲しい」ということであれば、「IE8で閲覧できるサイト」をまず制作するということですね。

そして今回紹介する手法は「新しいブラウザ利用者」向けの「リッチな見せ方」として、「レスポンシブWebデザイン」を実装させるものとなります。

レスポンシブWebデザインを実装させる目的は、「マルチデバイス対応」です。

そう考えた場合、そもそもPC以外の端末に存在しない「IE8」にとって「レスポンシブWebデザイン」は「リッチな見せ方」に該当します。

そこで「IE8では固定幅、モダンブラウザではレスポンシブ化されたウェブサイト」を作るポイントを次項からご紹介します。

html:rootを使った「レスポンシブ化」

さっそくjsdo.itにてサンプルを制作しました。

IE8で見ると固定幅、モダンブラウザで閲覧するとレスポンシブになっていることがわかるかと思います。

この「IE8対応のレスポンシブ」を実現させているのは、CSS3の要素「:root擬似要素」です。

サンプルページのCSSを見て頂くと、「固定幅レイアウト」でまずスタイリングされていることがわかります。

そして51行目以降では一変して、「html:root」を利用してレスポンシブなスタイルが記述されています。

これはIE8がCSS3に非対応であることを利用して、「一旦固定幅レイアウトで作成し、CSS3でレスポンシブレイアウトに上書きする」という方式です。

まずIE8などのレトロブラウザ向けにデザインし、モダンなブラウザではよりリッチなデザインを実現させる。

少しCSSの記述量は多くなりますが、まさに「プログレッシブ・エンハンスメントなレスポンシブ化」を実現させています。

また今回は「calcプロパティ」を利用することで、33.3333%のような「割り切れない数字」になるレイアウトでも「100% / 3」などの計算式化することで綺麗に整えることも実現させています。

この「calcプロパティ」についてはIE8だけでなく「Androidブラウザ」でも非対応の要素ですので、必ず「Android用の実数」「calc」「-webkit-calc」の3つを記述するようにして下さい。

まとめ

XPのサポート終了と共にシェアが低くなることが期待されているIE8ですが、まだまだ対応が必要な業界は数多く存在しています。

「無理やり対応させる」のではなく、ブラウザにあったスタイルを設定していく必要性はしばらく続きそうです。

”スマホで売れる”ためには必須の「レスポンシブ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
無料体験
  • 無料体験
  • 問合せ
  • 説明会
  • 資料請求
  • 問合せ
  • 説明会
  • 資料請求
+