I'll be NET】創作サイトから中小企業まで東京都三鷹市で低価格高品質なホームページ制作(SOHO)

トップページ > JavaScript/jQuery > レスポンシブなサイトをIE8に対応するために導入すべきjQueryいろいろ

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

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でよく使われている機能をおよそカバーできます。

ダウンロード場所

ie9js.png
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でよく使われているプロパティをおよそカバーできます。

ダウンロード場所

css3pie.png
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

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

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

ダウンロード場所

html5.png
http://css3pie.com/

利用方法

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

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

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

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

ダウンロード場所

respond.png
http://css3pie.com/

利用方法

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

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

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

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

ダウンロード場所

background-size.png
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]-->
参考URL

この記事が気に入ったらシェアしてください。

関連記事

Instagramの写真一覧をサイトに表示する方法

Instagramの写真一覧をサイトに表示する方法

サムネイル画像をクリックするとメイン画像をふわっと切り替えるjQuery

HTML上の要素の位置を変更するjQuery

HTML上の要素の位置を変更するjQuery

JavaScriptで現在のURLを取得する方法

ロード時やスクロール時にふわっと表示させるjQuery

ロード時やスクロール時にふわっと表示させるjQuery

pixiv小説のように縦書き表示する方法-2019版

pixiv小説のように縦書き表示する方法-2019版

Comment Form

コメント投稿はこちらをクリックしてください
  • コメントを入力してください。
登録フォーム
Name
Mailaddress
URL
Message
Postkey
(スパム対策に、投稿キー を半角で入力してください。)

Profile

yuricolo@I'll be NET

東京都を拠点としたSOHO(フリーランス)による創作サイト向けWEB制作サービスを行っています。 お仕事とか創作活動とかでメモっておきたいこととかを掲載しています。