CSSで文字数に合わせて吹き出しの横幅を変える簡単な方法

ただのテキストだとつまんないんだよなー。差別化できる良い方法ないかなー

と思った時によくやるのが、漫画のセリフのように吹き出しにする方法。

当サイトのカスタマイズ系の記事の中でも吹き出し関連の記事はよく読まれていて、コメントや問い合わせの多さから個別の対応をやめたほどです。

画像と吹き出しテキストで会話風にするHTMLとCSS Fantastech!! もっと見る

WordPressで会話風の画像とテキストをコピペで簡単表示！ Fantastech!! もっと見る

この吹き出し関連の質問（要望）にはすべてお答えして、必要に応じてコードをアップデートしていたんですが、個人的に良い質問だと思ったのが、文字数に合わせて吹き出しの大きさを変えたいというもの。

文字数が多いといいんですが、「はい」や「うん」のように文字数が少ないと余白ができるので、それが嫌だったようです。

文字数が少ないと吹き出しの中の余白が目立つ

このニーズに僕がどう応えたのか、今回はそのやり方を詳しくご紹介するので、ぜひ参考にしていただければと思います。

ちなみに、先述の吹き出し関連記事のコードはすでにアップデート済みなので、コピペですぐに使いたい場合はチェックしてみてください:)

吹き出しの余白問題

吹き出しの仕組みについては別記事でも書いていますが、難しいのは三角の部分を作る部分だけで、メインは画像とテキストを横並びにしているだけのシンプルな構成。

画像にfloatを使い、marginでテキストに画像より少し大きめの余白を作ればいいだけで、これがよくある吹き出しの作り方だと思います。

（inline-blockだと右からの吹き出しに対応できないため基本はfloat）

ただ、これだと冒頭でご説明したように吹き出しの中に余白ができてしまいます。

その対処法としてテキストにもfloatを使うと、文字数が少ない（一行）場合は上手くいきますが、文字数が多くなって複数行になるとテキスト部分が下にズレてしまいます。

変化球として、画像をabsoluteで固定する方法もありますが、画像の高さがなくなるので文字数が少ないと他の要素とのバランスが悪くなってしまいます。

ただ余白をなくすだけなのに、このように意外とややこしいことになるんですよね。

ベストな対処法

ここまでの内容を踏まえると、

一行にも複数行にも対応
文字数に合わせて吹き出しの大きさが変わる
画像サイズやフォントサイズの変化に対応
左右の吹き出しに対応

といったCSSになると便利ですよね。

では、どうすればいいかというと、ズバリ「吹き出しの最大幅を指定する」のがベストな対処法です。

サンプルコード

例えば、60×60の正方形の画像で左からの吹き出しを作るとします。

HTMLの構成はこんな感じ。

<div class="balloon">
<figure class="balloon-image-left">
<img src="fantastech.net/img/icon.png" alt="シェフのアイコン">
<figcaption class="balloon-image-description">
シェフ
</figcaption>
</figure>
<div class="balloon-text-right">
<p>
こんにちは
</p>
</div>
</div>

そして、CSSはこちら。（三角の部分など必要ないところは省いてます）

.balloon {
margin-bottom: 2em;
}
.balloon:before,.balloon:after {
clear: both;
content: "";
display: block;
}
.balloon figure {
width: 60px;
height: 60px;
}
.balloon-image-left {
float: left;
margin-right: 20px;
}
.balloon-text-right {
position: relative;
padding: 10px;
border: 1px solid #aaa;
border-radius: 10px;
max-width: -webkit-calc(100% - 80px);
max-width: calc(100% - 80px);
display: inline-block;
}
.balloon-text-right {
float: left;
}
div,p {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

ポイントはテキスト部分（.balloon-text-right）に指定しているmax-width。

calcについては後述しますが、これは「親要素の横幅（100%）から80px（画像サイズと画像に設定した余白の合計）引いた値を最大幅に指定する」という意味になります。

このように最大幅を指定することで、複数行の時にテキスト部分が下にズレることがなくなるため、文字数関係なくキレイな吹き出しを作れるわけです。