caramel*vanilla > 透明PNG画像をハックなしに異なるブラウザで表示

ブラウザによるふるまいの違い

blogやサイトを作りはじめて慣れてくると各ブラウザによるふるまいの違いに悩まされるようになります。
特にblogを始めてデザインをCSSで組むようになってから「あっちを立てればこっちが立たず」的局面に陥り投げ出したい気分になる事も…
CSSだけでなくPNG画像の表示でもブラウザの違いが生じます。
クソブラウザとしても有名な圧倒的なシェアを誇るIEはアルファチャンネル(透明)のPNG画像がまともに表示されないんですよね…
GIF形式でももちろん透過処理はできますがいろんな背景の上でもドロップ&シャドウをキレイに見せるにはアルファチャンネルのPNG画像が最適な気がします。

IEでもPNGを表示させるためのTips集

IEでもPNGを表示させるためのTipsは探せばいろいろ出てきます。
- 参考リンク -

• Afternoon Cafe: ieでPNGを表示させる
• 半透明pngを表示する ～CSSテクニック～
• PNG-24 Alpha Transparency With Microsoft Internet Explorer 5.5 or better (MSIE 5.5+)
• PNG in Windows IE
• Pixy-style CSS no-preload rollovers, with PNG support for IE
• PNG Behavior (WebFX)

でも正直面倒でどれも実際に試した事はありませんでした。
だって普通にimg srcだけで済ませたいじゃないですかー
del.icio.usでたまたまみつけたのが↓

Kevin A. Freitas, Web Developer:One PNG, two browsers, no hacks

そのタイトル通り、1つのPNG画像&ハックなしで異なるブラウザに表示しちゃおうってお話。
こりゃ飛びつきました。
んで、実際に試してみました。

Fireworksで画像を作成

このTipsはMacromedia FireworksでPNGを作成して保存する際ほんのちょっとした点に気をつければいいだけなんでものすごく簡単です。
面倒なこと一切ナシで普通に画像を貼るだけでOKです。
もしかしたらものすごく当たり前の話だったのかも…
いかに使いこなしてないかって事がバレバレですねぇ :P

画像の作成の際に注意すべき点は不透明な輪郭を作るくらい。(なくても可)
あとは保存する際、形式をPNG 8にして下の方のプルダウンから透明を選択します。
基本的にこれだけ(だと思う…)

一応保存画面のスクリーンショットを撮ってみました。
(クリックで拡大します)

サンプルページも作ってみたんで実際の表示を確認してみてください。

サンプルページ

サンプルページをFirefox/Opera/IEの各最新バージョンで表示した場合のスクリーンショットも撮ってみました。
(全てWinXPです)

無地以外の背景画像を使う場合、透過処理をしたGIFではドロップ&シャドウの部分が微妙な感じになってしまいます。
IEでもドロップ&シャドウを完璧に再現したいなら上にあげたjavascriptを使う方法などを施した方がいいと思いますが面倒なハックなしでそれなりに各ブラウザで表示されるので結構使えるTipsだと思いますです♪

そういえばIE7ではアルファチャンネルの画像もサポートされるそうです。
ただリリース後もIE7以前のユーザーは多いでしょうから当分は表示方法に悩まされそうですね :(