Balloon
発言や短いメッセージを囲みます。
いつ使うか
誰かが言ったことを示すときに使います。 チャット、コメント、吹き出しつきの補足が該当します。
説明文を囲むためには使いません。 発言に見えてしまいます。
例
基本
あっという間の時間でしたが困難の多かった東京オリンピックの一番最後の式典で選手の方々、関係者の方々の労をねぎらう役目を頂けて光栄でした
html
<div class="jumpu-balloon">
あっという間の時間でしたが困難の多かった東京オリンピックの一番最後の式典で選手の方々、関係者の方々の労をねぎらう役目を頂けて光栄でした
</div>内側の a 要素には下線が付きます。
背景を消す
自分の発言と相手の発言を区別するときなどに使います。
あっという間の時間でしたが困難の多かった東京オリンピックの一番最後の式典で選手の方々、関係者の方々の労をねぎらう役目を頂けて光栄でした
html
<div class="jumpu-balloon bg-transparent">
あっという間の時間でしたが困難の多かった東京オリンピックの一番最後の式典で選手の方々、関係者の方々の労をねぎらう役目を頂けて光栄でした
</div>チャットとして組み立てた例は Recipes にあります。
ユーティリティによる調整
| 調整したいこと | 書き方 | 備考 |
|---|---|---|
| 小さく | text-sm | 余白は変わりません |
| 背景の色 | bg-* / bg-transparent | 既定は gray-100 |
| 幅を制限する | max-w-* | 長い発言が横に伸び続けるのを防ぎます |
余白は --spacing(n) で組まれているため、文字サイズには追従しません。
マークアップ規約
| 位置 | 要素 / 属性 | 要否 | 効果 |
|---|---|---|---|
| ルート | 任意の要素 | 必須 | |
| ルート | class="jumpu-balloon" | 必須 | |
| 子孫 | a | 任意 | 下線が付きます |
状態
状態に応じた見た目を持ちません。
アクセシビリティ
対応する APG のパターンはありません。
誰の発言かは見た目の位置ではなく、マークアップで示してください。 発言者の名前を隣に置くか、aria-label で補います。