(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
<link rel="stylesheet" href="<!--{$TPL_URLPATH}--/>css/import.css" type="text/css" media="all" />
↓【変更】
<link rel="stylesheet" href="<!--{$TPL_URLPATH}--/>css/reset.css" type="text/css" media="all" />
<link rel="stylesheet" href="<!--{$TPL_URLPATH}--/>css/common.css" type="text/css" media="all" />
<link rel="stylesheet" href="<!--{$TPL_URLPATH}--/>css/contents.css" type="text/css" media="all" />
<link rel="stylesheet" href="<!--{$TPL_URLPATH}--/>css/table.css" type="text/css" media="all" />
<link rel="stylesheet" href="<!--{$TPL_URLPATH}--/>css/bloc.css" type="text/css" media="all" />
<link rel="stylesheet" href="<!--{$TPL_URLPATH}--/>css/bloc_alpha.css" type="text/css" media="all" />
<link rel="stylesheet" href="<!--{$TPL_URLPATH}--/>css/popup.css" type="text/css" media="all" />
<link rel="stylesheet" href="<!--{$TPL_URLPATH}--/>css/print.css" type="text/css" media="all" />
さらに、IE8以下でアクセスした場合にメッセージを表示するようにします。
■data/Smarty/templates/default/index.php に追加
<!--[if lte IE 8.0]>
<style type="text/css">
#ie{
width:100%;
margin:0;
padding:30px 0;
background-color:#f5f5f5;
color:#333333;
border-bottom:1px solid #cccccc;
text-align:center;
font-size:16px;
font-weight:bold;
line-height:1.3em;
}
</style>
<div id="ie">
お使いのブラウザ(IE8以下です)はバージョンが古いため、<br />
サイトを快適にご利用いただけません。<br />
最新のブラウザにアップグレードされることをお勧めします。
</div>
< ![endif]-->
(3) IE7以下で、フルードイメージ(max-width)に対応する。
フルードイメージとは、ブラウザのウィンドウ幅に合わせて画像のサイズを拡大・縮小する手法です。
imgSizer.jsで対応します。
▼imgSizer.jsのダウンロード
http://webscripts.softpedia.com/script/Image-Tools/imgSizer-js-68426.html
続きを読む EC-CUBEレスポンシブWebデザイン:IE8以下で、HTML5とCSS3を読み込む