CSS吹き出しジェネレーター
吹き出し（ふきだし）の形状・しっぽの方向・色・影をリアルタイムプレビューしながら調整し、CSSコードをワンクリックでコピーできます。
プリセット
形状・しっぽ
15px
カラー
サイズ・レイアウト
2px
12px
16px
300px
16px
プレビュー
こんにちは！これはサンプルテキストです。
CSS
.speech-bubble {
position: relative;
display: inline-block;
max-width: 300px;
padding: 16px;
background: #ffffff;
color: #333333;
font-size: 16px;
line-height: 1.5;
border-radius: 12px;
border: 2px solid #cccccc;
}
.speech-bubble::before {
content: '';
position: absolute;
top: 100%;
left: 19px;
border-style: solid;
border-width: 15px 15px 0 0;
border-color: #cccccc transparent transparent transparent;
}
.speech-bubble::after {
content: '';
position: absolute;
top: 100%;
left: 22px;
border-style: solid;
border-width: 12px 12px 0 0;
border-color: #ffffff transparent transparent transparent;
}HTML
<div class="speech-bubble">テキスト</div>
CSS吹き出し（balloon）とは
CSS吹き出し（speech bubble / balloon）は、漫画の吹き出しのようなUIをCSSだけで実装するテクニックです。 会話形式のコンテンツ、チャットUI、FAQ、コメント欄など、Webサイトのさまざまな場面で活用されています。
三角形のしっぽ（tail）は::beforeや::after擬似要素と CSSのborderトリックを使って描画します。 画像を使わないため、レスポンシブ対応やカラー変更が容易で、パフォーマンスにも優れています。
このツールの使い方
- プリセットから好みのスタイルを選択するか、各設定を個別に調整します
- 形状（角丸四角・四角・円形・雲形）を選択し、しっぽの方向を指定します
- 背景色・ボーダー・テキスト色・影などをスライダーで微調整します
- リアルタイムプレビューでデザインを確認します
- 生成されたCSSコードとHTMLをワンクリックでコピーして利用します
ブログでの吹き出し活用法
会話形式の記事：ブログ記事を会話形式で構成することで、読者にとって親しみやすく読みやすいコンテンツになります。 キャラクターのアイコンと吹き出しを組み合わせることで、FAQ形式の説明やインタビュー記事にも活用できます。
チャットUI：LINEやメッセンジャー風のチャットUIを実装する際に、左右に配置した吹き出しで 自然な会話の流れを表現できます。自分と相手で色を変えることで視認性が向上します。
注釈・補足情報：ポイントとなる情報を吹き出しで囲むことで、本文中の重要な補足情報を 視覚的に目立たせることができます。
CSS吹き出しの仕組み
| 要素 | CSS技法 | 役割 |
|---|---|---|
| .speech-bubble | border-radius, background, padding | 吹き出し本体の形状と装飾 |
| ::before | border trick（透明ボーダー） | しっぽ（三角形）の描画 |
| ::after | border trick（背景色ボーダー） | ボーダー付きしっぽの内側描画 |
関連記事
よくある質問
- Q. 生成されるCSSはどのブラウザで動きますか？
- すべてのモダンブラウザ（Chrome、Firefox、Safari、Edge）で動作します。CSS疑似要素（::before / ::after）のborderトリックで三角形を描画するため、IE11を含むほぼすべてのブラウザで表示できます。
- Q. WordPressのブログでも使えますか？
- はい、生成されたCSSをテーマのstyle.cssやカスタムCSS欄に追加し、HTMLをブロックエディタの「カスタムHTML」ブロックに貼り付ければ使えます。会話形式のブログ記事やFAQセクションの装飾に最適です。
- Q. 吹き出しの尻尾の方向は変えられますか？
- はい、左下・右下・左上・右上・下中央・上中央の6方向に変更できます。チャットUI風のデザイン（自分のメッセージは右下、相手は左下）など、用途に合わせて自由に設定できます。
関連ツール
開発者
Zeronova（ゼロノバ）
Product Manager / AI-Native Builder
19年以上のWeb/IT業界経験を持つPdMが、現場で本当に使えるツールを開発。登録不要・ブラウザだけで動作する無料ツールを93種類以上公開中。