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

1

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

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

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

画像と吹き出しテキストで会話風にするHTMLとCSS
「隣の芝生は青く見える」ってよく言いますけど、一体どんな意味なんですかね。芝生っ...
吹き出しサンプル
WordPressで会話風の画像とテキストをコピペで簡単表示!
以前、普通のテキストを会話風の吹き出しにする方法について書きました。 ht...

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

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

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

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

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

吹き出しの余白問題

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

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

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

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

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

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

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

ベストな対処法

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

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

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

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

サンプルコード

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

HTMLの構成はこんな感じ。

<div class="balloon">
<figure class="balloon-image-left">
<img src="moriawase.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(画像サイズと画像に設定した余白の合計)引いた値を最大幅に指定する」という意味になります。

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

デモ

See the Pen VxRWgP by Chef (@chef-aomori) on CodePen.

calcを使う理由

今回、親要素の横幅指定にcalcというものを使っています。

このcalcは値を動的に計算してくれる便利な関数。

親要素の横幅がわかっていたり、画像サイズを相対値で指定していれば別ですが、レスポンシブデザインの場合は親要素の幅がわかりません。

そこで、このcalc関数を使って親要素(100%)から画像と余白の合計値を引くことで動的に値を指定しています。

まとめ

  • 左からの吹き出ししか使わない
  • HTMLの構成を右と左でガラッと変える

みたいなケースだと他にもやり方がありますが、文字数に合わせて吹き出しの横幅を変えるやり方としては今回ご紹介したものが一番簡単だと思います。

もちろん、同じような構成のものであれば吹き出し以外でも使えるので、ぜひ活用してみてください:)

カテゴリー

この記事を書いた人:シェフ

このサイト「MORIAWASE」の運営者。少しでも多くの人の悩みや不安を解決するためにハウツー記事を中心に更新しています。お問い合わせはページ下部のお問い合わせページから。フォローやシェアは大歓迎です!