IE5.5・IE6で半透明PNGを使いこなす

IE5.5・IE6が半透明PNGに対応してないために、半透明を使用したデザインのコーディングを諦める（または妥協）という苦い経験をしたことはないでしょうか。
そんな人のため（私のためでもありますが・・・）に、IE5.5・IE6で半透明PNGを使う方法をまとめました。
半透明PNGの使い方を覚えて頼れるコーダーを目指しましょう。

※サンプルを確認するためにはIE6でご覧ください。

IE独自拡張のfilterを使う

サンプル（使用前）

サンプル（使用後）

◇良いところ

・Java Scriptを使わず手軽に使用できます。

◇悪いところ

・CSSで背景に指定したものには使えません。
・クリッカブルマップが使えません。
・div などのタグで対象画像を囲うため、場合によっては無駄なタグを追加する羽目になります。

◇使用時の注意点

・対象画像の幅・高さをCSSプロパティの width と height で必ず指定しましょう。

◆サンプルを表示する
◆サンプルデータをダウンロードする

iepngfix.htcを使う

サンプル（使用前）

サンプル（使用後）

◇良いところ

・Java Scriptを使わず手軽に使用できます。
・HTMLソースに無駄なコードを書かずに使用できます。

◇悪いところ

・CSSで背景に指定したものには使えません。
・クリッカブルマップが使えません。

◇使用時の注意点

・不透明にならなかった場合は iepngfix.htc へのパスを確認しましょう（CSSではなくHTMLからのパスになります）。
・画像のリンク切れアイコンが表示されたら iepngfix.htc の15行目にある blank.gif へのパスを確認しましょう。

◆サンプルを表示する
◆iepngfix.htc をダウンロードする
※iepngfix.zip というリンクからダウンロードできます。サンプルも同封されているようです。

iepngfix.jsを使う（CSSの背景に対応できます！）

これまでの2点はCSSの背景に指定した不透明PNGには対応していませんでしたが、これを使うことで解決できます。

サンプル（使用前）

サンプル（使用後）

◇良いところ

・Java Script一つで動きます。
・HTMLソースに無駄なコードを書かずに使用できます。

◇悪いところ

・背景のリピートができない。
※背景を指定した要素の大きさに背景画像がフィットします。

◇使用時の注意点

・Java Scriptがオフだと機能しません。
・背景を指定した要素に画像の width と height を指定しましょう。

◆サンプルを表示する
◆iepngfix.js をダウンロードする

——

どれもクリッカブルマップが使えなかったり、Java Scriptがオフだと機能しなかったりと、完璧とはいえない部分があります。そのため、それぞれの良い点・悪い点を把握して状況に応じた使い方をしましょう。