みっちぇの節約レポ

20代主婦がケチケチ生活の中で美容やコスメを楽しむブログ

【デザイン】ラベル付きBOXのサンプル集

ラベル付きboxサンプル集
ラベル付き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

シンプルなラベル。

ラベル1

ラベル付き見本
枠の外にラベルをつける。

ラベル付き見本
段落はこんな感じ。

<div class="solid">
<span class="label">ラベル1</span>    
<p>ラベル付き見本<br>
枠の外にラベルをつける。</p>
<p>ラベル付き見本<br>
段落はこんな感じ。</p>    
</div>

その2

丸みを帯びたラベル。

ラベル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>