IE6で透過pngを表示させるオススメscript、「DD_belatedPNG.js」 | ITキヲスク

＞＞ 詳細な使用法と注意点を追加エントリーしました。

いまだ絶大なシェアを誇るIE6（Internet Exproler 6）ですが、WEB制作者ならご存知の通り、さまざまなバグ・不具合を内包しております。

・CSSでfloatしたブロックのmarginが倍になる。
・後方互換モードの場合、text-alignが子要素にまで影響する。
・透過png画像が透過されない。

上記以外にも、それはいくつもの制作者泣かせの問題があり、業界内では「IE6氏ねばいいのに」とまで言われているブラウザですが、前述の通りシェアは絶大なので、対応しないワケにもいかず。

すでにいくつもの対応策が出回っておりますが、その中でも自分的に一番オススメするのが、「DD_belatedPNG.js」を使用する方法です。

有名どころの対応策を併記・比較しながら、どこがオススメなのかを含めてエントリーしたいと思います。

有名なIE6透過png対応策

1.AlphaImageLoader

これはJavaScriptを使わず、CSSだけで対応させる場合に有効な方法です。JavaScriptはどうしても使いたくなかったり、CSS以外いじれない状況の場合は、この方法がベストかもしれません。

IE6には透過png表示の為に、独自のCSSフィルターとして「AlphaImageLoader」というものがあります。これはDirectXを使用して、背景と画像の間に画像を配置する事で透過を再現するというものです。

この「AlphaImageLoader」フィルターをpng画像に適用することで、他ブラウザと同様に透過png画像を表示させます。

ある意味、最も仕様に忠実な対応方法ですが、使い勝手や汎用性を考えるとあまりオススはできません。

詳しい使い方を紹介しているサイト：

• Amenti
• ウノウラボ
• ウェブネタブログ

この方法の特徴：

1. 描画処理が遅くメモリも大きく消費するので、ページ全体が重くなる。
2. ブロック要素の背景画像に使用すると、そのブロック内のリンクが機能しなくなる。
3. IE6のみに適応させるためのCSSハックが必要。
4. 適応させたい箇所に、都度記述しなければならない。
5. 背景にリピート描画（background:repeat）ができない。

2.iepngfix.js

導入や使用に関する情報も多数あり、さまざまなサイトで使用されている実績も持つ、IE6透過png対応策の王道ともいえるこの方法。

原理としては、前述の「AlphaImageLoader」を、JavaScriptを用いて必要箇所に適応させるものです。

もう少し詳しく書くと、AlphaImageLoaderフィルターを使用した「iepngfix.htc」というスクリプトを、JavaScriptを用いて使用するものになります。

AlphaImageLoaderフィルターを直接使用する際の欠点、「ブロック要素の背景画像に使用すると、そのブロック内のリンクが機能しなくなる」という部分を補い、JavaScriptとして独立しているため、新規サイト制作時にも流用できるというスグレモノ。

ただし、上記の通り基本はAlphaImageLoaderフィルター＋iepngfix.htcなので、これらの不具合が継承されている部分もあります。

配布先・制作者様のサイト：

• ユンサンの/5ﾇﾁﾀXﾇ/YungSang’s

詳しい使い方を紹介しているサイト：

• Design Walker
• CSS MAKER
• SCREAMO CREATIVE

この方法の特徴：

1. AlphaImageLoaderフィルターを使用するので、描画処理自体は遅く、メモリも大きく消費する。
2. AlphaImageLoaderフィルター使用時の致命的バグである「適応ブロック内のリンクが機能しない」問題を回避できる。
3. 導入が簡単なうえ、解説サイトなども多数ある。
4. CSSに都度フィルターを適応させるカタチではないので、既存サイトにIE6透過png対応をする時にも導入が容易。
5. やはり背景にリピート描画（background:repeat）ができない。

3.ie7.js

こちらは今後主流になっていきそうな薫香プンプンの方法です。

このJavaScriptを導入し、pngの画像名を「○○-trans.png」とするだけで、IE6でも綺麗に透過されます。

このスクリプトは透過pngの対応をはじめ、前述のIE6独自のCSS諸問題を解決するためのもので、いうなれば「IE6がマトモになるように改造しちゃうぉ☆」というコンセプトのスクリプトです。

なので、もしすでにCSSなどでIE6対応ハックを使用している場合、このスクリプトが影響してしまい、表示がおかしくなる場合があります。

新規で制作する場合には問題ないですが、既存サイトでの導入は少し難しいかもしれません。

配布先・制作者様のサイト：

• Google code

詳しい使い方を紹介しているサイト：

• 440design
• yukotan hour
• TPLH.net

この方法の特徴：

1. 画像名を「○○-trans.png」とするだけで対応できるので、導入がとても簡単。
2. 透過png問題だけじゃなく、CSSのバグにも対応しているので、新規サイト制作時には利便性が高い。
3. AJAXやiframeでページ内にこのスクリプトを使用したページを読み込むと、たまにIEごと落ちる。
4. やっはり背景にリピート描画（background:repeat）ができない。

その他の透過png対応策

これら以外にもたくさんの透過png対応策があります。ここからはいくつか箇条書き系形式で紹介します。

4.IE PNG FIX v2.0 Alpha

配布先・制作者様のサイト：

• TwinHelix

詳しい使い方を紹介しているサイト：

• チバのブログ
• ちぷろぐ
• アイビーネットblog

この方法の特徴：

1. 背景のリピート描画（background:repeat）に対応（ただし当方の環境だと、異常に重かったです）。
2. ライセンスがLGPLと明記されているので、使い方によっては少し勝手が悪い。

5.Unit PNG Fix

配布先・制作者様のサイト：

• Unit Interactive

詳しい使い方を紹介しているサイト：

• コリス
• Design Develop
• RapidWeaverで簡単HP作成

この方法の特徴：

1. JavaScriptの容量が約2kbと、とても軽い。
2. 背景にpng画像を指定できない。

6.jquery.pngfix.js

配布先・制作者様のサイト：

• Plugins and Demos for jQuery JavaScript Library

詳しい使い方を紹介しているサイト：

• tenkaoのはてなダ…メモ

この方法の特徴：

1. jQueryを使用しているのが前提なので、そうでない場合は導入に手間がかかる。
2. 背景にリピート描画（background:repeat）ができない。

ここで登場！「DD_belatedPNG.js」

上記の対応策は基本的にAlphaImageLoaderフィルターを使用しており、そのシステム上どうしても描画が重くなる。

さらに背景リピートに対応していなかったり、余計なファイルをいくつも用意しなければいけなかったりと、「IE6憎し」の感情ばかりが高ぶってしまう。

しかし、ここで紹介する「DD belatedPNG.js」である（やっと本題にたどり着いた…）。

これは前述の「AlphaImageLoader」ではなく、「VMC」というものを利用して透過png画像を描画するものである。

処理が重い・背景リピートできない・リンクが機能しない、といったAlphaImageLoaderが根本にある故の問題点がそもそもこの「DD belatedPNG.js」には存在しないのである。

導入も簡単で、ライセンスもMIT。個人的にはこれで透過png問題の最終回答としました！

7.DD_belatedPNG.js

配布先・制作者様のサイト：

• DillerDesign

詳しい使い方を紹介しているサイト：

• CSS-EBLOG
• Understandard
• Yuki＠エクスブリッジ

この方法の特徴：

1. 描画処理がAlphaImageLoaderと比べて断然高速なので、ページをすぐに表示できる。
2. 背景にリピート描画（background:repeat）が可能。
3. ブロック内の背景にpngを配置しても、ちゃんとリンクが機能する。