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

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

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

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

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

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

まず1の問題。

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

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

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

次に2の問題。

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

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

最後に3の問題。

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

1. AlphaImageLoader を使う
2. JavaScript を使う

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

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