本文へスキップ
  1. Web BENTO CSS
  2. カテゴリ一覧
  3. 吹き出し・ツールチップ
13 / BUBBLE 12 パーツ

CSS吹き出しデザイン 12選

コピペで使えるCSS吹き出しのサンプル集。三角のしっぽ付きバブルからチャット風の会話、ホバーで動くツールチップまで、シャッフルで色や角丸のバリエーションを試せます。表示中のプレビューとコードは常に一致するので、気に入ったらそのままコピーしてください。クラス名は .bnto-bubble-down 形式です。

該当するパーツが見つかりませんでした。

こんにちは！

吹き出し（下しっぽ）

.bnto-bubble-down {
  position: relative; display: inline-block;
  background: hsl(21 100% 62%); color: #fff;
  padding: 13px 18px;
  border-radius: 14px;
}
.bnto-bubble-down::after {
  content: ""; position: absolute;
  bottom: -9px; left: 24px;
  border: 9px solid transparent;
  border-top-color: hsl(21 100% 62%); border-bottom: 0;
}
使い方のコツ

しっぽは「太いborderで作る三角形」テクニック。本体の position: relative が必須です。しっぽの位置は left、大きさは border の太さ（9px）で調整できます。

上向きしっぽ

吹き出し（上しっぽ）

.bnto-bubble-up {
  position: relative; display: inline-block;
  background: hsl(41 100% 50%); color: #fff;
  padding: 13px 18px;
  border-radius: 14px;
}
.bnto-bubble-up::after {
  content: ""; position: absolute;
  top: -9px; left: 24px;
  border: 9px solid transparent;
  border-bottom-color: hsl(41 100% 50%); border-top: 0;
}
使い方のコツ

上の要素（見出しや画像）を指すときに使う向き。下しっぽとの違いは bottom → top、border-top-color → border-bottom-color の2か所だけです。

左向きしっぽ

吹き出し（左しっぽ）

.bnto-bubble-left {
  position: relative; display: inline-block;
  background: hsl(327 53% 54%); color: #fff;
  padding: 13px 18px;
  border-radius: 14px;
}
.bnto-bubble-left::after {
  content: ""; position: absolute;
  left: -9px; top: 16px;
  border: 9px solid transparent;
  border-right-color: hsl(327 53% 54%); border-left: 0;
}
使い方のコツ

左にアイコン画像を置く「発言者＋セリフ」レイアウトの定番。アイコンと display: flex; gap: 12px; の親で並べると会話形式コンテンツが簡単に作れます。

右向きしっぽ

吹き出し（右しっぽ）

.bnto-bubble-right {
  position: relative; display: inline-block;
  background: hsl(202 73% 56%); color: #fff;
  padding: 13px 18px;
  border-radius: 14px;
}
.bnto-bubble-right::after {
  content: ""; position: absolute;
  right: -9px; top: 16px;
  border: 9px solid transparent;
  border-left-color: hsl(202 73% 56%); border-right: 0;
}
使い方のコツ

右側にアイコンを置く「返信側」のセリフに。左しっぽとペアで交互に並べると、Q&Aや対談風の記事レイアウトが作れます。

まる吹き出し

まる（ピル）吹き出し

.bnto-bubble-pill {
  position: relative; display: inline-block;
  background: hsl(258 47% 56%); color: #fff;
  padding: 13px 22px;
  border-radius: 999px;
}
.bnto-bubble-pill::after {
  content: ""; position: absolute;
  bottom: -8px; left: 50%;
  transform: translateX(-50%);
  border: 8px solid transparent;
  border-top-color: hsl(258 47% 56%); border-bottom: 0;
}
使い方のコツ

しっぽを left: 50% + translateX(-50%) で中央寄せしているので、キャラクターの真上に置くセリフに最適。border-radius: 999px で高さに関係なく丸くなります。

枠線ふきだし

枠線ふきだし

.bnto-bubble-outline {
  position: relative; display: inline-block;
  background: #fff; color: hsl(340 60% 55%);
  border: 2px solid hsl(340 60% 55%);
  padding: 13px 17px;
  border-radius: 14px;
}
/* 45度回転した正方形の2辺だけ線を引くと、
   本体と同じ2px幅のしっぽになる */
.bnto-bubble-outline::before {
  content: ""; position: absolute;
  bottom: -9px; left: 24px;
  width: 14px; height: 14px;
  background: #fff;
  border-right: 2px solid hsl(340 60% 55%);
  border-bottom: 2px solid hsl(340 60% 55%);
  transform: rotate(45deg);
}
使い方のコツ

正方形を45度回転させ、右と下の2辺にだけ線を引くと、本体の枠線とまったく同じ太さのしっぽが作れます。背景が白以外のページでは、本体と疑似要素の background を背景色に合わせてください。

週末ひま？
ひまだよ！

チャット風会話

.bnto-bubble-chat {
  display: flex; flex-direction: column;
  gap: 10px; max-width: 320px;
}
/* 相手（左） */
.bnto-bubble-chat .in {
  align-self: flex-start;
  background: #fff; color: #333;
  padding: 10px 14px;
  border-radius: 4px 16px 16px 16px;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}
/* 自分（右） */
.bnto-bubble-chat .out {
  align-self: flex-end;
  background: hsl(150 58% 44%); color: #fff;
  padding: 10px 14px;
  border-radius: 16px 4px 16px 16px;
}
使い方のコツ

三角ではなく border-radius の1か所だけを小さくして「しっぽ風」に見せる手法。.in / .out の div を増やすだけで会話が続けられます。トーク画面らしくするなら親に薄い背景色を。

どうしようかな…

考え事バブル

.bnto-bubble-think {
  position: relative; display: inline-block;
  background: hsl(230 60% 62%); color: #fff;
  padding: 13px 20px;
  border-radius: 999px;
}
/* しっぽの丸2つ */
.bnto-bubble-think::before {
  content: ""; position: absolute;
  bottom: -10px; left: 22px;
  width: 12px; height: 12px; border-radius: 50%;
  background: hsl(230 60% 62%);
}
.bnto-bubble-think::after {
  content: ""; position: absolute;
  bottom: -20px; left: 12px;
  width: 7px; height: 7px; border-radius: 50%;
  background: hsl(230 60% 62%);
}
使い方のコツ

マンガの「心の声」表現。三角の代わりに小さい丸を2つ並べるだけで考え事らしくなります。丸の位置（left / bottom）をずらすと、視線の向きを変えられます。

もこもこ雲形

もこもこ雲形

.bnto-bubble-cloud {
  position: relative; z-index: 0; display: inline-block;
  background: hsl(199 80% 56%); color: #fff;
  padding: 22px 34px 18px;
  border-radius: 999px;
}
/* 上に大きい円を重ねて雲のふくらみに */
.bnto-bubble-cloud::before {
  content: ""; position: absolute; z-index: -1;
  top: -20px; left: 30px;
  width: 50px; height: 50px; border-radius: 50%;
  background: hsl(199 80% 56%);
}
/* 右側の小さいふくらみ */
.bnto-bubble-cloud::after {
  content: ""; position: absolute; z-index: -1;
  top: -10px; right: 40px;
  width: 36px; height: 36px; border-radius: 50%;
  background: hsl(199 80% 56%);
}
使い方のコツ

雲らしく見せるコツは「底は平らに、上にだけ円を重ねる」こと。ピル型の本体に大小2つの円を上側だけに配置しています。円のサイズや位置を変えるとふくらみの表情が変わります。z-index: -1 で円を文字の下に敷いています。

ホバーしてね

ツールチップ（上）

.bnto-tooltip-top { position: relative; }
.bnto-tooltip-top::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 10px); left: 50%;
  transform: translateX(-50%);
  background: hsl(21 100% 62%); color: #fff;
  padding: 7px 12px; border-radius: 8px;
  font-size: 13px; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.bnto-tooltip-top::before {
  content: ""; position: absolute;
  bottom: calc(100% + 3px); left: 50%;
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-top-color: hsl(21 100% 62%);
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.bnto-tooltip-top:hover::after,
.bnto-tooltip-top:hover::before { opacity: 1; }
使い方のコツ

文言はHTMLの data-tip 属性に書き、CSSの content: attr(data-tip) で表示します。JS不要でヒント文を差し替えられるのが利点。タッチ端末では出ないことがあるので、重要な情報は本文にも書きましょう。

ホバーしてね

ツールチップ（下）

.bnto-tooltip-bottom { position: relative; }
.bnto-tooltip-bottom::after {
  content: attr(data-tip);
  position: absolute; top: calc(100% + 10px); left: 50%;
  transform: translateX(-50%);
  background: hsl(202 73% 56%); color: #fff;
  padding: 7px 12px; border-radius: 8px;
  font-size: 13px; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.bnto-tooltip-bottom::before {
  content: ""; position: absolute;
  top: calc(100% + 3px); left: 50%;
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-bottom-color: hsl(202 73% 56%);
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.bnto-tooltip-bottom:hover::after,
.bnto-tooltip-bottom:hover::before { opacity: 1; }
使い方のコツ

ページ上部のナビやヘッダー内など、上に出すスペースがない場所ではこちらの下向きを。上向き版との違いは bottom → top と三角の色を付ける辺だけです。

保存しました

トースト通知

.bnto-bubble-toast {
  display: inline-flex; align-items: center; gap: 9px;
  background: hsl(119 31% 51%); color: #fff;
  padding: 12px 18px;
  border-radius: 12px;
  box-shadow: 0 8px 22px hsl(119 31% 51% / 0.4);
}
.bnto-bubble-toast i {
  width: 20px; height: 20px; border-radius: 50%;
  background: rgba(255,255,255,.25);
  display: inline-flex; align-items: center; justify-content: center;
}
使い方のコツ

画面の隅に出す通知には position: fixed; bottom: 24px; right: 24px; を追加。box-shadow の色を本体色と揃えると、ふわっと浮いた一体感が出ます。

CSS吹き出しデザインの基礎知識

吹き出しは、会話やセリフの形で情報を届けられるパーツです。解説記事の「先生と生徒の対話」、Q&A、お客様の声など、会話形式のコンテンツは文章だけの説明より読みやすく、内容が頭に入りやすいのが大きなメリット。このページでは、コピペで使えるCSS吹き出しを12種類掲載しています。すべて画像を使わないピュアCSSなので表示が速く、色やサイズの変更も自由自在です。

吹き出しの「しっぽ」は、CSSの疑似要素（::after）と太いborderで作る三角形が定番テクニック。幅・高さ0の要素に4辺のborderを transparent で引き、1辺だけに色を付けると三角形が現れます。本体に position: relative;、しっぽに position: absolute; を指定するのがポイントです。

しっぽの位置・向きの調整方法

しっぽ CSS の向きは「色を付ける辺」で決まります。下向きなら border-top-color、上向きなら border-bottom-color というように、出したい向きと逆の辺に色を付けます。位置は left や top の値、大きさはborderの太さで調整できます。

会話形式レイアウトの組み方（アイコンと並べる）

左しっぽ・右しっぽの吹き出しを丸いアイコン画像と display: flex; gap: 12px; で並べると、対談風のレイアウトが完成します。発言者が変わるたびに左右を入れ替えると、メッセージアプリのトーク画面のようなリズムが生まれます。

ツールチップのアクセシビリティ

ホバーで出るツールチップは便利ですが、タッチ端末やキーボード操作では表示されないことがあります。省略すると困る情報は本文に書き、ツールチップは補足に留めるのが安全です。フォーカスでも出したい場合は :hover に加えて :focus-visible も指定しましょう。

よくある質問

しっぽ（三角）の位置や向きを変えるには？
しっぽは疑似要素の太いborderで作った三角形です。位置は left や top の値で移動でき、向きは色を付ける辺（border-top-color など）を変えると上下左右に切り替えられます。大きさは border の太さで調整します。
吹き出しの中に画像やリンクを入れられますか？
入れられます。吹き出し本体はただのdiv（またはspan）なので、テキスト以外にアイコンや画像、リンクも自由に配置できます。幅が広がりすぎる場合は max-width を指定してください。
ツールチップはスマホ（タッチ操作）でも表示されますか？
:hover ベースのツールチップはタッチ操作では表示されない端末があります。スマホでも確実に見せたい情報は本文に書き、ツールチップは補足程度に使うのがおすすめです。
商用サイトで利用できますか？
はい、すべてのパーツは商用・個人を問わず無料で利用できます。登録やクレジット表記も不要です。
このページのパーツはAIコーディングツールでも使えますか？
はい。Claude CodeやCursorのようにWebページを読めるAIには、このページのURLとパーツ名（例:「吹き出し（上しっぽ）」）を伝えるだけで適用を指示できます。AIがWebを読めない場合は、「コピー」ボタンで取得したHTMLとCSSをチャットに貼り付けて調整を頼むのが確実です。改変後のコードは、公開前に表示確認することをおすすめします。

関連カテゴリ

吹き出しと組み合わせて使いやすいパーツはこちら。

カード装飾 アラート バッジ・タグ リスト装飾