CSSで吹き出し会話デザインを作る方法

この記事では、CSSで作る「吹き出し会話デザイン」の作り方を紹介します。

1 実装のポイント

CSSで吹き出しを実装するには、擬似要素（:before / :after）を使って三角形を作り、発言者の向きを左右で切り替えます。

2 汎用CSS

/* -------------------
 * 吹き出し会話デザイン
 * ---------------- */

.speech-container { /** 吹き出し全体を囲むコンテナ **/
  display: flex; /** フレックスレイアウトを使用 **/
  flex-direction: column; /** 縦方向に配置 **/
  gap: 20px; /** 各吹き出しの間隔を設定 **/
  margin: 30px 0; /** 上下マージンを設定 **/
}

/* 左側（相手） */ /** 会話の左側（相手側）の吹き出し設定 **/

.speech-left { /** 左側全体のラッパー **/
  display: flex; /** フレックスでアイコンと吹き出しを横並びに **/
  align-items: flex-start; /** 上揃えで整列 **/
}

.speech-left .icon { /** 左側のアイコン部分 **/
  width: 50px; /** アイコンの横幅 **/
  height: 50px; /** アイコンの高さ **/
  border-radius: 50%; /** 円形に切り抜く **/
  margin-right: 15px; /** 吹き出しとの間隔 **/
  background-size: cover; /** 背景画像を要素に合わせて拡大縮小 **/
}

.speech-left .bubble { /** 左側の吹き出し本体 **/
  position: relative; /** 擬似要素配置の基準にする **/
  background: #f0f0f0; /** 吹き出し背景色（グレー） **/
  padding: 12px 16px; /** 内側余白（上下12px・左右16px） **/
  border-radius: 10px; /** 吹き出し角を丸める **/
  max-width: 70%; /** 吹き出しの最大横幅を指定 **/
  font-size: 15px; /** 文字サイズ設定 **/
}

.speech-left .bubble::before { /** 左側吹き出しの三角部分（しっぽ） **/
  content: ""; /** 空のコンテンツを生成 **/
  position: absolute; /** 絶対配置にする **/
  top: 12px; /** 上からの位置調整 **/
  left: -10px; /** 左側に突き出す位置 **/
  border: 6px solid transparent; /** 三角形を作る透明なボーダー **/
  border-right-color: #f0f0f0; /** 右側だけグレー色を付けて吹き出しと同化 **/
}

/* 右側（自分） */ /** 会話の右側（自分側）の吹き出し設定 **/

.speech-right { /** 右側全体のラッパー **/
  display: flex; /** フレックスでアイコンと吹き出しを横並びに **/
  align-items: flex-start; /** 上揃えに配置 **/
  flex-direction: row-reverse; /** 要素の順序を逆転（右アイコン→左吹き出し） **/
}

.speech-right .icon { /** 右側のアイコン部分 **/
  width: 50px; /** アイコン横幅 **/
  height: 50px; /** アイコン高さ **/
  border-radius: 50%; /** 円形にする **/
  margin-left: 15px; /** 吹き出しとの間隔 **/
  background-size: cover; /** 背景画像を全体にフィットさせる **/
}

.speech-right .bubble { /** 右側の吹き出し本体 **/
  position: relative; /** 擬似要素配置の基準にする **/
  background: #d7f2ff; /** 吹き出し背景色（淡い青） **/
  padding: 12px 16px; /** 内側余白設定 **/
  border-radius: 10px; /** 角を丸くする **/
  max-width: 70%; /** 吹き出しの最大横幅 **/
  font-size: 15px; /** 文字サイズ設定 **/
}

.speech-right .bubble::before { /** 右側吹き出しの三角部分（しっぽ） **/
  content: ""; /** 空要素を生成 **/
  position: absolute; /** 絶対配置にする **/
  top: 12px; /** 上方向の位置 **/
  right: -10px; /** 右側に突き出す位置 **/
  border: 6px solid transparent; /** 三角形の透明な枠を作る **/
  border-left-color: #d7f2ff; /** 左側だけ青色を指定して吹き出しと同化 **/
}
    

3 HTML使用例（投稿本文内）

<div class="speech-container">
  <div class="speech-left">
    <div class="icon" style="background-image:url('https://sample.com/wp-content/uploads/20××/××/sample01.png');"></div>
    <div class="bubble">こんにちは！WordPressの吹き出しをCSSだけで作る方法を紹介します。</div>
  </div>

  <div class="speech-right">
    <div class="icon" style="background-image:url('https://sample.com/wp-content/uploads/20××/××/sample02.png');"></div>
    <div class="bubble">お願いします！HTMLとCSSだけでできるなら嬉しいです。</div>
  </div>
</div>
    

4 完成イメージ

5 代用プラグイン

コードを書くのが難しい場合、次のようなプラグインで簡単に吹き出しを作れます。

• Speech Bubble：ショートコードで吹き出し会話を簡単に挿入可能。
• LIQUID SPEECH BALLOON：WordPress公式テーマ「LIQUID PRESS」製の吹き出しプラグイン。

6 まとめ

CSSで吹き出しデザインを作る方法は、軽量で表示も速く、プラグインに依存しません。
HTML構造を統一しておけば、複数のキャラクターやデザインにも対応できます。