CSS のみで吹き出し

hail2u.net - Weblog - Pure CSS な吹き出し に触発されて、画像や JavaScript を使わずに CSS だけを使って「吹き出し」を作る方法を僕も考えてみた。

マークアップは 2 重の要素があれば OK。ここではそれぞれ bubble と body というクラスを付与した div と p を例に説明する:

<div class="bubble">
  <p class="body">Speech!</p>
</div>

CSS の最低限必要な部分のみを抜き出すと以下のとおり。これは背景が黒いボックスの下に左向きのしっぽを出す場合の例:

.bubble {
  float: left; /* または position: absolute; */
  border-left: 10px solid black;
  border-bottom: 10px solid transparent;
  -border-bottom-color: white; /* for IE6 */
}
.bubble .body {
  float: left; /* または width を��示 */
  margin-left: -20px;
  background: black;
  color: white;
  -position: relative; /* for IE6 */
}

外側の .bubble は吹き出しの「しっぽ」部分を担当する。「ボディ」の幅は内側の要素によって決定するので、ここでは width を指定せず、position: absolute; を指定するか、左右どちらかにフロートさせる。しっぽ部分は隣接する 2 辺のボーダーの組み合わせによって作られる。このテクニックはいろんなサイトで紹介されているので詳細は省略。ただ、IE6 は border-color プロパティの値として transparent が無効なので、吹き出しがテキストや画像に重なる可能性がある場合は難しい。背景が単色なら上記のように背景色を明示してしまえばいける。

内側の .body は吹き出しのボディ部分。幅を固定する場合は width プロパティに値を明示し、またもしこの要素がインライン要素なら display: block; でブロック要素化する。テキストの量による可変幅にするなら左右どちらかにフロート。ここまでだとしっぽがボディの外側にある状態なので、マージンにマイナス値を指定して外側の要素の外側にはみ出させることにより、しっぽをボディの内側まで移動させる。

あとは、.bubble のボーダーの太さでしっぽの大きさを調整したり、.body に border-radius を指定したりして装飾する。ちなみに IE ではしっぽの角度を 45° に (つまり .bubble の 2 辺のボーダーの太さを同じに) しないと斜めのラインが汚くなるようなので注意。デモ にはいくつかのパターンを用意したのでご参考にされたし。

さっそくこのサイトでもブログ記事のコメント数を表示するのに採用してみたけど、「0」ばかりで軽く落ち込んだ。