ホーム

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>