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

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

2005-11-29 (火)
Memorandum

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

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

＜参考リンク＞

link Afternoon Cafe: ieでPNGを表示させる

link PNG in Internet Explorer: How to Use

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

今日 link del.icio.usでたまたまみつけたのが↓

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

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

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

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

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