ブロック要素のボックス表示用セレクタ

ボックス: box, box-red, box-blue, box-green, box-yellow, box-pink, box-orange, box-darkblue

表示例

ノーマルのボックスです。

ブルーの枠のボックスです。

グリーンの枠のボックスです。

ピンクの枠のボックスです。

レッドの枠のボックスです。

オレンジの枠のボックスです。

イエローの枠のボックスです。

このコード

<div class="box">ノーマルのボックスです。</div>
<div class="box-blue">ブルーの枠のボックスです。</div>
<div class="box-green">グリーンの枠のボックスです。</div>
<div class="box-pink">ピンクの枠のボックスです。</div>
<div class="box-red">レッドの枠のボックスです。</div>
<div class="box-orange">オレンジの枠のボックスです。</div>
<div class="box-yellow">イエローの枠のボックスです。</div>

角丸ボックス: box-c, box-red-c, box-blue-c, box-green-c, box-yellow-c, box-pink-c, box-orange-c, box-darkblue-c

表示例

ノーマルの角丸ボックスです。

ブルーの枠の角丸ボックスです。

グリーンの枠の角丸ボックスです。

ピンクの枠の角丸ボックスです。

レッドの枠の角丸ボックスです。

オレンジの枠の角丸ボックスです。

イエローの枠の角丸ボックスです。

このコード

<div class="box-c">ノーマルの角丸ボックスです。</div>
<div class="box-c-blue">ブルーの枠の角丸ボックスです。</div>
<div class="box-c-green">グリーンの枠の角丸ボックスです。</div>
<div class="box-c-pink">ピンクの枠の角丸ボックスです。</div>
<div class="box-c-red">レッドの枠の角丸ボックスです。</div>
<div class="box-c-orange">オレンジの枠の角丸ボックスです。</div>
<div class="box-c-yellow">イエローの枠の角丸ボックスです。</div>