コーディングメソドロジー
第10回 透過PNG対策

第10回 透過PNG対策

デザイン性の高いページをコーディングをする際、PNG画像に透過属性を設定する「透過PNG」の扱いに困ったことはありませんか？
透過PNGを使えば背景色や模様に左右されず自由に配置できるので、非常に便利な形式ではあるのですが、Internet Explorer 6.0では、PNG画像のアルファチャンネル※（透明度）に対応していないため、通常の方法では透過PNGを表示させることができません。かといって現在のIE6のシェア率を見る限り、表示推奨ブラウザから外してしまうのも現実的ではありません。
そんな、デザイナーとコーダーとの争いの火種（？）になりがちな、透過 PNG対策が今回のテーマです。

※アルファチャンネル：本来は「直接表示されない色のデータ」全般を指しますが、ここではWEBデザイン上問題になりやすい透明度についての話に限定しています。

デザインの流行とコーディング技術の新たなる戦い

透過PNGを使う際のソースコード例　A

左上からリピートで敷き詰めている背景と、ドロップシャドウがかかったコンテンツエリアの場合、ウインドウサイズによって重なる位置が異なるため、模様のある背景とドロップシャドウをまとめて1枚の画像として切り出すことができません。

iPhoneの流行あたりからでしょうか？最近、背景が透けて見える画像やドロップシャドウを使った透明感のあるデザインのコーディングをご依頼いただく機会が増えました。通常通りのコーディングであれば、透過している画像やドロップシャドウは気にせず、背景ごと切り出せば何も問題はありません。

しかし、ページ全体が可変する場合、コンテンツエリアがどんな位置にあっても、きれいに背景と重なるようにしなければなりません。それを実現するために、透過PNGを使う必要がでてくるのです。

たとえば、模様のある背景の上にドロップシャドウがかかるようなデザインの場合、ほとんどのモダンブラウザでは、ソースコードAのように、単純に背景と透過PNGを重ねるだけできれいに表示できます。しかしIE6では透明度を認識せず、透過すべき部分が表示されなかったり、グレーになったりします。

マイクロソフトの独自仕様にも対応

これを解決するためにマイクロソフト社から提示されている対策が、DirectXのAlphaImageLoaderを使って表示させるというものです。
「iepngfix」や「alphafilter」といったJavaScriptを利用し、IE6でも透過PNGを実現できるのです。