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