今回は、透かしの効いたアルファpngに挑戦してみました。

これまでは、背景を生かしたデザインにはgif画像が使われてきましたが、アウトラインが汚なかったり、半透明にできなかったりと何かと不便でした。

 

 

一番左がgif画像。 その右から、順に不透明度が100%、60%、20%のアルファpng画像
(ちょっと分かりづらいですが、gif画像は背中の赤い斜めの部分がガタガタです)

それに対して、png形式の画像はアウトラインは滑らかで半透明もOK、さらにファイルサイズも抑えられるなど、Webデザインにおいて欠かせない画像形式になりつつあります。最近では、透かしの効いたフォーマット(アルファpng)の表示をサポートしているブラウザも増えてきたため、いよいよメジャーに使われるようになってきました。


また、アルファpng未対応のIE6においても、iepngfix.jsやGoogleのライブラリであるie7.jsなどを当ててやることで、きれいに表示してくれます。(但し、hoverの背景画像の切り替えが効かなかったり、背景画像のサイズとそのブロックのサイズを一致させないと画像が間延びしたりと、不具合もあります)

今まで、jpg形式やgif形式ではなかなか難しかった透明感のあるデザインが、いとも簡単に、しかも自由自在に作れるようになったわけです。最新のFirefoxやChrome、Opera、Safariといったいわゆるモダンブラウザでは全てサポートしていますし、もちろんIEでも7からサポートしています。これによりデザインの幅が大きく広がったのではないかと思います。

 

ただ、、、今回サイトのリニューアルに際し、サポートしているはずのIE7や8では思わぬ落とし穴があることに気がついてしまいました。

JavaScriptでfilterを動的に操作することでクロスフェードの効果を効かせようとしたところ、IEの7と8だけがこの透かしの効いたアルファpngのところが真っ黒になってしまいます。更に、メイリオなど通常スムージングされるフォントのアウトラインもガタガタになってしまいます。(おいおい)
IEでは、このサイト全体のクロスフェード機能をOFFにしているため、IEをお使いの方は何のことか分からないと思いますが、一応テストページ 「http://www.hiramine.skr.jp/test」を用意しましたのでIEの方は確認してみて下さい。 (ちなみに、正しくはこんな感じです。)

なお、クロスフェードは、
http://www.brandspankingnew.net/archive/2006/09/javascript_css_crossfader.htmlを使っています。(説明は → http://blog.webcreativepark.net/2007/07/21-001725.html

それにしても、なんでIE8がぁ!と思いつつ、、、いろいろネット上を探してみましたが、いい回避方法が見当たりませんでした。IEは、アルファpngをさらに透過させるのが下手なんだなぁと呆れるしかありませんでしたね。
# IE7については、http://blog.l-xs.com/yungsang/2007/02/png_ie_ie7.html にそのことについての言及と対処方法があったものの、やはりhoverによる背景画像の切り替えが効かなくなったり、IE8についてはこの方法でもダメだったため、結局諦めました。(iepngfix.jsの中身も色々といじってはみたんですがね~)

 

と、まぁ細かいことはいろいろと言っても仕方がありませんが、、、

アルファpngは、PhotoshopやFireworksなどはもちろん、フリーのソフト(※)でも簡単に作ることができますので、関心のある方は一度挑戦してみてはいかがでしょうか。
(※ pictbear: http://www.fenrir.co.jp/pictbear/