KAKERU Designing suetomi

吹き出しをCSSだけで作る｜コピペで使える4種類と、しっぽの作り方・使いどころ

吹き出しをCSSだけで作る。しっぽの形と使いどころ

話している人の横に出る、しっぽの付いた吹き出し。マンガや会話アプリでおなじみの形ですが、画像を用意しなくても、CSSだけで作れます。文字を入れかえても形がくずれず、スマホでも自然に折り返します。

使いどころ

会話や「ひとこと補足」を見せたいときに使う。ふつうの説明文を吹き出しに入れるのはやめる。

今回は、しっぽが下に付く基本の吹き出し、枠線つきで左にしっぽが出る吹き出し、小さな丸がつながる考え中の吹き出し、左右に並ぶチャット風の会話の4種類を、コピペ用のコードつきで紹介します。しっぽの大きさの目安や、しっぽまで影を付ける方法、読み上げソフトへの配慮もまとめました。

トミー

連載「WEBの技術」の23回目です。
今回は「吹き出し」。形はかんたんですが、どこに使うかで読みやすさが大きく変わる部品です。

完成見本：CSSだけで作った4種類

下の4つは、どれも画像を使わず、CSSだけで形を作っています。しっぽの三角や丸も、文字のうしろに足した飾りの部品です。

BASIC1. しっぽが下に付く、基本の吹き出しボタンや入力欄の近くの「ひとこと補足」
OUTLINE2. 枠線つきで、しっぽが左に出る吹き出し白い背景のページで、話している人のアイコンの横
THINK3. 小さな丸がつながる、考え中の吹き出し読む人の「心の声」や、よくある悩みの紹介
CHAT4. 左右に並ぶ、チャット風の会話よくある質問を、会話の形で見せるとき

※ 見本は見た目を見せるためのもので、読み上げソフトでは読まれないようにしています。

コピペ用のコード

1〜3の吹き出しは、まず共通の「吹き出しの本体」のCSSを入れ、そのうえで形のクラス（kd-fk-basic など）を足します。4のチャット風は、それだけで使えます。CSSは、サイトのCSSファイルや、WordPressならテーマの「追加CSS」などに入れます。クラス名の頭の kd-fk は、サイトのほかのデザインと名前がぶつからないようにするための目印です。

共通のCSS（1〜3の吹き出しの本体）
/* 1〜3に共通：吹き出しの本体 */
.kd-fk {
  /* しっぽの位置の基準にする */
  position: relative;
  max-width: 360px;
  margin: 0;
  padding: 14px 20px;
  border-radius: 14px;
  background: #E0F2FE;
  color: #10283A;
  font-size: 15px;
  line-height: 1.7;
  /* 長い英数字も、箱の中で折り返す */
  overflow-wrap: anywhere;
}

1. しっぽが下に付く、基本の吹き出し

四角い箱の下に、小さな三角のしっぽが付く、いちばん基本の形です。しっぽは ::after（箱の中の最後に、飾りの部品を1つ足す指定）で作ります。小さな四角を用意して、clip-path（形を切り抜く指定）で三角に切り抜き、箱のすぐ下に置いています。

HTML
<p class="kd-fk kd-fk-basic">入力は3分ほどで終わります。</p>
CSS
.kd-fk-basic::after {
  content: "";
  position: absolute;
  /* 箱の下のふちに、ぴったりつける */
  top: 100%;
  left: 32px;
  width: 20px;
  height: 12px;
  background: #E0F2FE;
  /* 四角を、下向きの三角に切り抜く */
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

2. 枠線つきで、しっぽが左に出る吹き出し

白い箱に青い枠線を付け、左側にしっぽを出した形です。三角に切り抜く方法では、しっぽに枠線を付けられません。そこで、小さな四角に左と下だけ枠線を付けて、transform: rotate(45deg)（45度回す指定）でひし形にし、半分を箱のふちに重ねます。重なった部分は白で塗られるので、枠線がしっぽの形に沿ってつながって見えます。

HTML
<p class="kd-fk kd-fk-line">よくある質問は、下にまとめています。</p>
CSS
.kd-fk-line {
  /* しっぽが出るぶん、左をあける */
  margin-left: 14px;
  border: 2px solid #0284C7;
  background: #FFFFFF;
}
.kd-fk-line::after {
  content: "";
  position: absolute;
  top: 18px;
  left: -9px;
  width: 14px;
  height: 14px;
  background: #FFFFFF;
  border-left: 2px solid #0284C7;
  border-bottom: 2px solid #0284C7;
  /* 四角を45度回して、ひし形にする */
  transform: rotate(45deg);
}

3. 小さな丸がつながる、考え中の吹き出し

マンガの「考えている」場面のように、しっぽのかわりに小さな丸が2つ並ぶ形です。箱の角を大きく丸め、::before と ::after の2つの飾りを、どちらも border-radius: 50%（角を半分まで丸める＝まん丸にする指定）で丸にしています。丸の大きさを、箱から離れるほど小さくするのがポイントです。

HTML
<p class="kd-fk kd-fk-think">どこから手をつければいいんだろう？</p>
CSS
.kd-fk-think {
  border-radius: 32px;
}
.kd-fk-think::before,
.kd-fk-think::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: #E0F2FE;
}
/* 箱に近い、大きいほうの丸 */
.kd-fk-think::before {
  top: calc(100% + 6px);
  left: 40px;
  width: 18px;
  height: 18px;
}
/* 遠い、小さいほうの丸 */
.kd-fk-think::after {
  top: calc(100% + 28px);
  left: 28px;
  width: 10px;
  height: 10px;
}

4. 左右に並ぶ、チャット風の会話

スマホのメッセージアプリのように、相手の発言を左、こちらの発言を右に並べる形です。しっぽは付けず、border-radius で4つの角のうち1つだけを小さくして、どちらから話しているかを見せます。左右に寄せるのは align-self（並んだ中で、その1つだけ寄せる位置を決める指定）です。だれの発言かは、位置や色だけでなく、名前を文字で入れています。

HTML
<div class="kd-fk-chat">
  <p class="kd-fk-msg kd-fk-them"><span class="kd-fk-who">お客さま</span>予約の日にちは、あとから変えられますか？</p>
  <p class="kd-fk-msg kd-fk-me"><span class="kd-fk-who">スタッフ</span>はい。前日の18時まで、予約の確認ページから変えられます。</p>
</div>
CSS
.kd-fk-chat {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 420px;
}
.kd-fk-msg {
  max-width: 80%;
  margin: 0;
  padding: 10px 16px;
  border-radius: 18px;
  font-size: 15px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}
.kd-fk-who {
  display: block;
  font-size: 12px;
  font-weight: 700;
}
/* 相手の発言：左に寄せて、左下の角だけ小さく */
.kd-fk-them {
  align-self: flex-start;
  background: #F1F5F9;
  color: #10283A;
  border-bottom-left-radius: 4px;
}
/* こちらの発言：右に寄せて、右下の角だけ小さく */
.kd-fk-me {
  align-self: flex-end;
  background: #0369A1;
  color: #FFFFFF;
  border-bottom-right-radius: 4px;
}

仕組み：しっぽは「本体に重ねた小さな部品」

しっぽは ::after で足して、本体を基準に置く

1〜3のしっぽは、どれも ::after や ::before で足した部品です。content: "" は「中身は空っぽ」という意味で、文字は入れず、形と色だけを持たせています。

本体に position: relative、しっぽに position: absolute を付けると、しっぽは本体の左上を基準にして置かれます。top: 100% は「本体の高さぶん下」、つまり本体の下のふちにぴったり付く位置です。本体の文字が2行、3行と増えて高さが変わっても、しっぽは下のふちについていきます。

三角は「四角を切り抜く」か「四角を回す」か

1の見本は、20×12pxの四角を clip-path: polygon(0 0, 100% 0, 50% 100%) で切り抜いています。左上・右上・下の真ん中の3点を結んだ形だけを残す、という意味です。数字を見れば形が分かるので、あとから直しやすい書き方です。

ただし、切り抜く方法では、しっぽの「ふち」に線を引けません。そこで2の見本では、四角に左と下だけ枠線を付け、45度回してひし形にしています。ひし形の半分は本体の中に入り、白で塗られて本体の枠線を隠します。外に出た半分だけが、枠線つきのしっぽとして見えます。

ほかに、太さのちがう枠線を組み合わせて三角を作る、昔からある書き方もあります。今回は、数字から形を想像しやすい2つの方法にしぼりました。

チャット風は、しっぽより「角」で見せる

4の見本には、しっぽがありません。4つの角のうち、話している人の側の下の角だけを4pxにして、そこから話しているように見せています。会話が何往復も続くとき、しっぽが並ぶと画面がうるさくなるので、メッセージアプリでもよく見かける形です。

数値を変えるとどうなるか

しっぽの大きさ（1の width と height）

同じ吹き出しで、しっぽの幅と高さだけを変えて並べました。

10px：ただの箱に見える
20px：目安の大きさ
36px：しっぽが目立ちすぎる

小さすぎると、ただの四角い箱に見えて、だれの言葉なのかが伝わりにくくなります。大きすぎると、しっぽに目が行きます。KAKERUでは、幅20px・高さ12pxくらいを目安にしています。本体の文字の大きさが15pxなので、その1.3倍くらいの幅です。

影の付け方（box-shadow と drop-shadow）

吹き出しに影を付けると、ページから少し浮いて見えます。ただし、ふつうの box-shadow は本体の四角にしか影が付かず、しっぽだけ影がない形になります。

box-shadow：しっぽは影なし
drop-shadow：しっぽにも影

しっぽまで影を付けたいときは、filter: drop-shadow() を使います。MDNでは、box-shadow は箱全体の四角い影、drop-shadow() は形に沿った影になると説明されています。下のクラスを、吹き出しに足すだけで使えます。

応用：しっぽまで影を付ける
/* 応用：しっぽまで含めて、影を付ける */
.kd-fk-shadow {
  filter: drop-shadow(0 4px 8px rgba(16, 40, 58, .18));
}
変えるところ小さくすると大きくすると
しっぽの幅と高さ（1の 20px・12px）ただの箱に見え、だれの言葉か分かりにくいしっぽが目立ち、本文より先に目に入る
しっぽの位置（1の left: 32px）本体の左の角に近づく本体の真ん中や右に寄る。話している人の位置に合わせる
角の丸み（共通の 14px）四角に近づき、かための印象丸くなり、やわらかい印象。3の考え中は32px
チャットの幅（4の max-width: 80%）1行が短くなり、行数が増える左右の差が小さくなり、だれの発言か分かりにくい

スマホと、見る人への配慮

スマホでは、幅を決めすぎない

吹き出しの幅は max-width（これ以上は広がらない、という上限）で決めています。width で固定すると、スマホの狭い画面で吹き出しがはみ出すことがあります。上限だけ決めておけば、画面が狭いときは自然に縮んで、文字が折り返します。URLのような長い英数字も、overflow-wrap: anywhere で箱の中で折り返すようにしています。

大事な言葉は、しっぽ（::after）に入れない

しっぽは、中身が空の飾りなので、読み上げソフトには何も伝わりません。それで問題ありません。気をつけたいのは、content に文字を入れて「ポイント！」のような言葉を足すときです。MDNでは、CSSで足した中身は、読み上げソフトとブラウザの組み合わせによっては読まれないとされています。読んでほしい言葉は、HTMLの本文に書きます。

だれの発言かは、位置と色だけで伝えない

チャット風の会話は、左右の位置と色で話している人を見分けます。ただ、読み上げソフトでは左右の位置が伝わらず、色の見え方も人によってちがいます。W3Cのアクセシビリティの基準（WCAG 2.2）では、色だけで情報を伝えないこととされています。4の見本では、「お客さま」「スタッフ」と名前を文字で入れています。

文字と背景、枠線の色

見本の文字と背景の明るさの差（コントラスト）は、淡い青の吹き出しで約13対1、青い吹き出しの白い文字で約5.9対1です。2の枠線は、細い線でも形が分かるように、KAKERUブルー（#0EA5E9）より濃い #0284C7 を使っています。白い背景との差は約4.1対1で、W3Cが図形などに求めている3対1を上回ります。

やりすぎ注意

吹き出しは、目に入りやすい部品です。段落ごとに吹き出しを使うと、どれが大事な話なのかが分からなくなります。また、吹き出しの中に長い説明を入れると、ふつうの段落より読みにくくなります。吹き出しに入れるのは、2〜3行で終わる短い言葉までにしています。

トミー

吹き出しは「声」を見せる部品です。
説明を目立たせたいときは、吹き出しより、見出しや囲みの枠のほうが向いていることが多いです。

AIに頼むなら

吹き出しは、Claudeなどの生成AIに頼んでもすぐ作ってもらえます。そのときは「しっぽの向きと位置」「枠線の有無」「スマホでの幅」「だれの発言かの見せ方」まで、まとめて伝えると手直しが少なく済みます。

CSSだけで、白地に濃い青（#0284C7）の2pxの枠線が付いた吹き出しを作って。
しっぽは左側の上から18pxの位置に出して、しっぽにも枠線を付ける。
幅は max-width で決めてスマホでは縮むようにし、しっぽは ::after で作って。

AIが出したコードは、そのまま使う前に、次の3つを確かめます。

  • スマホ幅で、はみ出さないか。width: 400px のように幅を固定していたら、max-width に変えます。長いURLを入れて、箱からはみ出さないかも見ます
  • しっぽと本体のあいだに、すき間や線が残っていないか。しっぽの位置が1pxずれるだけで、つなぎ目に細い線が見えることがあります。画面を拡大して確かめます
  • 大事な言葉が ::before や ::after の content に入っていないか。入っていたら、HTMLの本文へ移します。チャット風なら、名前が文字で入っているかも見ます

KAKERUならこう使う／使わない

最後に、作り手としての判断です。

使う場面

  • よくある質問を、会話の形で見せるとき。「予約は変えられますか？」のように、お客さまがそのまま口にする質問は、4のチャット風にすると、自分のことだと気づいてもらいやすくなります
  • 入力欄やボタンの近くの、ひとこと補足。「入力は3分ほどで終わります」のような短い言葉を、1の基本の吹き出しで添えます。押す前の不安を、1行で減らすための使い方です
  • 読む人の悩みを紹介するとき。記事やサービスのページの最初で、「どこから手をつければいいんだろう？」のような心の声を、3の考え中の吹き出しで見せます

KAKERUで使っているWordPressのテーマ（STORK19）には、アイコンつきの吹き出しの機能があります。この記事のトミーの吹き出しも、その機能です。ふつうの会話はテーマの機能を使い、テーマにない形（入力欄の補足、チャット風、考え中）がほしいときに、今回のCSSを使うという分け方をしています。

使わない場面

  • ふつうの説明文。「だれかの声」ではない文章を吹き出しに入れると、だれが話しているのかが分からなくなります。説明は、ふつうの段落で書きます
  • 料金や注意事項など、読み落とされると困ること。吹き出しは、飾りとして読み飛ばされることがあります。大事な条件は、本文や表に書きます
  • 実在しない「お客さまの声」。チャット風の会話は、本物の会話に見えます。架空の感想や実績を会話の形で見せることはしません。今回の見本も、使い方を見せるための例文です
トミー

吹き出しを入れる前に、「これは、だれの言葉か」を1回考えます。
答えられないなら、その文章は吹き出しではなく、ふつうの段落に書くほうが伝わります。

まとめ

  • 吹き出しは、画像を使わず、CSSだけで作れる
  • しっぽは ::after で足した部品。本体に position: relative、しっぽに position: absolute を付けて置く
  • 三角は clip-path で切り抜く。枠線を付けたいときは、四角を45度回してひし形にする
  • しっぽの大きさは、本体の文字の1.3倍くらいの幅が目安。影は drop-shadow でしっぽまで付ける
  • 幅は max-width で決めてスマホで縮むように。大事な言葉は ::after に入れず、だれの発言かは文字で書く
  • 吹き出しに入れるのは、だれかの「声」だけ。ふつうの説明文は入れない

まずは1の「しっぽが下に付く、基本の吹き出し」のコードをコピーして、自分のサイトのボタンの近くで試してみてください。そのあと left: 32px の数字を変えると、しっぽが左右に動くのが分かります。

参考にした資料

いずれも2026年10月25日に確認しました。ブラウザの対応状況は変わることがあります。最新の情報は各ページでご確認ください。

ふだんの制作の話や、作ったものの裏側は Instagram と X でも出しています。

関連記事

押すと切り替わるタブをCSSだけで コピペで使える5種類と、使う・使わないの判断
関連記事CSSだけで作るタブ切り替え｜コピペで使える5種類と、:has()が使えないときの備え
丸い画像・好きな形の画像をCSSで作る。つぶれない円の作り方と、使う・使わないの判断
関連記事丸い画像・好きな形の画像をCSSで作る｜つぶれない円の作り方と、コピペで使える5種類
開け閉めするアコーディオンをCSSだけで コピペで使える5種類と、使う・使わないの判断
関連記事CSSだけで作るアコーディオン｜コピペで使える5種類と、使う・使わないの判断
吹き出しをCSSだけで作る。しっぽの形と使いどころ

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

CAPTCHA