【attr】ラベル見本
ラベル見本その2。 attrで取得ver。 data-*の中に好きな文字を入れることでラベルに文字が入ります。
ノーマルラベル
よくあるラベル。
その1角ばったラベル
枠の外に角ばったラベル。
ラベル付き見本
枠の外にラベルをつける。
class="label_attr"
でこのデザインになります。
data-top="ラベル1"
で好きな文字を入れています。
ラベル付き見本
段落はこんな感じ。
色違い
色違い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"
で好きな文字を入れています。
ラベル付き見本
段落はこんな感じ。
その2上部が少し丸いラベル
上部が少し丸まったラベル。
ラベル付き見本2
枠の外にラベルをつける。
class="label_attr_2"
でこのデザインになります。
data-top="ラベル2"
で好きな文字を入れています。
ラベル付き見本
段落はこんな感じ。
色違い
色違い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"
で好きな文字を入れています。
ラベル付き見本
段落はこんな感じ。
その3枠+薄い背景
枠+薄い背景がつくラベル。
ラベル付き見本3
枠の外にラベルをつける。
class="label_attr_3"
でこのデザインになります。
data-top="ラベル3"
で好きな文字を入れています。
ラベル付き見本
段落はこんな感じ。
色違い
色違い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"
で好きな文字を入れています。
ラベル付き見本
段落はこんな感じ。
マステ風ラベル
マスキングテープが張り付いたようなラベル。
その1文字なし
マスキングテープ風ラベル見本
div class="mt_attr"
で指定。
その2上だけ文字入り
マスキングテープ風ラベル見本
data-top="マステ文字上"
で文字を入力。
attr
で値を取ってます。
div class="mt_attr"
で指定。
その3下だけ文字入り
マスキングテープ風ラベル見本
data-bottom="マステ文字下"
で文字を入力。
attr
で値を取ってます。
div class="mt_attr"
で指定。
その4上下文字いり
マスキングテープ風ラベル見本
data-top="マステ文字上"
とdata-bottom="マステ文字下"
で文字を入力。
attr
で値を取ってます。
div class="mt_attr"
で指定。
その5色違い見本
色違いの見本。
PINK
ピンク。
マスキングテープ風ラベル見本
div class="mt_attr_pk"
でこのデザインを指定。
SKY
薄いブルー。
マスキングテープ風ラベル見本
div class="mt_attr_sky"
でこのデザインを指定。
GREEN
グリーン。
マスキングテープ風ラベル見本
div class="mt_attr_green"
でこのデザインを指定。
CREAM
クリーム。
マスキングテープ風ラベル見本
div class="mt_attr_cream"
でこのデザインを指定。
三角コーナー風ラベル
枠の角に三角コーナーを設けました。
その1
左上に三角コーナーラベル。
三角コーナー風ラベルその1
枠の角にラベルをつける。
class="tri_attr_l"
でこのデザインになります。
data-top="オススメ"
で好きな文字を入れています。
ラベル付き見本
段落はこんな感じ。
その2
右上に三角コーナーラベル。
三角コーナー風ラベルその2
枠の角にラベルをつける。
class="tri_attr_r"
でこのデザインになります。
data-top="NEW"
で好きな文字を入れています。
ラベル付き見本
段落はこんな感じ。
その3
右下に三角コーナーラベル。
三角コーナー風ラベルその2
枠の角にラベルをつける。
class="tri_attr_rb"
でこのデザインになります。
data-top="新着"
で好きな文字を入れています。
ラベル付き見本
段落はこんな感じ。
その4
左下に三角コーナーラベル。
三角コーナー風ラベルその2
枠の角にラベルをつける。
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="新着"
で好きな文字を入れています。
ラベル付き見本
段落はこんな感じ。