初心者でも簡単！CSSだけで吹き出しを作る方法｜基本から応用デザインまで解説

プログラミング

公開日: 2026/01/26

※この記事にはプロモーションを含みます

CSSだけで吹き出しを作る方法

はじめに

Web サイトやブログで会話風の表現を取り入れたいときに便利なのが吹き出しです。
画像を使わず、HTML と CSS だけで実装できれば、デザイン変更やレスポンシブ対応も柔軟に行えるようになります。

一方で、実際に CSS で吹き出しを作ろうとすると、三角部分の表現方法や配置バランス、スマートフォン対応などで悩むケースは少なくありません。

本記事では、CSS 吹き出しの基本構造から、擬似要素を使った実装方法、さらにおしゃれに見せるデザインの工夫までを段階的に解説します。

基本の吹き出しの作り方

吹き出し本体（四角形）を作る

CSS で作る基本の吹き出しは、吹き出し本体（四角形）＋三角形の組み合わせで成り立っています。

まずは、吹き出しの土台となる HTML を用意します。

<div class="balloon">これはCSSで作る吹き出しです。</div>

次に、CSS で吹き出しの本体部分を作ります。
まずは背景色・余白・角丸を指定します。

.balloon {
  background-color: #f2f2f2;
  padding: 16px 20px;
  border-radius: 12px;
  width: 300px;
  height: 100px;
  font-size: 16px;
  line-height: 1.6;
  position: relative;
}

吹き出しの見え方1

この CSS を適用すると、単なるテキストボックスが「吹き出しの本体」のような見た目になります。

特に、 padding と line-height は読みやすさに直結するため、実装時は必ず調整しましょう。

三角部分を作る

最近は、三角形のために HTML 要素を増やすことは避け、擬似要素（::before / ::after） で実装するケースが一般的です。

擬似要素を使えば、吹き出し本体の HTML 構造をシンプルに保ったまま、CSS だけで三角形を追加できます。
その結果、コードの読みやすさに繋がり、後からデザインを変更する場合でも HTML を修正する必要がありません。

また、位置の調節も position を使用して柔軟にできるため、様々な応用が可能です。

.balloon::after {
  content: "";
  position: absolute;
  top: 20px;
  left: -24px;
  width: 0;
  height: 0;
  border: solid 12px;
  border-color: transparent #f2f2f2 transparent transparent;
}

吹き出しの見え方2

擬似要素についてのわかりやすい解説は【初心者向け】CSS 疑似要素 ::before と ::after ｜基本と応用をわかりやすく解説をご覧ください。

この方法では、吹き出し本体を基準にして三角形を配置できます。

HTML を変更せず、CSS だけで完結するため、再利用性が非常に高い実装です。

border で作る三角形の仕組み

CSS で border を使って三角形を作る方法は、一見すると少し不思議に感じるかもしれません。

上下左右の border は、もともと次のような形を持っており、それが幅と高さが 0 の要素の中心から広がることで、4 つの三角形が合わさった状態になります。

borderで作る三角形

不要な方向の border を非表示（transparent）にすることで、色を付けた border だけが残り、結果として 1 つの三角形に見えるようになります。

つまり、border 三角形とは「三角形を描いている」のではなく、見せたい三角形だけを残している表現方法なのです。

位置調整のポイント

三角形の位置は、少しずれるだけでも不自然に見えてしまうため、以下の点を意識して調整しましょう。

三角形の位置調整

特にレスポンシブ時は、vw や%などの可変値を使用して柔軟に対応することで、デザインの再現性を高められます。

吹き出しの応用デザイン

影で立体感を出す

影を追加するだけで、吹き出しに立体感が出るためデザインに馴染みやすくなります。

.balloon {
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2);
}

吹き出しの見え方3

clip-path を使った応用

角丸や影を付けるだけでも吹き出しとして成立しますが、clip-path を使うとデザイン性の高い吹き出しを作ることができます。

clip-path とは、CSS を使って要素を三角形や多角形など、自由な形に切り抜ける仕組みです。

座標の指定は直感的に分かりづらいことも多いため、オンラインのclip-path ジェネレーターを使って形を作り、生成されたコードをベースに調整すると効率よく実装できます。

また、吹き出しの四角形と三角形を別要素として扱わず、全体を 1 つの形状として表現できるため境界が自然に繋がりズレなども起こらなくなります。

<div class="balloon">clip-pathで作れる！<br />吹き出しの応用デザイン</div>

.balloon {
  background-color: #74e5c5;
  padding: 16px 20px;
  border-radius: 12px;
  width: 300px;
  height: 200px;
  clip-path: polygon(
    0 30%,
    48% 0,
    100% 30%,
    92% 73%,
    39% 100%,
    52% 78%,
    8% 73%
  );
  line-height: 1.5;
  display: grid;
  place-content: center;
}

clip-pathを使った吹き出しの例

このような複雑な形状も吹き出しも clip-path を使って簡単に実装できます。

まとめ

本記事では、HTML と CSS だけで吹き出しを作る方法について、基本構造から応用デザインまで解説しました。

吹き出しは 「四角形の本体」と「三角形」の組み合わせ で成り立っており、HTML ではシンプルな土台を用意し、見た目や形状は CSS で制御するのが基本となります。

吹き出しは、一度仕組みを理解すれば、ブログの補足説明や LP の訴求、FAQ など幅広い場面で活用できます。ぜひ本記事のコード例を元に、自分の理想の吹き出しを作ってみてください。

こうした基礎から HTML/CSS をを学びたい方には、WEBMASTERS がおすすめです。
Web 制作に必要な基礎知識と実践が効率よく身につくため、学習効率が大幅に向上します。
また、学習環境や教材が充実しており、独学ではつまずきやすいポイントも現役エンジニアがしっかりサポートしてくれます。

この記事を
シェアする！