ホーム

Cocoonスタイル辞典

Cocoonスタイル辞典（見た目 + コード）

📦 囲みボックス

🔲 box（デフォルト囲み）

<div class="box">
  <p>🔲 box（デフォルト囲み）</p>
</div>

ℹ️ information-box（情報）

<div class="information-box">
  <p>ℹ️ information-box（情報）</p>
</div>

⚠️ attention-box（注意）

<div class="attention-box">
  <p>⚠️ attention-box（注意）</p>
</div>

🛑 warning-box（警告）

<div class="warning-box">
  <p>🛑 warning-box（警告）</p>
</div>

📝 memo-box（メモ）

<div class="memo-box">
  <p>📝 memo-box（メモ）</p>
</div>

🎀 ラベル

青ラベル
赤ラベル
黄ラベル
緑ラベル 
<span class="label label-blue">青ラベル</span>
<span class="label label-red">赤ラベル</span>
<span class="label label-yellow">黄ラベル</span>
<span class="label label-green">緑ラベル</span>

🔘 ボタン

btn-default
btn-blue
btn-red
btn-yellow
btn-green 
<a href="#" class="btn btn-default">btn-default</a>
<a href="#" class="btn btn-blue">btn-blue</a>
<a href="#" class="btn btn-red">btn-red</a>
<a href="#" class="btn btn-yellow">btn-yellow</a>
<a href="#" class="btn btn-green">btn-green</a>

💬 吹き出し

👩
こんにちは！左からの吹き出しです。

<div class="speech-balloon left-balloon">
  <div class="speech-person">👩</div>
  <div class="speech-content">こんにちは！左からの吹き出しです。</div>
</div>

🪄 リスト

  • ■ list-square（四角）
  • 項目の説明
<ul class="list-square">
  <li>■ list-square（四角）</li>
  <li>項目の説明</li>
</ul>
  • ✅ list-check（チェック）
  • ToDo風に
<ul class="list-check">
  <li>✅ list-check（チェック）</li>
  <li>ToDo風に</li>
</ul>

🔧 Cocoon 装飾スタイル 見本 + コード

📦 情報ボックス（information-box）

これは情報のためのボックスです。案内や補足に使います。

<div class="information-box">
  <p>これは情報のためのボックスです。案内や補足に使います。</p>
</div>

🏷 ラベル（label-red）

重要 この内容は特に注意が必要です。

<p><span class="label label-red">重要</span> この内容は特に注意が必要です。</p>

🔘 ボタン（btn-green）

完了しました 
<a href="#" class="btn btn-green">完了しました</a>

💬 吹き出し（左）

👩
これは左側からの吹き出しです。

<div class="speech-balloon left-balloon">
  <div class="speech-person">👩</div>
  <div class="speech-content">これは左側からの吹き出しです。</div>
</div>

✅ チェックリスト（list-check）

  • タスク1を完了
  • タスク2を完了
<ul class="list-check">
  <li>タスク1を完了</li>
  <li>タスク2を完了</li>
</ul>