【デザイン】リストサンプル集
リストを使用したときにclass=""
を<ul>
や<ol>
に指定することでいろいろ変化が付けられるようにしました。
ぜひ通常の見た目と見比べてみてください。
ulのサンプル集
ulのデザインサンプル集です。
リスト普通
- リスト
- リスト
- 小階層リスト
- 小階層リスト
- 小階層リスト
- リスト
- リスト
- リスト
リストパターン2太字
- リスト
- リスト
- 小階層リスト
- 小階層リスト
- 小階層リスト
- リスト
- リスト
- リスト
list_type_bold
でリスト太字。
リストパターン3>を出す
- リスト
- リスト
- 小階層リスト
- 小階層リスト
- 小階層リスト
- リスト
- リスト
- リスト
list_mark_right
でリスト横に>マーク。
リストパターン4チェックマーク
- リスト
- リスト
- 小階層リスト
- 小階層リスト
- 小階層リスト
- リスト
- リスト
- リスト
ist_mark_check
でリスト横にチェックマーク。
リストパターン組み合わせ
ist_mark_check
とlist_type_bold
でリスト横にチェックマーク+太字。
- チェック+太字にしたいリスト
- チェック+太字にしたいリスト
- 下の階層は太字にはなりません。
- リストマークが要らなければ
class="list_none"
でマークが消えます。
- チェック+太字にしたいリスト
<ul class="list_mark_check list_type_bold"> <li>チェック+太字にしたいリスト</li> <li>チェック+太字にしたいリスト <ul> <li>下の階層は太字にはなりません。</li> <li class="list_none">リストマークが要らなければ<code>class="list_none"</code>でマークが消えます。</li> </ul> </li> <li>チェック+太字にしたいリスト</li> </ul>
olのサンプル集
olのデザインサンプル集です。
数字付きリスト普通
- リスト
- リスト
- 小階層リスト
- 小階層リスト
- 小階層リスト
- リスト
- リスト
- リスト
数字付きリストパターン2太字
- リスト
- リスト
- 小階層リスト
- 小階層リスト
- 小階層リスト
- リスト
- リスト
- リスト
list_type_bold
指定で太字。
数字リストパターン3>マーク
- リスト
- リスト
- 小階層リスト
- 小階層リスト
- 小階層リスト
- リスト
- リスト
- リスト
list_mark_right
でリスト横に>マーク。
数字リストパターン4チェックマーク
- リスト
- リスト
- 小階層リスト
- 小階層リスト
- 小階層リスト
- リスト
- リスト
- リスト
list_mark_check
でリスト横にチェックマーク。
数字リストパターン組み合わせ
ist_mark_check
とlist_type_bold
でリスト横にチェックマーク+太字。
- チェック+太字にしたいリスト
- チェック+太字にしたいリスト
- 下の階層は太字にはなりません。
- リストマークが要らなければ
class="list_none"
でマークが消えます。
- チェック+太字にしたいリスト
<ol class="list_mark_check list_type_bold"> <li>チェック+太字にしたいリスト</li> <li>チェック+太字にしたいリスト <ol> <li>下の階層は太字にはなりません。</li> <li class="list_none">リストマークが要らなければ<code>class="list_none"</code>でマークが消えます。</li> </ol> </li> <li>チェック+太字にしたいリスト</li> </ol>
合わせて読みたい
枠線と組み合わせると見やすくなるかと思います。
枠線のデザインサンプルはこちら
michhecosume.hateblo.jpPOINTやCHECKなどの文字付きの枠はこちら
michhecosume.hateblo.jp