あまり WEB上で流通していない？透過PNG使用のテクニックを紹介します。透過PNGって半透明の画像が使えるフォーマットだけど、ブラウザによって実装状況が違ってて、半透明使ったが良いが見栄えがおかしくなったみたいなことがあるヤツです。よってここから先はWEBデザイナーさん向けのマル秘な情報です。
マル秘というか、意味がありそうでないので、一般的ではないだけです。アイザワのコダワリが故に、存在するような技です。透過PNGを適当にしか表示しないというか透過されない IEとかでどんな状況になるかは説明を省きます。で、IE7以降はちゃんと表示されるので必要はないんだけど、それ以前のバージョンが対象です。まだまだ IE6は捨てられないでしょ。
現状は汚いコーディングでそれなりの透過をさせる技はあるわけです。やっぱ、半透明って需要ありますから。でも今後は半透過PNGをサポートするブラウザの比率が高くなっていきますから、もう汚いコーディングは止めて、そこそこの労力で旧ブラウザでもそこそこの表示が出来てたら良いんじゃない？っていうのが、この記事の主旨。
案外知られていませんが、PNGのフォーマットには背景色（bKGB）ってのがある。で、IE6はこのbKGBの上に半透明をオーバーレイさせて描画させてる。だけれども、一般的な画像編集ソフトウェアでPNGを作っちゃうとbKGBプロパティを持っていないので、IEではデフォルトのグレーの上に半透明を描画してるの。だから、期待通りな表示になんない。
でね、自分でPNGのbKGBフォーマットを変更しちゃって、そこそこの見栄えで我慢しようっていうのがアイザワのテクニック。結局透過はしないんですけどね。旧ブラウザのためにあれやこれやと妙なコトするよりかは健全です。実践したサイトは「Online Shockwave3D Games」。文字の背景に透過した黒いPNG置いてる。でも、IE6だと透過せず黒。でもテクニック使ってないとダサイグレーに。 グレーになるよりも、面倒なコーディングして透過させなくても、そこそこに見られたら良いんじゃないの。ってことで透過PNG使うときはこのテクニックを良く使います。
シンプルなコーディングが大好きで、でも大抵のブラウザでそこそこのPNGを表示したいって方向けの技でした。で、このPNGのbKGBプロパティを変更できるツールってあるのかな？ アイザワは自前で作ってるんですが、なんか反応あれば公開します。
