EC-CUBEレスポンシブWebデザイン：IE8以下で、HTML5とCSS3を読み込む

ITOBEN STYLE > EC-CUBEレスポンシブWebデザイン：IE8以下で、HTML5とCSS3を読み込む

2013年8月9日カテゴリー:未分類

（1）　IE8以下では、HTML5への対応が不十分であるため、html5shiv.jsを読み込み対応します。

html5shiv.jsは、IE8以下のブラウザに対してHTML5の要素や属性を認識させるためのライブラリです。
ただし、動きは重くなります。

▼html5shiv.jsのダウンロード
http://code.google.com/p/html5shiv/

（2）　IE8以下では、CSS3への対応が不十分であるため、respond.min.jsを読み込み対応します。

respond.min.jsは、IE8以下のブラウザでCSS3のメディアクエリを利用するためのライブラリです。

▼respond.min.jsのダウンロード
https://github.com/scottjehl/Respond

respond.min.jsは、CSSをリンクする場合に「@import」が効かないので、site_frame.tplで、直接CSSを読み込むように変更します。

■data/Smarty/templates/default/site_frame.tpl

[php] ■data/Smarty/templates/default/index.php　に追加

[php]

[/php]

（3）　IE7以下で、フルードイメージ（max-width）に対応する。

フルードイメージとは、ブラウザのウィンドウ幅に合わせて画像のサイズを拡大・縮小する手法です。
imgSizer.jsで対応します。

（4）　■data/Smarty/templates/default/site_frame.tplへの記述

[php]
js/html5shiv.js”>

js/css3-mediaqueries.js”>

js/imgSizer.js”>

[/php]

IEの「開発者ツール」で動作を確認する。

ツール　→　F12開発者ツールをクリックします。

ブラウザモード ・ドキュメントモードを同じバージョンにすると、そのバージョンでの表示を確認できます。