【デザイン】ラベル付きBOXのサンプル集その２
ラベル付きBOXのサンプル集その２です。
spanではなく、文字列はattrで取得しています。
data-*=好きな文字を入れることでラベルに文字が入ります。
枠の色や背景色は、いつも通り<div class="クラス名">で指定することで変更できます。
枠と背景と色のクラス一覧
枠のクラス一覧
- 破線は
class="dashed" - 直線は
class="solid"
線の色を変える場合は上記クラス名の後、半角スペースを開けてcolor_bd_色名で指定
- 背景付きは
class="back_color"
線の色を変える場合は上記クラス名の後、半角スペースを開けてcolor_bg_色名で指定
色名一覧
pkskygreencream
シンプルなラベル
よくあるラベル。
その１角ばったラベル
枠の外に角ばったラベル。
ラベル付き見本
枠の外にラベルをつける。
class="label_attr"でこのデザインになります。
data-top="ラベル１"で好きな文字を入れています。
ラベル付き見本
段落はこんな感じ。
<div class="dashed label_attr" data-top="ラベル１"> <p>ラベル付き見本<br> 枠の外にラベルをつける。</p> <p><code>class="label_attr"</code>でこのデザインになります。</p> <p><code>data-top="ラベル１"</code>で好きな文字を入れています。</p> <p>ラベル付き見本<br> 段落はこんな感じ。</p> </div>
色違い
色違いver。
PINK
ピンク。
ラベル付き見本
枠の外にラベルをつける。
class="label_attr_pk"でこの色のデザインになります。
data-top="PINK"で好きな文字を入れています。
ラベル付き見本
段落はこんな感じ。
<div class="dashed label_attr_pk" data-top="PINK"> <p>ラベル付き見本<br> 枠の外にラベルをつける。</p> <p><code>class="label_attr_pk"</code>でこの色のデザインになります。</p> <p><code>data-top="PINK"</code>で好きな文字を入れています。</p> <p>ラベル付き見本<br> 段落はこんな感じ。</p> </div>
SKY
薄いブルー。
ラベル付き見本
枠の外にラベルをつける。
class="label_attr_sky"でこの色のデザインになります。
data-top="SKY"で好きな文字を入れています。
ラベル付き見本
段落はこんな感じ。
<div class="dashed label_attr_sky" data-top="SKY"> <p>ラベル付き見本<br> 枠の外にラベルをつける。</p> <p><code>class="label_attr_sky"</code>でこの色のデザインになります。</p> <p><code>data-top="SKY"</code>で好きな文字を入れています。</p> <p>ラベル付き見本<br> 段落はこんな感じ。</p> </div>
GREEN
グリーン。
ラベル付き見本
枠の外にラベルをつける。
class="label_attr_green"でこの色のデザインになります。
data-top="GREEN"で好きな文字を入れています。
ラベル付き見本
段落はこんな感じ。
<div class="dashed label_attr_green" data-top="GREEN"> <p>ラベル付き見本<br> 枠の外にラベルをつける。</p> <p><code>class="label_attr_green"</code>でこの色のデザインになります。</p> <p><code>data-top="GREEN"</code>で好きな文字を入れています。</p> <p>ラベル付き見本<br> 段落はこんな感じ。</p> </div>
CREAM
クリームカラー。
ラベル付き見本
枠の外にラベルをつける。
class="label_attr_cream"でこの色のデザインになります。
data-top="CREAM"で好きな文字を入れています。
ラベル付き見本
段落はこんな感じ。
<div class="dashed label_attr_cream" data-top="CREAM"> <p>ラベル付き見本<br> 枠の外にラベルをつける。</p> <p><code>class="label_attr_cream"</code>でこの色のデザインになります。</p> <p><code>data-top="CREAM"</code>で好きな文字を入れています。</p> <p>ラベル付き見本<br> 段落はこんな感じ。</p> </div>
その２上部が少し丸いラベル
上部が少し丸まったラベル。
ラベル付き見本２
枠の外にラベルをつける。
class="label_attr_2"でこのデザインになります。
data-top="ラベル２"で好きな文字を入れています。
ラベル付き見本
段落はこんな感じ。
<div class="dashed label_attr_2" data-top="ラベル２"> <p>ラベル付き見本２<br> 枠の外にラベルをつける。</p> <p><code>class="label_attr_2"</code>でこのデザインになります。</p> <p><code>data-top="ラベル２"</code>で好きな文字を入れています。</p> <p>ラベル付き見本<br> 段落はこんな感じ。</p> </div>
色違い
色違いver
PINK
ピンク。
ラベル付き見本
枠の外にラベルをつける。
class="label_attr_2_pk"でこの色のデザインになります。
data-top="PINK"で好きな文字を入れています。
ラベル付き見本
段落はこんな感じ。
<div class="dashed label_attr_2_pk" data-top="PINK"> <p>ラベル付き見本<br> 枠の外にラベルをつける。</p> <p><code>class="label_attr_2_pk"</code>でこの色のデザインになります。</p> <p><code>data-top="PINK"</code>で好きな文字を入れています。</p> <p>ラベル付き見本<br> 段落はこんな感じ。</p> </div>
SKY
薄いブルー。
ラベル付き見本
枠の外にラベルをつける。
class="label_attr_2_sky"でこの色のデザインになります。
data-top="SKY"で好きな文字を入れています。
ラベル付き見本
段落はこんな感じ。
<div class="dashed label_attr_2_sky" data-top="SKY"> <p>ラベル付き見本<br> 枠の外にラベルをつける。</p> <p><code>class="label_attr_2_sky"</code>でこの色のデザインになります。</p> <p><code>data-top="SKY"</code>で好きな文字を入れています。</p> <p>ラベル付き見本<br> 段落はこんな感じ。</p> </div>
GREEN
グリーン。
ラベル付き見本
枠の外にラベルをつける。
class="label_attr_2_green"でこの色のデザインになります。
data-top="GREEN"で好きな文字を入れています。
ラベル付き見本
段落はこんな感じ。
<div class="dashed label_attr_2_green" data-top="GREEN"> <p>ラベル付き見本<br> 枠の外にラベルをつける。</p> <p><code>class="label_attr_2_green"</code>でこの色のデザインになります。</p> <p><code>data-top="GREEN"</code>で好きな文字を入れています。</p> <p>ラベル付き見本<br> 段落はこんな感じ。</p> </div>
CREAM
クリームカラー。
ラベル付き見本
枠の外にラベルをつける。
class="label_attr_2_cream"でこの色のデザインになります。
data-top="CREAM"で好きな文字を入れています。
ラベル付き見本
段落はこんな感じ。
<div class="dashed label_attr_2_cream" data-top="CREAM"> <p>ラベル付き見本<br> 枠の外にラベルをつける。</p> <p><code>class="label_attr_2_cream"</code>でこの色のデザインになります。</p> <p><code>data-top="CREAM"</code>で好きな文字を入れています。</p> <p>ラベル付き見本<br> 段落はこんな感じ。</p> </div>
その３枠+薄い背景
枠+薄い背景がつくラベル。
ラベル付き見本３
枠の外にラベルをつける。
class="label_attr_3"でこのデザインになります。
data-top="ラベル３"で好きな文字を入れています。
ラベル付き見本
段落はこんな感じ。
<div class="solid label_attr_3" data-top="ラベル３"> <p>ラベル付き見本３<br> 枠の外にラベルをつける。</p> <p><code>class="label_attr_3"</code>でこのデザインになります。</p> <p><code>data-top="ラベル３"</code>で好きな文字を入れています。</p> <p>ラベル付き見本<br> 段落はこんな感じ。</p> </div>
色違い
色違いver
PINK
ピンク。
ラベル付き見本
枠の外にラベルをつける。
class="label_attr_3_pk"でこの色のデザインになります。
data-top="PINK"で好きな文字を入れています。
ラベル付き見本
段落はこんな感じ。
<div class="dashed label_attr_3_pk" data-top="PINK"> <p>ラベル付き見本<br> 枠の外にラベルをつける。</p> <p><code>class="label_attr_3_pk"</code>でこの色のデザインになります。</p> <p><code>data-top="PINK"</code>で好きな文字を入れています。</p> <p>ラベル付き見本<br> 段落はこんな感じ。</p> </div>
SKY
薄いブルー。
ラベル付き見本
枠の外にラベルをつける。
class="label_attr_3_sky"でこの色のデザインになります。
data-top="SKY"で好きな文字を入れています。
ラベル付き見本
段落はこんな感じ。
<div class="dashed label_attr_3_sky" data-top="SKY"> <p>ラベル付き見本<br> 枠の外にラベルをつける。</p> <p><code>class="label_attr_3_sky"</code>でこの色のデザインになります。</p> <p><code>data-top="SKY"</code>で好きな文字を入れています。</p> <p>ラベル付き見本<br> 段落はこんな感じ。</p> </div>
GREEN
グリーン。
ラベル付き見本
枠の外にラベルをつける。
class="label_attr_3_green"でこの色のデザインになります。
data-top="GREEN"で好きな文字を入れています。
ラベル付き見本
段落はこんな感じ。
<div class="dashed label_attr_3_green" data-top="GREEN"> <p>ラベル付き見本<br> 枠の外にラベルをつける。</p> <p><code>class="label_attr_3_green"</code>でこの色のデザインになります。</p> <p><code>data-top="GREEN"</code>で好きな文字を入れています。</p> <p>ラベル付き見本<br> 段落はこんな感じ。</p> </div>
CREAM
クリームカラー。
ラベル付き見本
枠の外にラベルをつける。
class="label_attr_3_cream"でこの色のデザインになります。
data-top="CREAM"で好きな文字を入れています。
ラベル付き見本
段落はこんな感じ。
<div class="dashed label_attr_3_cream" data-top="CREAM"> <p>ラベル付き見本<br> 枠の外にラベルをつける。</p> <p><code>class="label_attr_3_cream"</code>でこの色のデザインになります。</p> <p><code>data-top="CREAM"</code>で好きな文字を入れています。</p> <p>ラベル付き見本<br> 段落はこんな感じ。</p> </div>
マステ風ラベル
マスキングテープが張り付いたようなラベル。
その１文字なし
マスキングテープ風ラベル見本
div class="mt_attr"で指定。
<div class="dashed mt_attr"> <p>マスキングテープ風ラベル見本</p> <p><code>div class="mt_attr"</code>で指定。</p> </div>
その２上だけ文字入り
マスキングテープ風ラベル見本
data-top="マステ文字上"で文字を入力。
attrで値を取ってます。
div class="mt_attr"で指定。
<div class="dashed mt_attr" data-top="マステ文字上"> <p>マスキングテープ風ラベル見本<br> <code>data-top="マステ文字上"</code>で文字を入力。</p> <p><code>attr</code>で値を取ってます。</p> <p><code>div class="mt_attr"</code>で指定。</p> </div>
その３下だけ文字入り
マスキングテープ風ラベル見本
data-bottom="マステ文字下"で文字を入力。
attrで値を取ってます。
div class="mt_attr"で指定。
<div class="dashed mt_attr" data-bottom="マステ文字下"> <p>マスキングテープ風ラベル見本<br> <code>data-bottom="マステ文字下"</code>で文字を入力。</p> <p><code>attr</code>で値を取ってます。</p> <p><code>div class="mt_attr"</code>で指定。</p> </div>
その４上下文字いり
マスキングテープ風ラベル見本
data-top="マステ文字上"とdata-bottom="マステ文字下"で文字を入力。
attrで値を取ってます。
div class="mt_attr"で指定。
<div class="dashed mt_attr" data-top="マステ文字上" data-bottom="マステ文字下"> <p>マスキングテープ風ラベル見本<br> <code>data-top="マステ文字上"</code>と<code>data-bottom="マステ文字下"</code>で文字を入力。</p> <p><code>attr</code>で値を取ってます。</p> <p><code>div class="mt_attr"</code>で指定。</p> </div>
その５色違い見本
色違いの見本。
PINK
ピンク。
マスキングテープ風ラベル見本
div class="mt_attr_pk"でこのデザインを指定。
<div class="dashed mt_attr_pk" data-top="PINK"> <p>マスキングテープ風ラベル見本</p> <p><code>div class="mt_attr_pk"</code>でこのデザインを指定。</p> </div>
SKY
薄いブルー。
マスキングテープ風ラベル見本
div class="mt_attr_sky"でこのデザインを指定。
<div class="dashed mt_attr_sky" data-top="SKY"> <p>マスキングテープ風ラベル見本</p> <p><code>div class="mt_attr_sky"</code>でこのデザインを指定。</p> </div>
GREEN
グリーン。
マスキングテープ風ラベル見本
div class="mt_attr_green"でこのデザインを指定。
<div class="dashed mt_attr_green" data-top="GREEN"> <p>マスキングテープ風ラベル見本</p> <p><code>div class="mt_attr_green"</code>でこのデザインを指定。</p> </div>
CREAM
クリーム。
マスキングテープ風ラベル見本
div class="mt_attr_cream"でこのデザインを指定。
<div class="dashed mt_attr_cream" data-top="CREAM"> <p>マスキングテープ風ラベル見本</p> <p><code>div class="mt_attr_cream"</code>でこのデザインを指定。</p> </div>
三角コーナー風ラベル
枠の角に三角コーナーを設けました。
その１
左上に三角コーナーラベル。
三角コーナー風ラベルその１
枠の角にラベルをつける。
class="tri_attr_l"でこのデザインになります。
data-top="オススメ"で好きな文字を入れています。
ラベル付き見本
段落はこんな感じ。
<div class="solid tri_attr_l" data-top="オススメ"> <p>三角コーナー風ラベルその１<br> 枠の角にラベルをつける。</p> <p><code>class="tri_attr_l"</code>でこのデザインになります。</p> <p><code>data-top="オススメ"</code>で好きな文字を入れています。</p> <p>ラベル付き見本<br> 段落はこんな感じ。</p> </div>
その２
右上に三角コーナーラベル。
三角コーナー風ラベルその２
枠の角にラベルをつける。
class="tri_attr_r"でこのデザインになります。
data-top="NEW"で好きな文字を入れています。
ラベル付き見本
段落はこんな感じ。
<div class="solid tri_attr_r" data-top="NEW!"> <p>三角コーナー風ラベルその２<br> 枠の角にラベルをつける。</p> <p><code>class="tri_attr_r"</code>でこのデザインになります。</p> <p><code>data-top="NEW"</code>で好きな文字を入れています。</p> <p>ラベル付き見本<br> 段落はこんな感じ。</p> </div>
その３
右下に三角コーナーラベル。
三角コーナー風ラベルその２
枠の角にラベルをつける。
class="tri_attr_rb"でこのデザインになります。
data-top="新着"で好きな文字を入れています。
ラベル付き見本
段落はこんな感じ。
<div class="solid tri_attr_rb" data-top="新着"> <p>三角コーナー風ラベルその２<br> 枠の角にラベルをつける。</p> <p><code>class="tri_attr_rb"</code>でこのデザインになります。</p> <p><code>data-top="新着"</code>で好きな文字を入れています。</p> <p>ラベル付き見本<br> 段落はこんな感じ。</p> </div>
その４
左下に三角コーナーラベル。
三角コーナー風ラベルその２
枠の角にラベルをつける。
class="tri_attr_lb"でこのデザインになります。
data-top="CHECK"で好きな文字を入れています。
ラベル付き見本
段落はこんな感じ。
<div class="solid tri_attr_lb" data-top="CHECK"> <p>三角コーナー風ラベルその２<br> 枠の角にラベルをつける。</p> <p><code>class="tri_attr_lb"</code>でこのデザインになります。</p> <p><code>data-top="CHECK"</code>で好きな文字を入れています。</p> <p>ラベル付き見本<br> 段落はこんな感じ。</p> </div>
色違い
各ラベルクラス名の後ろに色名のクラスをつける。
PINK
左上
三角コーナー風ラベルピンク
枠の角にラベルをつける。
class="tri_attr_l_pk"でこのデザインになります。
data-top="左上"で好きな文字を入れています。
ラベル付き見本
段落はこんな感じ。
<div class="solid tri_attr_l_pk" data-top="ラベルの文字"> <p>BOX内文字</p> </div>
左下
三角コーナー風ラベルピンク
枠の角にラベルをつける。
class="tri_attr_lb_pk"でこのデザインになります。
data-top="左下"で好きな文字を入れています。
ラベル付き見本
段落はこんな感じ。
<div class="solid tri_attr_lb_pk" data-top="ラベルの文字"> <p>BOX内文字</p> </div>
右上
三角コーナー風ラベルピンク
枠の角にラベルをつける。
class="tri_attr_r_pk"でこのデザインになります。
data-top="右上"で好きな文字を入れています。
ラベル付き見本
段落はこんな感じ。
<div class="solid tri_attr_r_pk" data-top="ラベルの文字"> <p>BOX内文字</p> </div>
右下
三角コーナー風ラベルピンク
枠の角にラベルをつける。
class="tri_attr_rb_pk"でこのデザインになります。
data-top="右下"で好きな文字を入れています。
ラベル付き見本
段落はこんな感じ。
<div class="solid tri_attr_rb_pk" data-top="ラベルの文字"> <p>BOX内文字</p> </div>
SKY
左上
三角コーナー風ラベル薄いブルー
枠の角にラベルをつける。
class="tri_attr_l_sky"でこのデザインになります。
data-top="左上"で好きな文字を入れています。
ラベル付き見本
段落はこんな感じ。
<div class="solid tri_attr_l_sky" data-top="ラベルの文字"> <p>BOX内文字</p> </div>
左下
三角コーナー風ラベル薄いブルー
枠の角にラベルをつける。
class="tri_attr_lb_sky"でこのデザインになります。
data-top="左下"で好きな文字を入れています。
ラベル付き見本
段落はこんな感じ。
<div class="solid tri_attr_lb_sky" data-top="ラベルの文字"> <p>BOX内文字</p> </div>
右上
三角コーナー風ラベル薄いブルー
枠の角にラベルをつける。
class="tri_attr_r_sky"でこのデザインになります。
data-top="右上"で好きな文字を入れています。
ラベル付き見本
段落はこんな感じ。
<div class="solid tri_attr_r_sky" data-top="ラベルの文字"> <p>BOX内文字</p> </div>
右下
三角コーナー風ラベル薄いブルー
枠の角にラベルをつける。
class="tri_attr_rb_sky"でこのデザインになります。
data-top="右下"で好きな文字を入れています。
ラベル付き見本
段落はこんな感じ。
<div class="solid tri_attr_rb_sky" data-top="ラベルの文字"> <p>BOX内文字</p> </div>
GREEN
左上
三角コーナー風ラベルGREEN
枠の角にラベルをつける。
class="tri_attr_l_green"でこのデザインになります。
data-top="左上"で好きな文字を入れています。
ラベル付き見本
段落はこんな感じ。
<div class="solid tri_attr_l_green" data-top="ラベルの文字"> <p>BOX内文字</p> </div>
左下
三角コーナー風ラベルGREEN
枠の角にラベルをつける。
class="tri_attr_lb_green"でこのデザインになります。
data-top="左下"で好きな文字を入れています。
ラベル付き見本
段落はこんな感じ。
<div class="solid tri_attr_lb_green" data-top="ラベルの文字"> <p>BOX内文字</p> </div>
右上
三角コーナー風ラベルGREEN
枠の角にラベルをつける。
class="tri_attr_r_green"でこのデザインになります。
data-top="右上"で好きな文字を入れています。
ラベル付き見本
段落はこんな感じ。
<div class="solid tri_attr_r_green" data-top="ラベルの文字"> <p>BOX内文字</p> </div>
右下
三角コーナー風ラベルGREEN
枠の角にラベルをつける。
class="tri_attr_rb_green"でこのデザインになります。
data-top="右下"で好きな文字を入れています。
ラベル付き見本
段落はこんな感じ。
<div class="solid tri_attr_rb_green" data-top="ラベルの文字"> <p>BOX内文字</p> </div>
CREAM
左上
三角コーナー風ラベルCREAM
枠の角にラベルをつける。
class="tri_attr_l_cream"でこのデザインになります。
data-top="左上"で好きな文字を入れています。
ラベル付き見本
段落はこんな感じ。
<div class="solid tri_attr_l_cream" data-top="ラベルの文字"> <p>BOX内文字</p> </div>
左下
三角コーナー風ラベルCREAM
枠の角にラベルをつける。
class="tri_attr_lb_cream"でこのデザインになります。
data-top="左下"で好きな文字を入れています。
ラベル付き見本
段落はこんな感じ。
<div class="solid tri_attr_lb_cream" data-top="ラベルの文字"> <p>BOX内文字</p> </div>
右上
三角コーナー風ラベルCREAM
枠の角にラベルをつける。
class="tri_attr_r_cream"でこのデザインになります。
data-top="右上"で好きな文字を入れています。
ラベル付き見本
段落はこんな感じ。
<div class="solid tri_attr_r_cream" data-top="ラベルの文字"> <p>BOX内文字</p> </div>
右下
三角コーナー風ラベルCREAM
枠の角にラベルをつける。
class="tri_attr_rb_cream"でこのデザインになります。
data-top="右下"で好きな文字を入れています。
ラベル付き見本
段落はこんな感じ。
<div class="solid tri_attr_rb_cream" data-top="ラベルの文字"> <p>BOX内文字</p> </div>
