透過PNGをIE6で表示する３つの方法

デザイナーの植村です。

今や当たり前のように使われている透過PNGですが、

Internet Explorer 6以下のバージョンでは、透過が正常に再現されません。

そのためJavascript等を使って擬似的に再現する必要があるのですが、

そのやり方にも様々な選択肢があります。

今回は、その中でも特におすすめのものを３つピックアップし、

それぞれのメリットを挙げていこうと思います。

1, IE7.js

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

IE6以下のブラウザをよりWeb標準に近づけるスクリプトです。

透過PNGだけでなくXHTML/CSSの解釈も、

IE7のそれを再現できるようになります。

今回リストアップするものの中でも特に実装がお手軽に出来ます。

まずヘッダーに以下の記述を追加。

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

あとは透過させたいPNGのファイル名を「○○-trans.png」とするだけです。

IE8.jsとIE9.jsもあります。

メリット：

・実装がお手軽

・透過PNGの問題だけでなくCSSのバグ等も解消できる

2, DD_belatedPNG.js

http://www.dillerdesign.com/experiment/DD_belatedPNG/

反映させる要素名やid名をセレクターで選択できる、

非常に使い勝手のいいスクリプト。

ヘッダーに以下の記述を追加します。

<!--[if IE 6]>
	<script src="○○○/DD_belatedPNG.js"></script>
	<script>
		DD_belatedPNG.fix('img, .png_bg');
	</script>
<![endif]-->

上記の「’img, .png_bg’」の部分に対象のセレクターを選択します。

詳しく書かれている方がいらっしゃいますのでご参考にどうぞ。

http://smkn.xsrv.jp/blog/2009/04/postscript_dd_belatedpng_js/

メリット：

・対象をセレクターで選択できる

・処理が軽い

・背景リピートにも対応

3, Unit PNG Fix

http://labs.unitinteractive.com/unitpngfix.php

おそらくもっとも軽量です。

まずはヘッダーにこちらのタグを設置。

<script type=”text/javascript” src=”unitpngfix.js”></script>

あとは1×1の透明GIF画像を用意するだけ。

ファイル名、パスはjsファイルの一行目を変更することで設定可能です。

デフォルトは「images/clear.gif」になっています。

メリット：

・スクリプトが超軽量（2KB）

・背景リピートにも対応

マイクロソフト自体の呼びかけもあり、

日本国内のIE6のシェア率はかなり下がっていますが、

それでも対応に迫られる場面はあると思います。

その時は是非試してみてください！