CSSスピーチバブル/ツールチップジェネレーター
スピーチバブル/ツールチップ形状を生成します — clip-pathではなく、古典的なborder-triangleテクニック（::after/::before）を使用した丸みを帯びたボックスに配置可能なテール。色、半径、パディング、オプションのアウトラインを設定し、テールのエッジ、オフセット、サイズを指定して、ライブプレビューと貼り付け可能なCSS + HTMLを取得します。
入力
プレビューに表示され、HTMLスニペットにコピーされるサンプルコンテンツ。
生成されたルールはこのクラスにスコープされているため、独自のスタイルと競合しません。
色
シェイプ
テールにもアウトラインを付ける — 背後に2番目の大きなpseudo-element（::before）を追加します。
テール
バブルのどのエッジがテールを指しているか。
そのエッジに沿った位置 — 0 = 開始、50 = 中央、100 = 終了。
出力
スピーチバブルがここに表示されます。
実際に生成されたバブル。Shadow DOMに隔離されています。
このツールを使う他の方法
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-speech-bubble-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"bubbleText": "Hey! Got a sec to chat? 💬",
"className": "bubble",
"backgroundColor": "#4f46e5",
"textColor": "#ffffff",
"borderRadius": "16",
"paddingX": "18",
"paddingY": "12",
"showBorder": "",
"borderColor": "#312e81",
"borderWidth": "2",
"tailPosition": "bottom",
"tailOffset": "50",
"tailSize": "14"
}'ご自身のアカウントのキーに差し替えてください。ツールのフィールドがそのままリクエストボディになります——ラッパーはありません。
AIエージェントに依頼する
Use the IOTools `css-speech-bubble-generator` tool (CSS Speech Bubble / Tooltip Generator) on this input:
YOUR_INPUT_HEREIOTools MCPサーバーに接続された任意のエージェントにこれを貼り付け、入力内容を追加してください。
埋め込みウィジェット
<iframe
src="https://iotools.cloud/embed/css-speech-bubble-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="CSSスピーチバブル/ツールチップジェネレーター — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>ご自身のページに貼り付けるだけ——無料、キー不要、リンクを掲載するだけです。
| API/MCP 1回あたりの費用 | 5クレジットから |
|---|---|
| クレジットが足りませんか? | 料金を見る |
次の方法でも利用可能
ガイド
このツールが行うこと
CSSスピーチバブル/ツールチップジェネレーターは、1つの <div> 上の ::after pseudo-element（およびボーダーが有効な場合は ::before）のみを使用して、ポイント付きテール付きの丸みを帯びたチャットバブル、吹き出し、またはツールチップ形状を構築します。clip-path はなく、画像もなく、JavaScriptもありません — テールは古典的なborder-triangleのトリック：3つのボーダーサイドが透明で、4番目が色付きの0サイズのボックスが、単色の三角形に崩れます。
背景色、コーナー半径、パディング、および必須のアウトラインを設定してから、テールが指すエッジ、そのエッジに沿ってどのくらい離れているか、および大きさを選択します。ライブプレビュー（実際に生成されたマークアップからレンダリングされ、Shadow DOMに隔離されているため、pseudo-elementsが実際に表示される）と、コピー可能なCSS + HTMLが得られます。
使い方
- プレビューしたい バブルテキスト を入力し、独自のスタイルと競合しないようにブロックに クラス名 を指定します。
- 背景色 と テキスト色 を選択します。
- ボーダー半径 と左/右および上/下の パディング を調整します。
- テールを持つバブルが必要な場合は、ボーダーを追加 をオンにします — これにより、背後に2番目の大きなpseudo-elementを使用してテールもアウトラインが表示されます。
- テール で、テールが指す エッジ 、そのエッジに沿った オフセット（0 = 開始、50 = 中央、100 = 終了）、およびその サイズ を選択します。
- HTML をマークアップにコピーし、CSS をスタイルシートにコピーします。
ボーダーに2番目のpseudo-elementが必要な理由は何ですか？
CSSボーダーは三角形の対角線エッジに従うことができないため、テールのアウトラインは偽りです：::before はボーダー色でわずかに大きい三角形を描画し、::after は背景色で実サイズの三角形を描画してその上に直接配置され、まったく同じ点に固定されます。エッジの周りに見えるものはアウトラインとして読みます。
ライブプレビューが通常のプレビューボックスではなくShadow DOMである理由は何ですか？
テールは ::after/::before pseudo-elementとしてのみ存在します — インラインの style 属性を通じてそれを表現する方法はなく、これはほとんどのツールプレビューが安全にレンダリングされる方法です。代わりに、このプレビューは実際に生成された <style> とHTMLを分離されたShadow DOMにマウントするため、表示されるものは、テールを含めて、貼り付けようとしているものとまったく同じです。
別の形状が必要な場合、テール付きバブル以外の場合はどうしますか？
ポリゴン形状（矢印、星、六角形）またはテールの代わりに clip-path で作成されたバブルの場合は、CSS Clip-Pathジェネレーターを使用します。テールのないボックスを丸める場合、CSSボーダー半径ジェネレーターはコーナーごとのより細かい制御を提供し、任意の要素の単純なドロップシャドウの場合は、CSSボックスシャドウジェネレーターを参照してください。