2009年 02月 15日
いまだ絶大なシェアを誇る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画像を表示させます。
ある意味、最も仕様に忠実な対応方法ですが、使い勝手や汎用性を考えるとあまりオススはできません。
詳しい使い方を紹介しているサイト：
この方法の特徴：
- 描画処理が遅くメモリも大きく消費するので、ページ全体が重くなる。
- ブロック要素の背景画像に使用すると、そのブロック内のリンクが機能しなくなる。
- IE6のみに適応させるためのCSSハックが必要。
- 適応させたい箇所に、都度記述しなければならない。
- 背景にリピート描画（background:repeat）ができない。
2.iepngfix.js
導入や使用に関する情報も多数あり、さまざまなサイトで使用されている実績も持つ、IE6透過png対応策の王道ともいえるこの方法。
原理としては、前述の「AlphaImageLoader」を、JavaScriptを用いて必要箇所に適応させるものです。
もう少し詳しく書くと、AlphaImageLoaderフィルターを使用した「iepngfix.htc」というスクリプトを、JavaScriptを用いて使用するものになります。
AlphaImageLoaderフィルターを直接使用する際の欠点、「ブロック要素の背景画像に使用すると、そのブロック内のリンクが機能しなくなる」という部分を補い、JavaScriptとして独立しているため、新規サイト制作時にも流用できるというスグレモノ。
ただし、上記の通り基本はAlphaImageLoaderフィルター＋iepngfix.htcなので、これらの不具合が継承されている部分もあります。
配布先・制作者様のサイト：
詳しい使い方を紹介しているサイト：
この方法の特徴：
- AlphaImageLoaderフィルターを使用するので、描画処理自体は遅く、メモリも大きく消費する。
- AlphaImageLoaderフィルター使用時の致命的バグである「適応ブロック内のリンクが機能しない」問題を回避できる。
- 導入が簡単なうえ、解説サイトなども多数ある。
- CSSに都度フィルターを適応させるカタチではないので、既存サイトにIE6透過png対応をする時にも導入が容易。
- やはり背景にリピート描画（background:repeat）ができない。
3.ie7.js
こちらは今後主流になっていきそうな薫香プンプンの方法です。
このJavaScriptを導入し、pngの画像名を「○○-trans.png」とするだけで、IE6でも綺麗に透過されます。
このスクリプトは透過pngの対応をはじめ、前述のIE6独自のCSS諸問題を解決するためのもので、いうなれば「IE6がマトモになるように改造しちゃうぉ☆」というコンセプトのスクリプトです。
なので、もしすでにCSSなどでIE6対応ハックを使用している場合、このスクリプトが影響してしまい、表示がおかしくなる場合があります。
新規で制作する場合には問題ないですが、既存サイトでの導入は少し難しいかもしれません。
配布先・制作者様のサイト：
詳しい使い方を紹介しているサイト：
この方法の特徴：
- 画像名を「○○-trans.png」とするだけで対応できるので、導入がとても簡単。
- 透過png問題だけじゃなく、CSSのバグにも対応しているので、新規サイト制作時には利便性が高い。
- AJAXやiframeでページ内にこのスクリプトを使用したページを読み込むと、たまにIEごと落ちる。
- やっはり背景にリピート描画（background:repeat）ができない。
その他の透過png対応策
これら以外にもたくさんの透過png対応策があります。ここからはいくつか箇条書き系形式で紹介します。
4.IE PNG FIX v2.0 Alpha
配布先・制作者様のサイト：
詳しい使い方を紹介しているサイト：
この方法の特徴：
- 背景のリピート描画（background:repeat）に対応（ただし当方の環境だと、異常に重かったです）。
- ライセンスがLGPLと明記されているので、使い方によっては少し勝手が悪い。
5.Unit PNG Fix
配布先・制作者様のサイト：
詳しい使い方を紹介しているサイト：
この方法の特徴：
- JavaScriptの容量が約2kbと、とても軽い。
- 背景にpng画像を指定できない。
6.jquery.pngfix.js
配布先・制作者様のサイト：
詳しい使い方を紹介しているサイト：
この方法の特徴：
- jQueryを使用しているのが前提なので、そうでない場合は導入に手間がかかる。
- 背景にリピート描画（background:repeat）ができない。
ここで登場！「DD_belatedPNG.js」
上記の対応策は基本的にAlphaImageLoaderフィルターを使用しており、そのシステム上どうしても描画が重くなる。
さらに背景リピートに対応していなかったり、余計なファイルをいくつも用意しなければいけなかったりと、「IE6憎し」の感情ばかりが高ぶってしまう。
しかし、ここで紹介する「DD belatedPNG.js」である（やっと本題にたどり着いた…）。
これは前述の「AlphaImageLoader」ではなく、「VMC」というものを利用して透過png画像を描画するものである。
処理が重い・背景リピートできない・リンクが機能しない、といったAlphaImageLoaderが根本にある故の問題点がそもそもこの「DD belatedPNG.js」には存在しないのである。
導入も簡単で、ライセンスもMIT。個人的にはこれで透過png問題の最終回答としました！
7.DD_belatedPNG.js
配布先・制作者様のサイト：
詳しい使い方を紹介しているサイト：
この方法の特徴：
- 描画処理がAlphaImageLoaderと比べて断然高速なので、ページをすぐに表示できる。
- 背景にリピート描画（background:repeat）が可能。
- ブロック内の背景にpngを配置しても、ちゃんとリンクが機能する。
＞＞ 「DD_belatedPNG.js」の詳細な使用法と注意点を追加エントリーしました。
ソーシャルブックマーク:
付けられたタグ: 
関連した記事:
Hi, interesting post. I have been wondering about this topic,so thanks for blogging. I will certainly be subscribing to your posts. Keep up the good posts
＞ダイエットに成功した方
こちらこそありがとーございます！
これからもお役に立てるような記事を書くべく、邁進する所存でございます☆
Thanx a lot!
I got jacked on craigslist by some jerkwad using a cell phone line. Jerkwad was speechless when I got his contact info and paid a visit lol!
Reverse Number Lookup
[...] ■http://smkn.xsrv.jp/blog/2009/02/dd_belatedpng_js/ まとめ記事 Permalink|Comments RSS Feed – Post a comment|Trackback URL. [...]
[...] ITキヲスクさんの IE6で透過pngを表示させるオススメscript、「DD_belatedPNG.js」 [...]
[...] IE6で透過pngを表示させるオススメscript、「DD_belatedPNG.js [...]
[...] http://smkn.xsrv.jp/blog/2009/02/dd_belatedpng_js/ [...]
[...] →ITキヲスク IE6で透過pngを表示させるオススメscript、「DD_belatedPNG.js」 こちらで色々な方法を紹介されてます。 一番簡単なのはie7.jsかしら。 [...]
[...] ITキヲスク | IE6で透過pngを表示させるオススメscript、「DD_belatedPNG.js」 [...]
[...] ITキヲスク | IE6で透過pngを表示させるオススメscript、「DD_belatedPNG.js」 (tags: webdesign web css tips html javascript library browser まとめ jQuery hack ie png ie6) [...]
[...] IE6で透過PNGを使いたい もちろん、透過PNGを使用しなくて済むならそれに越したことはないけど、背景色や背景の画像、そしてその表示させたい画像のコンビによってはどーーーしても透過PNGが使いたいときがある。 このとき、対処法にもいろいろあるので、このサイトを参考にしてもらえるといいと思う。ITキヲスク色々な実装の仕方、その利点・欠点、さらに詳しい実装の仕方を紹介しているサイトまで全て紹介してくれている。 この透過PNGによってデザイン性のかなり高い動的サイトを作る事が可能になる。 « design gallery » [...]
[...] http://smkn.xsrv.jp/blog/2009/02/dd_belatedpng_js/ [...]
[...] http://smkn.xsrv.jp/blog/2009/02/dd_belatedpng_js/ これが見つけたDD_belatedPNGのサイトです。 « 年が明けました！ [...]
[...] IE6で透過pngを表示させるオススメscript、「DD_belatedPNG.js」 [...]
[...] ITキオスク コメント (0) [...]
[...] IE6にも半透明pngを表示させる方法 http://smkn.xsrv.jp/blog/2009/02/dd_belatedpng_js/ [...]
[...] ITキヲスク | IE6で透過pngを表示させるオススメscript、「DD_belatedPNG.js」 [...]
[...] IE6でも透過png画像に対応させる方法として掲載した「IE6で透過pngを表示させるオススメscript、「DD_belatedPNG.js」」と、その”DD_belatedPNG.js”の使い方を詳しく書いた「IE6用透過png対応策、DD [...]
[...] かなり使いやすいです。詳細は、IE6で透過PNGを手軽に使えるJavascriptライブラリ「DD_belatedPNG」 | CSS-EBLOGとかITキヲスク | IE6で透過pngを表示させるオススメscript、「DD_belatedPNG.js」 [...]
[...] ITキヲスク | IE6で透過pngを表示させるオススメscript、「DD_belatedPNG.js」. Posted in HTMLのネタ | Tags: CSS, Javascript « CSS 表示位置の調整 position You can skip to the end and leave a response. Pinging is cu [...]
[...] 使用したのはDD_belatedPNG.js。 IE6で透過pngを表示させるオススメscript、「DD_belatedPNG.js」 [...]
[...] かなり使いやすいです。詳細は、IE6で透過PNGを手軽に使えるJavascriptライブラリ「DD_belatedPNG」 | CSS-EBLOGとかITキヲスク | IE6で透過pngを表示させるオススメscript、「DD_belatedPNG.js」 [...]