画像なしで吹き出しみたいなもの

category-icon

 この頃は、リッチなツールチップ(バルーンヘルプ)が増えてきたように思います。中には、派手すぎて逆に分かりづらかったりするものもありますが、まぁそういうので遊んでみるのもたまには良いかなと思います。

 自分なりに実装するとしたら、どのようなものが良いか考えてみました。

  1. シンプルであること
  2. 軽快であること
  3. 吹き出しっぽく見せたいな
  4. 角丸コーナーが良いな
  5. 出来ればドロップシャドウぐらいは付けたい

という感じで、矛盾をはらんだリストですが、これを実装するにはどんなが良いか考えてみました。

  1. シンプルであること → 画像ファイルを使わずにやれるか?
  2. 軽快であること → フェードなどのエフェクトはなしで
  3. 吹き出しっぽく見せたいな → あのニョロっとした尻尾みたいなのをどうやって作るか?
  4. 角丸コーナーが良いな → CSS3に対応していないIEはどうするか?
  5. 出来ればドロップシャドウぐらいは付けたい → 同上

 いつものようにCSS3のサポートが貧弱なIEが足かせとなります。でも、IEでも同じように見せるために四苦八苦するのがweb開発の面白いところでしょう。画像を使わずに、角丸コーナーやドロップシャドウ効果を付けるには、IEのVMLやfilter機能を使うのが良いでしょう。

 角丸コーナーは、VMLのroundrectGを使って実現できます [参考記事: VMLやSVGを用いた角丸コーナーLink ]。ドロップシャドウは、IEのフィルター機能のひとつであるBlurを使うことでOKです[参考記事: IEでCSS3のドロップシャドウを使いたいLink ]。問題は、吹出しには必須とも言える、あのしっぽみたいなやつですが、これはCSSのボーダー属性を使うことで可能です。トリッキーな(でも正統派)手法ですが、これに関して、レファレンスともいうべきサイトがありますLink 。このサイトは、以前から知っていていつか利用しようと思っていたんですが、ようやくお世話になる時が来ました:)

 とりあえず、試験的なモデル(プロトタイプ)を作ってみて、それが意図したように実現可能であれば、それを自動化すべくスクリプト化という流れが良いでしょう。プロトタイプが、よさげな感じに仕上がったのでスクリーンショットをば。
cutePop
なかなか良い感じでは。FirefoxですがIEでもほぼ同じ。
 

実際のデモのページはこちら。Link

 で、かなり手抜きですが、これを元にスクリプト実装したのが以下。

実際のデモのページはこちら。Link

 ppBlogで、これらをどれくらい採り入れるかは未定ですが、引き出しは多ければ多いほど良いでしょう

   

— posted by martin at 01:57 am   commentComment [2]  pingTrackBack [0]

この記事に対するコメント・トラックバック [2件]

scrollUp1. BENIT — 2010/08/19@01:13:51

IEでも同じように見せるために四苦八苦するのがweb開発の面白いところでしょう

心のどこかで否定したい事実ですが、確かにそうかもしれません(笑
IE調整が要らないと、時折拍子抜けしたような感覚になるのは否めません。。。?;w)
私がぶつかるのはCSSでの調整くらいですが……。

Owner Comment martin Website  2010/08/19@09:15:37

BENITさん、こんにちは。実際のところ、開発の大部分をIEのバグやら未実装ゆえの工夫に費やしている気がします。それでもダメなときはだめですけどねぇ:(
IE9では従来の問題は殆ど解消されそうな気がしますが、これとて広く流布するのは4-5年先の話でしょうし。

この記事に対する TrackBack URL:

設定によりTB元のページに、こちらの記事への言及(この記事へのリンク)がなければ、TB受付不可となりますのであらかじめご了承下さい。

コメントをどうぞ。 名前(ペンネーム)と画像認証のひらがな4文字は必須で、ウェブサイトURLはオプションです。

ウェブサイト (U):

タグは使えません。http://・・・ は自動的にリンク表示となります

:) :D 8-) ;-) :P :E :o :( (TT) ):T (--) (++!) ?;w) (-o-) (**!) ;v) f(--; :B l_P~

     
T: Y: ALL: Online:
Created in 0.0045 sec.
prev
2024.3
next
          1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31