5 Ways to Spice up Your Images with CSS の Image with Caption を自分なりに書いてみる

相変わらずひねりの全くないタイトルでゴメンナサイ。

ということで先日 5 Ways to Spice up Your Images with CSS を見たときに最後の Image with Caption は違う書き方したいなと思っていたのですが、ちょっと思い立ったのでそれを実践してみました。

なお、今回画像は自分で撮った「影」を使用しています。;-)

5 Ways ～のサンプルで何が問題だと思ったのか

5 Ways to Spice up Your Images with CSS のサンプルを見てなぜ自分が違う書き方したいと感じたかですが、それは opacity を使っていることでキャプションの文字まで透明になってしまうことでした。

まぁコレくらいならいいかな、という許容範囲ではありますができれば自分はここはあまり透明にしたくはない・・・

ということで自分がやってみたサンプルがこちらです。

サンプルを見る

モダンブラウザはやっぱり透過pngで

「やっぱりか」という声が聞こえてきそうですが、IE6を除く一般のブラウザは基本的に透過pngで対応させました。

これだとあとから透過具合を変えたいときに画像を差し替えなきゃいけない！という弊害もあるわけですが、まぁ大体この手のキャプションを使った場合は1度決めたらあまり変える物ではないかな、と思いこうしてみました。

対応ブラウザには RGBA で

まだ対応ブラザは Safari (Webkit) と Firefox3 以上とかだと思うのですが、CSS3 の RGBA colors に対応しているブラウザには RGBA で表示するようにしています。

どうやらOpera も Opera 10 で対応しそうな感じですし、これからもっと使える場面が増えるかもしれませんね。

ちなみにこのブログのデザインにも何カ所か RGBA を使用しています。

尚、Working Draft を見るとIf RGBA values are not supported by a user agent, they should be treated like unrecognized values per the CSS forward compatibility parsing rules. RGBA values must not be treated as simply an RGB value with the opacity ignored.、つまり「もしブラウザが RGBA をサポートしていない場合、透明度を無視して RGB と扱ってはならない」とありますので RGBA を使う際は未対応ブラウザ用に別途色を指定してあげる必要がありますね。
（もちろんそれが必要ないデザインもあるでしょうが）