この頃は、リッチなツールチップ(バルーンヘルプ)が増えてきたように思います。中には、派手すぎて逆に分かりづらかったりするものもありますが、まぁそういうので遊んでみるのもたまには良いかなと思います。
自分なりに実装するとしたら、どのようなものが良いか考えてみました。
- シンプルであること
- 軽快であること
- 吹き出しっぽく見せたいな
- 角丸コーナーが良いな
- 出来ればドロップシャドウぐらいは付けたい
という感じで、矛盾をはらんだリストですが、これを実装するにはどんなが良いか考えてみました。
- シンプルであること → 画像ファイルを使わずにやれるか?
- 軽快であること → フェードなどのエフェクトはなしで
- 吹き出しっぽく見せたいな → あのニョロっとした尻尾みたいなのをどうやって作るか?
- 角丸コーナーが良いな → CSS3に対応していないIEはどうするか?
- 出来ればドロップシャドウぐらいは付けたい → 同上
いつものようにCSS3のサポートが貧弱なIEが足かせとなります。でも、IEでも同じように見せるために四苦八苦するのがweb開発の面白いところでしょう。画像を使わずに、角丸コーナーやドロップシャドウ効果を付けるには、IEのVMLやfilter機能を使うのが良いでしょう。
角丸コーナーは、VMLのroundrectGを使って実現できます [参考記事: VMLやSVGを用いた角丸コーナー ]。ドロップシャドウは、IEのフィルター機能のひとつであるBlurを使うことでOKです[参考記事: IEでCSS3のドロップシャドウを使いたい ]。問題は、吹出しには必須とも言える、あのしっぽみたいなやつですが、これはCSSのボーダー属性を使うことで可能です。トリッキーな(でも正統派)手法ですが、これに関して、レファレンスともいうべきサイトがあります 。このサイトは、以前から知っていていつか利用しようと思っていたんですが、ようやくお世話になる時が来ました
とりあえず、試験的なモデル(プロトタイプ)を作ってみて、それが意図したように実現可能であれば、それを自動化すべくスクリプト化という流れが良いでしょう。プロトタイプが、よさげな感じに仕上がったのでスクリーンショットをば。ppBlogで、これらをどれくらい採り入れるかは未定ですが、引き出しは多ければ多いほど良いでしょう
1. BENIT — 2010/08/19@01:13:51
IEでも同じように見せるために四苦八苦するのがweb開発の面白いところでしょう
心のどこかで否定したい事実ですが、確かにそうかもしれません(笑IE調整が要らないと、時折拍子抜けしたような感覚になるのは否めません。。。
私がぶつかるのはCSSでの調整くらいですが……。