【デザイン】ラベル付きBOXのサンプル集
boxにラベルをつけるデザインサンプル集。
枠デザインのサンプルと組み合わせて使ってください。
ラベル内の文字は<span class="クラス名"></span>
で指定します。
枠のデザインのクラスは<div class="クラス名">
で指定です。
シンプルなラベル
枠線は自由に。
背景を変えたい場合は
color_bg_pk
color_bg_sky
color_bg_green
color_bg_cream
を各クラスの後に半角スペースを空けてから入れてください。
枠の色を変えたい場合は
color_bd_pk
color_bd_sky
color_bd_green
color_bd_cream
を各クラスの後に半角スペースを空けてから入れてください。
その1
シンプルなラベル。
ラベル付き見本
枠の外にラベルをつける。
ラベル付き見本
段落はこんな感じ。
<div class="solid"> <span class="label">ラベル1</span> <p>ラベル付き見本<br> 枠の外にラベルをつける。</p> <p>ラベル付き見本<br> 段落はこんな感じ。</p> </div>
その2
丸みを帯びたラベル。
ラベル付き見本
枠の外にラベルをつける。
ラベル付き見本
段落はこんな感じ。
<div class="solid"> <span class="label_2">ラベル2</span> <p>ラベル付き見本<br> 枠の外にラベルをつける。</p> <p>ラベル付き見本<br> 段落はこんな感じ。</p> </div>
色を変えた場合
シンプルなラベルを色変更。
枠と背景色を同じにするといいかと思います。
ラベル付き見本
枠の外にラベルをつける。
ラベル付き見本
段落はこんな感じ。
<div class="solid color_bd_pk"> <span class="label color_bg_pk">ピンクのラベル</span> <p>ラベル付き見本<br> 枠の外にラベルをつける。</p> <p>ラベル付き見本<br> 段落はこんな感じ。</p> </div>
マステ風
枠線は自由に。
その1左上にマステ文字
ラベル付き見本
マステ風ラベルをつける。
ラベル付き見本
段落はこんな感じ。
マステ部分はデザインが崩れるので5文字程度まででお願いします。
<div class="solid"> <span class="mt">マステ風</span> <p>ラベル付き見本<br> マステ風ラベルをつける。</p> <p>ラベル付き見本<br> 段落はこんな感じ。</p> <p>マステ部分はデザインが崩れるので5文字程度まででお願いします。</p> </div>
その2上下にマステ
ラベル付き見本
マステ風ラベルをつける。
右下にもマステ。文字は左上にしか入れられません。
ラベル付き見本
段落はこんな感じ。
マステ部分はデザインが崩れるので5文字程度まででお願いします。
<div class="solid mt_bottom"> <span class="mt">マステ風</span> <p>ラベル付き見本<br> マステ風ラベルをつける。<br> 右下にもマステ。文字は左上にしか入れられません。</p> <p>ラベル付き見本<br> 段落はこんな感じ。</p> <p>マステ部分はデザインが崩れるので5文字程度まででお願いします。</p> </div>
その3マステの色を変える
色指定のクラスをそれぞれ指定することで、マステの色を変更できます。
色指定のクラス上用
mt_pk
mt_sky
mt_green
mt_cream
色指定のクラス下用
mt_bottom_pk
mt_bottom_sky
mt_bottom_green
mt_bottom_cream
文字部分だけ
ラベル付き見本
マステ風ラベルをつける。
色を変える場合は、mt_pk
で指定。
マステ部分はデザインが崩れるので5文字程度まででお願いします。
<div class="solid"> <span class="mt_pk">ピンク</span> <p>ラベル付き見本<br> マステ風ラベルをつける。</p> <p>色を変える場合は、<code>mt_pk</code>で指定。</p> <p>マステ部分はデザインが崩れるので5文字程度まででお願いします。</p> </div>
ラベル付き見本
マステ風ラベルをつける。
色を変える場合は、mt_sky
で指定。
マステ部分はデザインが崩れるので5文字程度まででお願いします。
<div class="solid"> <span class="mt_sky">ブルー</span> <p>ラベル付き見本<br> マステ風ラベルをつける。</p> <p>色を変える場合は、<code>mt_sky</code>で指定。</p> <p>マステ部分はデザインが崩れるので5文字程度まででお願いします。</p> </div>
ラベル付き見本
マステ風ラベルをつける。
色を変える場合は、mt_green
で指定。
マステ部分はデザインが崩れるので5文字程度まででお願いします。
<div class="solid"> <span class="mt_green">グリーン</span> <p>ラベル付き見本<br> マステ風ラベルをつける。</p> <p>色を変える場合は、<code>mt_green</code>で指定。</p> <p>マステ部分はデザインが崩れるので5文字程度まででお願いします。</p> </div>
ラベル付き見本
マステ風ラベルをつける。
色を変える場合は、mt_cream
で指定。
マステ部分はデザインが崩れるので5文字程度まででお願いします。
<div class="solid"> <span class="mt_cream">クリーム</span> <p>ラベル付き見本<br> マステ風ラベルをつける。</p> <p>色を変える場合は、<code>mt_cream</code>で指定。</p> <p>マステ部分はデザインが崩れるので5文字程度まででお願いします。</p> </div>
上下にラベルを入れる
ラベル付き見本
マステ風ラベルをつける。
下のラベルの色を変えるには、枠デザインのclass名、半角スペース、mt_bottom_pk
で指定。
上のラベルの色を変えるにはspan
のclassにmt_pk
を指定。
マステ部分はデザインが崩れるので5文字程度まででお願いします。
<div class="solid mt_bottom_pk"> <span class="mt_pk">ピンク</span> <p>ラベル付き見本<br> マステ風ラベルをつける。</p> <p>下のラベルの色を変えるには、枠デザインのclass名、半角スペース、<code>mt_bottom_pk</code>で指定。</p> <p>上のラベルの色を変えるには<code>span</code>のclassに<code>mt_pk</code>を指定。 </p> <p>マステ部分はデザインが崩れるので5文字程度まででお願いします。</p> </div>
ラベル付き見本
マステ風ラベルをつける。
下のラベルの色を変えるには、枠デザインのclass名、半角スペース、mt_bottom_sky
で指定。
上のラベルの色を変えるにはspan
のclassにmt_sky
を指定。
マステ部分はデザインが崩れるので5文字程度まででお願いします。
<div class="solid mt_bottom_sky"> <span class="mt_sky">マステ風</span> <p>ラベル付き見本<br> マステ風ラベルをつける。</p> <p>下のラベルの色を変えるには、枠デザインのclass名、半角スペース、<code>mt_bottom_sky</code>で指定。</p> <p>上のラベルの色を変えるには<code>span</code>のclassに<code>mt_sky</code>を指定。 </p> <p>マステ部分はデザインが崩れるので5文字程度まででお願いします。</p> </div>
ラベル付き見本
マステ風ラベルをつける。
下のラベルの色を変えるには、枠デザインのclass名、半角スペース、mt_bottom_green
で指定。
上のラベルの色を変えるにはspan
のclassにmt_green
を指定。
マステ部分はデザインが崩れるので5文字程度まででお願いします。
<div class="solid mt_bottom_green"> <span class="mt_green">マステ風</span> <p>ラベル付き見本<br> マステ風ラベルをつける。</p> <p>下のラベルの色を変えるには、枠デザインのclass名、半角スペース、<code>mt_bottom_green</code>で指定。</p> <p>上のラベルの色を変えるには<code>span</code>のclassに<code>mt_green</code>を指定。 </p> <p>マステ部分はデザインが崩れるので5文字程度まででお願いします。</p> </div>
ラベル付き見本
マステ風ラベルをつける。
下のラベルの色を変えるには、枠デザインのclass名、半角スペース、mt_bottom_cream
で指定。
上のラベルの色を変えるにはspan
のclassにmt_cream
を指定。
マステ部分はデザインが崩れるので5文字程度まででお願いします。
<div class="solid mt_bottom_cream"> <span class="mt_cream">マステ風</span> <p>ラベル付き見本<br> マステ風ラベルをつける。</p> <p>下のラベルの色を変えるには、枠デザインのclass名、半角スペース、<code>mt_bottom_cream</code>で指定。</p> <p>上のラベルの色を変えるには<code>span</code>のclassに<code>mt_cream</code>を指定。 </p> <p>マステ部分はデザインが崩れるので5文字程度まででお願いします。</p> </div>