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

ラベル付きboxサンプル集2

ラベル付きBOXのサンプル集その２です。
spanではなく、文字列はattrで取得しています。

data-*=好きな文字を入れることでラベルに文字が入ります。

枠の色や背景色は、いつも通り<div class="クラス名">で指定することで変更できます。

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

ラベル付きboxサンプル集

boxにラベルをつけるデザインサンプル集。
枠デザインのサンプルと組み合わせて使ってください。

ラベル内の文字は<span class="クラス名"></span>で指定します。
枠のデザインのクラスは<div class="クラス名">で指定です。

【デザイン】リストサンプル集

リストを使用したときにclass=""を<ul>や<ol>に指定することでいろいろ変化が付けられるようにしました。
ぜひ通常の見た目と見比べてみてください。

【デザイン】枠のサンプル集

枠のサンプル集

テンプレート「パステルノート」で使える枠のデザインサンプル集。
簡単なコードだけで使うことができます。 長いので続きを読むからどうぞ。