画像を一切使わずにCSSだけで吹き出しツールチップを実装する

カテゴリ:CSSだけでアクションを作る 2009年3月 6日 17:40

CSSだけで吹き出しツールチップのサンプル画像

マイコミジャーナルの「"吹き出し"を画像使わずにCSSで作る方法」で紹介されていた"CSS だけで吹き出しを作る方法"を利用して、CSS だけで作る吹き出しツールチップのデモを考えてみました。

今回のサンプルでは、画像も使っていません。
CSS による border の生成のされ方をうまく使って三角形を作り出します。
以下にデモと、今回の肝である画像を使わずに三角形を作り出すことについて書きたいと思います。

CSSだけで吹き出しツールチップを実装するデモ

▼EntryMore▼

まず、なぜ三角になるのか、というのを説明したいと思います。
border プロパティは、上下左右、個別に設定することができます。
普通は下だけだったり、全体だったりに使用しますし、あまりに太い設定にはしないと思います。

太い設定にして、上下左右とも色を変えてみるとなぜ三角になるのか、が分かりやすいと思いますので、以下にサンプルを表示します。

border のサンプルです。

さて、感のいい方なら分かったと思います。
三角の頂点をどちらに向かせたいか、によって設定するプロパティは異なりますが、今回のデモと同じで話を進めたいと思います。(つまり、下に頂点が来る三角(▼)を作っていきます)

ではまず、上記のサンプルを上辺だけにしてみましょう。

border の上辺のサンプルです。

さて、だんだん三角形が見えてきましたね。
上のサンプルのポイントは、border-left, border-right の色を透明(transparent)にし、太さを設定しているところです。
これがないと、上の border はただの太い直線になってしまいます。
(※IE6では border に対して transparent が指定できないので、別途背景と同じ色(例えば白とか)を指定してやる必要があります)

さて、あとは両端の斜めの部分をくっつけてやれば無事、三角形になります。
といっても大したことはしません。
横に長くなるのは横幅があるためなので、単純に width を 0 にしてやります。

 

これで無事、三角形ができました。
ただ、このままではちょっとサイズが大きすぎるので、実際に使う場合は border の太さを調整して使ってください。

ちなみに border-top(border-bottom) が三角の高さを、左右の幅が傾斜を決めます。
また、サンプルの場合左が垂直な三角になっていますが、左の border の値を 0 にすることで傾斜をなくすことができます。

このあたりの形については、自分の好みの形になるように微調整してみてください。
三角形が作れたら、あとはそれを position: absolute で位置指定して、噴出しに見えるように配置すれば完成です。

さらにデモでは吹き出しに対して枠がついているように作っていますが、作り方は単純で三角形になる要素を入れ子にして、中の三角の色を吹き出しの背景の色と同じにすることでまるで枠がついているように見える、というわけです。

以下に、デモの CSS ソースを表示します。
吹き出しの肝は、「. tooltipAngle と . tooltipAngleInner」の部分です。
ツールチップとしての表示に関しては以前にエントリーを書いているのでそちらを参考にしてください。
»ツールチップ(ポップアップヘルプ)を改良してみた。

※ webkit 系のブラウザである Google Chrome と Safari では、さらにフェードインなどのアニメーションも指定してあるので、そちらのブラウザでも一度見てみてください。
CSS だけでここまでできるのか! と思えると思います(*'-')

CSS ソース

HTML ソース

合わせて読むと役に立つかもなエントリー

この記事のカテゴリー一覧を見る⇒CSSだけでアクションを作る

  • このエントリーをはてなブックマークに追加

トラックバックURL

http://css-eblog.com/cgi-bin/mt/mt-tb.cgi/126

コメント

1 - びぃ さん

初めまして。nこちらのツールチップ。ブログで使わせて頂きます。nJavascriptを使ったものは。私には導入が難しくて。nマウスオーバーを利用したツールチップもどきを使っていたのですが。n『ふきだし風』にどうしても。未練がありまして(^_^;)。n管理人さまの公開されているソースをコピー&ペーストさせて頂き。n憧れのふき出し型ツールチップ導入できました(^_^)。n使用させて頂く旨。ここで。報告させて頂きます。n何か問題がございましたら。お手数ですが。お知らせ下さい。nありがとうございました

2009年6月 7日 15:20

2 - えど Author Profile Pageさん

>>1 - ぴぃさんnコメントありがとうございます!n参考にしてもらったようでうれしい限りです(*'-')ここで公開しているものは気にせず使って頂いて構いません。n(ただ、外部のサイトの紹介などの場合はそちらのサイトの規約なんかを参考にしてください)

2009年6月 7日 15:30