こんにちは。paperboy&co.の鈴木です。

1月ももう終わり。お正月のオフモードから、すっかりいつもの制作モードへと気持ちはシフトしてらっしゃるかと思いますが、いかがお過ごしですか。プログラミングを使って、デザイナーとの連携を深めていく、このコラム。第3回目のテーマは「アルファチャネル透過PNG画像」です。

Webサイトで半透明の画像が使える!?

プログラマーの方はあまり意識することがないかもしれませんが、Webデザイナーは誰でも一度は、「あぁ、背景画像に半透明なドロップシャドウをのせらることができたらいいのになぁ…」と願うものなのです。

ご存じの通り、HTMLページにおいては、透過する画像は「透過GIF」のみというのが常識。半透明の表現は不可能とされてきました。けれども、実はアルファチャネルを使って透過する方法が2つあります。

• アルファチャネル透過PNG（32ビット）を使う方法
• Flashムービーを使う方法

今回は、その1つ目。PNG画像を使う方法をご紹介します。

なぜ、これまで透過PNGが使われてこなかったのか？

最近のブラウザ（Windows IE7、Netscape 7.1、Firefox、Safari、Mac IEなど）では、アルファチャネルをもった透過PNG画像は、<img>タグを使って配置するだけで、半透明に透過します。

しかし、現在メインブラウザと考えられるWindows IE6では、PNG画像の半透明情報を<img>タグやbackground設定では表現してくれないのです。そのため、これまで透過PNG画像は使いたくても使えないものとして、指をくわえているしかありませんでした。

Windows IE7は透過PNG画像に対応していますが、Windows IE6以前のブラウザが世の中から消滅するまで、大手をふって利用できない、と考えると先の長い話ですね。

Windows IEのAlphaImageLoderが解決の鍵

それでは、もう透過PNG画像はあきらめてしまうしかないのでしょうか。実は、Windows IE5.5の時代から、IE専用のスタイルフィルタを使うことで、PNG画像を透過させる方法があったのです。

それが…

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader

…です。下記のページに、その使い方が紹介されていますので、参考にしてみてください。

このフィルタを使うと、PNG画像をブロック要素（<div>など）の背景画像のような振る舞いで、透過表示させることができます。つまり、Windows IE6以外では、普通に<img>タグやbackground設定でPNG画像を表示し、Windows IE6の場合のみ、このフィルタを使うようにすればいいのです。