WEBCRE8.jpウェブクリ８.jp

webデザイナーによる、デザインとwebを楽しむ情報ブログ

まとめる。

webとwebデザインに関しての、WEBCRE8.jpによる
情報まとめのカテゴリです。

WEBCRE8.jp > まとめる > [Javascript]「こまけぇーこたぁいいんだよ！」な人の為のIE対応スクリプトまとめ

[Javascript]「こまけぇーこたぁいいんだよ！」な人の為のIE対応スクリプトまとめ

この記事は約17分ぐらいで読めます

こまけぇこたぁいいんだよ！
  • IE対応を巡る環境
  • 特別な方法を講じないと出来ないIE対応の、コピペで出来るスクリプトのまとめ。IE対応コーディングは出来る人向け

IE対応

正直話題としてはとっくに旬は過ぎていますがｗ 一度まとめておきたいと思い。

殆どのweb制作者達がこれまで頭を悩ませてきたであろうIE対応。web制作者の方々は「もうIE6対応なんかしなくていいじゃん」「対応するからいけないんだよ」という意見をお持ちの方も多いかと思います。

特にIE6に対するコーダーの方達の恨みつらみは相当なもの。一言言いたい場合はとりあえず「爆発しろ！」とでもこちらでぶつけてみてください☆

(´・ω・｀) ie6bot – 腐った牛乳と呼ばれたブラウザ

が、しかし会社で制作をやっている方々はそうもいかないのが現実。私のブログでも今は対応が中途半端でしっかり出来ていないのですが…ｗこのブログにはなるべく早めに対策を施すつもりです。あと、これに関してはそのうち独自の対応をしたいと思っています。

IE対応にはコーディングレベルでなんとかなるものからJavascriptでの対応が必須なもの、ハックや条件分岐…。色々な対応方法はあります。

コーディングレベルの対応に関してはこの記事では触れませんし、それについて書かれた記事もたくさんあると思います。一応WebデザインレシピさんやWebtech Walkerさんの記事が参考になると思うので紹介しておきます。

CSS：初心者の頃にハマったスタイルシートのあれこれ … IE7多め

IE6のバグのまとめ – Webtech Walker

あと、一応IEが独自に実装しているfilterという機能を使う方法もあります。Web Design KOJIKA17さんで紹介されているのでこちらも試してみてもいいかもしれません。

IEでCSS3の効果を出せる。クロスブラウザ対応 CSSスニペット : Web Design KOJIKA17

IE対応の為のスクリプト

こまけぇこたぁいいんだよ！

この記事では

  • スクリプトをダウンロード(もしくはCDNを使うならやることはコピペしてするのみ)
  • ソースをコピペ(基本的にはIEの条件分岐で追加)
  • ものによってはちょっとだけ書き換える

これだけの作業でIEで普通は出来ないような事をやってしまえるものをまとめてみようと思います。ちなみに一からサイトを制作する場合はまたこういう付け足しのスクリプトではなく、サイトの仕組みから組み込める便利なフレームワークなどがあったりしますので、これも一応紹介ということで書いておきます。こういうのも機会があれば使いたいんですよねー。

HTML5 Boilerplate – A rock-solid default template for HTML5 awesome.

それと、ここではあくまで簡単に設置する方法を挙げていくのみなので、各スクリプトの優劣などは検証しません。それに関しては別途書きたいと思っています。

PNGの透過画像をIE6～8で使う

  • IE7.js
  • DD_belatedPNG.js
  • jQuerybelatedPNG

IE7.js(IE7.js/IE8.js/IE9.js)

ダウンロード

ie7-js – A JavaScript library to make MSIE behave like a standards-compliant browser. – Google Project Hosting

スクリプトの設置

html

<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE7.js"></script>
<![endif]-->


<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js"></script>
<![endif]-->


<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->

備考

CDNでの利用が可能なので、jsをダウンロードせずにスクリプトの設置だけで使えます。

ダウンロードして設置する場合は囲み部分をあなたのサイトのディレクトリ構成と置き換えjs/IE9.jsなどとしてください。

このスクリプトでは拡張子がPNGで、画像のファイル名が***-trans.pngとなっているものをIE5.5～6で透過画像として扱ってくれます。

そもそもIE7.jsは5.5と6をIE7相当に、8は5.5から7を8相当に、9は5.5から8をモダンブラウザ相当に、とそれぞれ対応させてくれるのが主機能ですが、その性能についてはここでは…ですｗ

DD_belatedPNG.js

ダウンロード

DD_belatedPNG: Medicine for your IE6/PNG headache!

スクリプトの設置

html

<!--[if lte IE 6]>
<script type="text/javascript" src="js/DD_belatedPNG.js" charset="utf-8"></script>
<script type="text/javascript">
DD_belatedPNG.fix('img,.transparent');    //imgと.transparentのPNGをIE6で反映させる
</script>
<![endif]-->

備考

囲みの部分を任意のディレクトリで指定してください。

二つ目の囲みではこれを適用する対象を決定しています。私はtransparentというクラスを振っていますが、ここを書き換えたり、‘img,.transparent,.box’のように透過させるクラスを増やすことも可能です。

IE7.js等と違い画像のファイル名の変更の必要がなく、使い勝手がよいので私はこの方法で透過画像を使っています。

jQuerybelatedPNG

ダウンロード

wakuworks/jquery.belatedPNG – GitHub

スクリプトの設置

html

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.belatedPNG.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("#pngfix").fixPng();
});
</script>

備考

jQueryを使うので、既にjQueryを使っている場合向けです。

最初の二つの囲みの指定の代わりにディレクトリ構成や実際に設置した時のファイル名を入れます。

次の囲みに実際に透過させたい要素名やID、クラス名を指定します。

CSS3のドロップシャドウをIE6～8で使う

  • IE-CSS3.htc
  • css3shadow.htc

IE-CSS3.htc

ダウンロード

CSS3 support in Internet Explorer 6, 7, and 8

スクリプトの設置

css

.ie-css3 {
-moz-border-radius: 10px; /* Firefox用 */
-webkit-border-radius: 10px; /* SafariとChrome用 */
border-radius: 10px; /* OperaとIE、ie-css3用 */

-moz-box-shadow: 2px 2px 4px #000; /* Firefox */
-webkit-box-shadow: 2px 2px 4px #000; /* Safari and Chrome */
box-shadow: 2px 2px 4px #000; /* OperaとIE、ie-css3用 */

-moz-box-shadow: 10px 10px 10px #000; /* Firefox */
-webkit-box-shadow: 10px 10px 10px #000; /* Safari and Chrome */
box-shadow: 10px 10px 10px #000; /* OperaとIE、ie-css3用 */

behavior: url(ie-css3.htc);
}

備考

CSSのビヘイビアプロパティで実装するビヘイビアスクリプトです。

パスは実際に設置されるHTMLファイルからの相対パスで指定します。HTMLとCSSが同階層にある場合は例のままで構いません。違うディレクトリにある場合は囲みを修正してください。

テキスト、ボックスのドロップシャドウと角丸に対応しています。ただしIE-CSS3のテキストシャドウは通常の指定ではうまく行かず(ぼかしの指定のはずの3つめの値が座標を動かしてしまい、ぼかしがコントロールできない)、どのブラウザでも同じように表示することは望めません。

css3shadow.htc

ダウンロード

IEでCSS3のドロップシャドウを使いたい

スクリプトの設置

html

<!--[if lt IE9]>
<script type="text/javascript" src="js/css3shadow.htc"></script>
<![endif]-->
css

.css3-shadow {

-moz-text-shadow: 10px 10px 10px #000; /* Firefox */
-webkit-text-shadow: 10px 10px 10px #000; /* Safari and Chrome */
text-shadow: 10px 10px 10px #000; /* OperaとIE、ie-css3用 */

-moz-box-shadow: 10px 10px 10px #000; /* Firefox */
-webkit-box-shadow: 10px 10px 10px #000; /* Safari and Chrome */
box-shadow: 10px 10px 10px #000; /* OperaとIE、ie-css3用 */
}

備考

ビヘイビアスクリプトではありますが、普通のJavascriptのように設置して使います。

囲み内を設置したディレクトリに書き換えれば機能します。

テキスト、ボックスのシャドウに対応しています。テキストに対するシャドウでは僕が試した中では一番しっかり表示され、またボックスに関してはインセットのシャドウもつけられます。

CSS3の角丸をIE6～8で使う

border-radius.htc

ダウンロード

curved-corner – CSS curved corner – Google Project Hosting

スクリプトの設置

css

.border-radius {
-moz-border-radius: 10px; /* Firefox用 */
-webkit-border-radius: 10px; /* SafariとChrome用 */
border-radius: 10px; /* OperaとIE、ie-css3用 */

behavior: url(border-radius.htc);
}

備考

囲みの中を書き換え可能です。設置はie-css3等と同じようにhtmlからの相対パスで指定します。

IE-CSS3でもCSS3PIEでも代用可能です。

CSS3のその他のプロパティをIE6～8で使う

css3PIE.htc

ダウンロード

CSS3 PIE: CSS3 decorations for IE

スクリプトの設置

css

.css3pie {
-moz-border-radius: 10px; /* Firefox用 */
-webkit-border-radius: 10px; /* SafariとChrome用 */
border-radius: 10px; /* OperaとIE、ie-css3用 */

-moz-box-shadow: 10px 10px 10px #000; /* Firefox */
-webkit-box-shadow: 10px 10px 10px #000; /* Safari and Chrome */
box-shadow: 10px 10px 10px #000; /* OperaとIE、ie-css3用 */

background: url(bg-image.png) no-repeat #CCC; /*non-CSS3 browsers will use this*/
background: url(bg-image.png) no-repeat, -webkit-gradient(linear, 0 0, 0 100%, from(#CCC) to(#EEE)); /*old webkit*/
background: url(bg-image.png) no-repeat, -webkit-linear-gradient(#CCC, #EEE); /*new webkit*/
background: url(bg-image.png) no-repeat, -moz-linear-gradient(#CCC, #EEE); /*gecko*/
background: url(bg-image.png) no-repeat, -ms-linear-gradient(#CCC, #EEE); /*IE10 preview*/
background: url(bg-image.png) no-repeat, -o-linear-gradient(#CCC, #EEE); /*opera 11.10+*/
background: url(bg-image.png) no-repeat, linear-gradient(#CCC, #EEE); /*future CSS3 browsers*/
-pie-background: url(bg-image.png) no-repeat, linear-gradient(#CCC, #EEE); /*PIE*/

behavior: url(PIE.htc);
}

備考

これでのみでボックスシャドウ、角丸、グラデーション、画像のボーダー、複数の背景画像指定に対応しています。

何故かテキストシャドウが入ってません…これに関してはcss3-shadowが一番キレイに表示するのですが、css3PIEとは相性が悪いらしく、テキストシャドウが表示されません。

つまりグラデーションや背景の複数指定をしていてテキストシャドウも…と言うのはなかなか難しいものがありそうです、残念ながら。

CSS3 PIEに限りませんが、うまく表示されないときはそのエレメントにposition:relativeやzoom:1、background-color:任意の色などを指定するとうまくいったりします。実際全部指定して初めてうまくいったりもしました。

ちょっと解説が必要になるかもしれないのでこれに関しては配布元、それに以下の記事を参考にすると良いかもしれません。

CSS3 PIE を使ってみた | mrta26.com

HTML5で作成したサイトをIE6～8に対応させる

HTML5.js

ダウンロード

html5.js

スクリプトの設置

html

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
css

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display:block;
}

備考

HTML5固有のタグを指定できるようにする（とともに印刷関係の問題をある程度解決してくれるらしい）為のものです。

リンクをクリックするとソースが表示されるのでそのままページを保存してください。

囲みを相対パスに入れ替え、もしくはそのままCDNを設置してしまうほうが無論早いです。

結論として

HTML5対応はレイアウトに関して言えばHTML5.jsと、cssにsectionやaside等をblock指定することでHTML5非対応のブラウザにも対応できます。

が、CSS3に関しては、これをやれば大丈夫、というようなものはまだないようです（僕が知らないだけかもしれないので知ってたら教えて欲しいですｗ）。実際のサイトのデザインによっていずれかを選ぶと言った対応になると思います。サクッとIE対応して、メインのデザインに時間をかけたり、早く帰ってお寿司を食べに行きましょう☆

9.ちなみに私の場合

私の場合、よく使うのはDD_belatedPNG.jsです。それに加え、当ブログはHTML5で作られているのでHTML5.jsを採用しています。IE9.jsを入れて初めて表示がうまくいった部分もあります。

CSS3に関しては、もしテキストにドロップシャドウをかけたいならcss3-shadow.htc、それ以外のCSS3はcss3PIE.htcかなーと言う印象です。どれにせよあまり入れ子や複数の使用を上手く処理できないので、特にIEでも再現したい表現に対しピンポイントに使うことになるかなと私は思っています。

今度、どういった理由でどれを選ぶのが最適か、というような記事を書くかも知れません（書かないかも知れませんｗ）。