HTML・CSSでつくる箇条書きリストのデザイン13選

箇条書きに欠かせない点のみを付けた、とてもシンプルなリスト。シンプルイズベストということで、個人的にイチオシのパーツです。

左に枠線を付けた、引用ボックスでよく見るデザインです。

枠線の上にタイトルを置いたリストです。タイトルをより目立たせたい場合はフォントサイズを調整するのもアリかもしれません。

上部にタイトルを付けたリストです。多用するとくどく思われてしまうので、よりリストを強調させたい場合のみに使うのがおすすめです。

数字を囲んだリストです。四角 or 円にするか、お好みで形状を選んでみてください。

チェックマークを付けた、Todoリストのようにも見えるリスト。比較的シンプルなデザインでありながらユーザーの目を引きやすいのが特徴です。

絵文字を使うことで可愛さが増したリスト。ぜひお好きな絵文字を指定してみてください。

背景と左に枠線を付けた、見出し風のリストです。見た目的にもかなり目立つ部類なので、リストを強調したい時に利用するのがおすすめです。

ディレクトリ・ファイルやサイトマップを表示する場合におすすめなリスト。フォルダ要素に関しては、spanタグで囲むことでアイコンが左に付くようになります。