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

要点を整理することでWebサイトの可読性をグッと上げてくれる「リスト」。どうせならユーザーの目を引くデザインにしたいですよね。そこで今回はHTML・CSSでつくるおしゃれな箇条書きリストのデザインをまとめました。ボックスの有無を切り替えることが可能で、もちろんul・olタグどちらにも対応しています。

点付きのリスト

スタンダード

スタンダード

  1. デザイン調整
  2. HTMLをコピペ
  3. CSSをコピペ
  4. 完了
step1

デザインを調整する

  • タグの種類
  • 枠線

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

下線あり

下線あり

  1. デザイン調整
  2. HTMLをコピペ
  3. CSSをコピペ
  4. 完了
step1

デザインを調整する

  • タグの種類
  • 枠線
引用風

引用風

  1. デザイン調整
  2. HTMLをコピペ
  3. CSSをコピペ
  4. 完了
step1

デザインを調整する

  • タグの種類

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

タイトル (小)

タイトル (小)

  1. デザイン調整
  2. HTMLをコピペ
  3. CSSをコピペ
  4. 完了
step1

デザインを調整する

  • タグの種類

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

タイトル (大)

タイトル (大)

  1. デザイン調整
  2. HTMLをコピペ
  3. CSSをコピペ
  4. 完了
step1

デザインを調整する

  • タグの種類

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

タイトル (大) & 背景色

タイトル (大) & 背景色

  1. デザイン調整
  2. HTMLをコピペ
  3. CSSをコピペ
  4. 完了
step1

デザインを調整する

  • タグの種類

番号付きのリスト

番号に背景

番号に背景

  1. デザイン調整
  2. HTMLをコピペ
  3. CSSをコピペ
  4. 完了
step1

デザインを調整する

  • タグの種類
  • 枠線
  • 番号の形状

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

その他のリスト

矢印

矢印

  1. デザイン調整
  2. HTMLをコピペ
  3. CSSをコピペ
  4. 完了
step1

デザインを調整する

  • タグの種類
  • 枠線
矢印 (円形)

矢印 (円形)

  1. デザイン調整
  2. HTMLをコピペ
  3. CSSをコピペ
  4. 完了
step1

デザインを調整する

  • タグの種類
  • 枠線
チェックマーク

チェックマーク

  1. デザイン調整
  2. HTMLをコピペ
  3. CSSをコピペ
  4. 完了
step1

デザインを調整する

  • タグの種類
  • 枠線

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

絵文字

絵文字

  1. デザイン調整
  2. HTMLをコピペ
  3. CSSをコピペ
  4. 完了
step1

デザインを調整する

  • タグの種類
  • 枠線

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

見出し風

見出し風

  1. デザイン調整
  2. HTMLをコピペ
  3. CSSをコピペ
  4. 完了
step1

デザインを調整する

  • タグの種類

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

ディレクトリリスト (ツリー構造)

ディレクトリリスト (ツリー構造)

  1. デザイン調整
  2. HTMLをコピペ
  3. CSSをコピペ
  4. 完了
step1

デザインを調整する

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