Cocoon装飾・UI専用クラス一覧
| クラス名 |
分類 |
用途 |
ビジュアル説明 |
| information-box |
情報ボックス |
情報の補足や注釈に使う |
ブルー系背景 |
| attention-box |
注意ボックス |
注意喚起や強調 |
オレンジ系背景 |
| warning-box |
警告ボックス |
エラーや危険な内容に |
赤系背景 |
| memo-box |
メモボックス |
備考や豆知識など |
ライトグリーン背景 |
| box |
囲みボックス |
汎用的に使える囲い枠 |
グレー系枠線あり |
| label-blue |
青ラベル |
情報を目立たせたいとき |
青色のラベル |
| label-red |
赤ラベル |
警告・重要表示に |
赤色のラベル |
| label-yellow |
黄ラベル |
ヒント・参考用 |
黄色のラベル |
| label-green |
緑ラベル |
ポジティブ・完了通知など |
緑色のラベル |
| btn-blue |
青ボタン |
通常の決定操作などに |
背景青 + 白字 |
| btn-red |
赤ボタン |
削除・警告などに |
背景赤 + 白字 |
| btn-yellow |
黄ボタン |
注意・案内向け |
背景黄 + 黒字 |
| btn-green |
緑ボタン |
肯定・成功操作などに |
背景緑 + 白字 |
| speech-balloon |
吹き出し（ベース） |
会話・コメント風の演出 |
左・右と組み合わせる |
| left-balloon |
左吹き出し |
質問者や発言者に使う |
左寄せ表示 |
| right-balloon |
右吹き出し |
返答や補足説明に |
右寄せ表示 |
| speech-person |
吹き出し人物 |
アイコン表示部分 |
顔マークや画像など |
| speech-content |
吹き出し本文 |
実際の吹き出しテキスト |
囲まれたテキスト |
| list-square |
四角マーク付きリスト |
普通の箇条書き |
■付きスタイル |
| list-check |
チェックマーク付きリスト |
ToDo形式 |
✅付きスタイル |
| list-circle |
丸マーク付きリスト |
軽めの強調 |
●付きスタイル |
| list-number |
番号付きリスト |
手順説明など |
1. 2. 3. のスタイル |
