レスポンシブなサイトをIE8に対応するために導入すべきjQueryいろいろ

投稿日：2015/10/13
JavaScript/jQuery
レスポンシブ, IE8

WEB製作時に頭痛の種になるのがIEへの対応です。
IE6以下はユーザーの利用数が減ってきているため、流石に切り捨てる人が多いようですが、IE8はまだまだ健在です。
今回は、IE8に対応するために導入すべきJQueryを紹介します。

IE8でCSS3セレクタ等を利用できるようにするIE9.js

IE8では、CSS3で利用できるようになったセレクタが利用できません。
CSS3で一気にスタイルシートで表現できる方法が広がったというのに、そのCSS3に対応していないなんてお話になりません。

ie9.jsを利用すると、

:before、:after、:first-child、:last-childが利用可能
nth-child()が利用可能
opacityが利用可能
min-height、min-widthが利用可能
position:fixedが利用可能
透過pngへの対応

など、CSS3でよく使われている機能をおよそカバーできます。

ダウンロード場所

https://code.google.com/p/ie7-js/

利用方法

DLし、展開したファイルの中からIE9.jsを任意のフォルダにアップロードし、下記ソースを参考に、ファイルのパスを<head>～</head>内に記述すればOKです。

<!--[if lt IE 9]>
<script src="../js/IE9.js"></script>
<![endif]-->

参考URL

IE8でCSS3プロパティを利用できるようにするCSS3 PIE

IE8では、CSS3の角丸・ボックスシャドウなどのプロパティが利用できません。
洗練された画面を利用するためには致命的な状況です。

CSS3 PIEを利用すると、

border-radius
box-shadow
border-image
multiple background images
linear-gradient as background image

など、CSS3でよく使われているプロパティをおよそカバーできます。

ダウンロード場所

http://css3pie.com/

利用方法

まず、上記URLからDLし展開したファイルのうち、「PIE.htc」ファイルのみを、CSSから参照できるウェブスペースにアップロードします。

border-radius、box-shadow、border-imageを利用するには、スタイルシートを下記のように記述します。
（それぞれのプロパティを適用したい部分のソースに、behavior: url(PIE.htc);を最終行に記載します。）

.css3{
    border-radius: 10px;
    box-shadow: 1px 1px 1px #666;
    border-image: url("./img/border.png") 10 round;
    behavior: url(PIE.htc);
}

グラデーションを利用するには、スタイルシートを下記のように記述します。
（グラデーションを適用したい部分のソースに、-pie-というプレフィックスを利用し、behavior: url(PIE.htc);を最終行に記載します。）

.css3grade {
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#000), to(#666));
    background: -webkit-linear-gradient(#000, #666);
    background: -moz-linear-gradient(#000, #666);
    background: -ms-linear-gradient(#000, #666);
    background: -o-linear-gradient(#000, #666);
    background: linear-gradient(#000, #666);
    -pie-background: linear-gradient(#000, #666);
    behavior: url(PIE.htc);
}

背景画像を複数設定するには、スタイルシートを下記のように記述します。
（背景画像を複数設定したい部分のソースに、-pie-というプレフィックスを利用し、behavior: url(PIE.htc);を最終行に記載します。）

.css3bg {
    background: url(../img/bg.png), url(../img/bg2.png);
    -pie-background: url(../img/bg.png), url(../img/bg2.png);
    behavior: url(PIE.htc);
}

参考URL

Webpark：CSS3を使うにあたって知っておきたいIE対策のまとめ
ACTZERO：PIE.htcを使ってIEでもCSS3を有効に！

IE8でHTML5を利用できるようにするhtml5shiv.js

HTML5では、<header>～</header>や<section>～</section>など、特有のタグを利用できるようになりました。
これらをIE8でも利用できるようにするには、html5shiv.jsが必要です。

ダウンロード場所

http://css3pie.com/

利用方法

<!--[if lt IE 9]>
<script src="../js/html5shiv.js"></script>
<![endif]-->

参考URL

IE8でMedia Queriesを利用できるようにするrespond.js

CSS3で利用可能になったメディアクエリを利用すると、ブラウザのサイズによってデザインを変更することができます。
スマートフォン・タブレット・PCで表示する際に最適なデザインで表示するレスポンシブデザインを動かすには、メディアクエリは必須です。
メディアクエリをIE8でも利用できるようにするには、respond.jsが必要です。

ダウンロード場所

http://css3pie.com/

利用方法

DLし、展開したファイルの中からrespond.jsを任意のフォルダにアップロードし、下記ソースを参考に、ファイルのパスを<head>～</head>内に記述すればOKです。

<!--[if lt IE 9]>
<script src="../js/respond.js"></script>
<![endif]-->

参考URL

NIJILOG：ホームページ制作でIE8を含めたブラウザ対応をしながらHTML5/CSS3をつかう方法

IE8でbackground-sizeを利用できるようにするjquery.backgroundSize.js

IE8でもCSS3で利用可能になったbackground-sizeプロパティを利用するメディアクエリをIE8でも利用できるようにするには、jquery.backgroundSize.jsが必要です。

ダウンロード場所

http://louisremi.github.io/jquery.backgroundSize.js/demo/

利用方法

DLし、展開したファイルの中からjquery.backgroundSize.jsを任意のフォルダにアップロードし、下記ソースを参考に、ファイルのパスを<head>～</head>内に記述すればOKです。

<!--[if lte IE 8]>
<script type="text/javascript" src="./js/jquery.backgroundSize.js"></script>
<script>
   $(function() {
       $("div.bgsco").css( "background-size", "contain" );
       $("div.bgsca").css( "background-size", "caver" );
   });
</script>
<![endif]-->