透過PNGを使う時に注意すること

透過PNGが透過GIFより優れていることはいろいろあると思いますが、僕が一番優れていると思うのは、背景がどんな状態でもキレイに透過してくれることです。

透過GIFをグラデーションのかかった部分に乗せるとどうしても汚い部分ができてしまいます。しかし透過PNGだとそういうことが無いので、今後透過GIFよりも使われることが多くなっていくと思います。

僕個人としてはどんどん使っていきたいものなのですが、透過PNGを使う際には気をつけなきゃいけないこともあると思います。
具体的には、

1. 本当に透過PNGを使わなきゃいけないのか？
2. ターゲットブラウザをどこまでの範囲にするのか？
3. IE6など、対応していないブラウザに対してどういう処理をするのか？

ということ。
他にもいろんな考えがあるかもしれませんが、このような問題をクリアしないとなかなか使いにくい状態に陥ると思います。

まず１の問題。

「透過PNGを使う時に～」というタイトルを根本から否定することにもなりますが、実は一番大事なことだと思っています。

使わないでも同じデザイン・機能を表現できるなら透過PNGを使わないほうが確実に安全なサイト作りができると思いますｗ
しかも使わなくても何とかなる場合が結構あると思います。

以前作成したサイトに透過PNGを使ったのですが、対応ブラウザの件（後述）で余計な手間がかかってしまうことも含め、透過PNGを使う必要はなかったと思ってます…。

次に２の問題。

すべてのユーザーがブラウザを最新にしているならまだしも、未だにIE6もしくはそれ以下のブラウザを使っている人も結構います。

そういった人達もターゲットにしたいサイトならば、透過PNGを使わない、もしくはjavascriptを使って透過しているように見せるなどの対処が必要になります。
この場合なら使わないのが最善策な気がします。

最後に３の問題。

２の問題があったとしても透過PNGを使うことを諦められない！という場合には、IE6など古いブラウザでもちゃんと見れるようにしないといけません。
具体的な対応策としては、

1. AlphaImageLoaderを使う
2. javascriptを使う

というもの。
ここらへんが一般的なんじゃないかと思います。

長くなったので、次回に続きます。