シンプルなリストのアイデアまとめ

サイト内のちょっとしたリストのシンプルな見せ方のアイデアをまとめてみました！
コピペで使えるコードも掲載していますので、ぜひご活用ください！

丸を付けたリスト

ulタグのスタイルをリセットしなければデフォルトで丸がついたリストになりますが、beforeを使うことで丸の大きさや色を自由にカスタマイズすることができます。

見え方サンプル

四角を付けたリスト

こちらは先程のリストの丸を四角に変えてみました。
transformを使うことでダイヤ型にすることもできます。

見え方サンプル

線を付けたリスト

線だけを付けたリストにするとかなりシンプルな印象になります。
サイトマップやフッターなど、掲載するリンクの数が多い場合に良いかと思います！

見え方サンプル

アイコンを付けたリスト

アイコンを付けることで遊び心を出すことができます。
google fontのアイコンを使うことで自分でアイコンを作らなくても簡単に作ることができます。

見え方サンプル

数字を付けたリスト

順番が関係するリストの場合などはolタグでマークアップし、番号を振ることもあると思います。
デフォルトのスタイルでも番号を付けることはできますが、デフォルトの設定をnoneにし、beforeで置き換えることで色やフォントサイズを簡単にカスタマイズできるようになります。

見え方サンプル

数字にアレンジを加えたリスト

先程のbeforeで置き換える方法を応用するとよりアレンジを加えたデザインにすることができます。
spanで「POINT」と背景部分を作成し、beforeに数字を表示させるように指定、両方の位置をpositionで調整して文字の前に配置するようにしています。

見え方サンプル