【デザイン】リストサンプル集
リストを使用したときに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>
枠と組み合わせる
- リストサンプル文字が長いとこんな感じ。リストサンプル文字が長いとこんな感じ。リストサンプル文字が長いとこんな感じ。リストサンプル文字が長いとこんな感じ。
- リストサンプル
- 小階層リストサンプル。左にマーク。文字が長くなるとこんな感じ。小階層リストサンプル。左にマーク。文字が長くなるとこんな感じ。小階層リストサンプル。左にマーク。文字が長くなるとこんな感じ。
- 小階層リストサンプル
- リストサンプル
- リストサンプル
合わせて読みたい
枠線と組み合わせると見やすくなるかと思います。
枠線のデザインサンプルはこちら。
