コピペで使えるCSSリストデザイン集

箇条書きは、ブラウザ標準のままだと黒丸が並ぶだけの素っ気ない見た目です。この記事は、そのまま使えるリストのデザインを動くデモつきで8個まとめました。コピペして、文言を自分の内容に差し替えるだけです。

まずは共通の下ごしらえ

ブラウザ標準の黒丸と左余白を消して、まっさらな状態から始めます。どのデザインもこのリセットが前提です。

.list {
  margin: 0;
  padding: 0;
  list-style: none;
}

定番の飾りつけ

チェックマークのリスト

黒丸のかわりに緑のチェックを置く、「できること」「ポイント」の紹介にぴったりの形です。

.check li {
  position: relative;
  padding-left: 32px;
}
.check li::before {
  content: "✓";
  position: absolute;
  left: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #2ec46f;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

仕組みは「黒丸を消して、::beforeで自作の飾りを左に置く」。contentの中身を"★"や"→"に変えるだけで別のリストになります。

番号バッジのリスト

手順の説明に使う番号つきリスト。番号を丸いバッジにすると、ぐっと読みやすくなります。番号はcounterという仕組みでCSSが自動で振ってくれます。

.steps {
  counter-reset: step;        /* 数えはじめ */
}
.steps li {
  counter-increment: step;    /* 1行ごとに+1 */
}
.steps li::before {
  content: counter(step);     /* 数を表示 */
}

途中に行を足しても、番号は自動で振り直されます。手で番号を書くより、ずっと安全です。

番号を「01」「02」のような2桁ぞろえにしたいときは、contentの1行を変えるだけです。

.steps li::before {
  content: counter(step, decimal-leading-zero);
}

decimal-leading-zeroは「1桁の数に0を付けて表示する」という指定。雑誌の目次のような、きちんとした印象になります。

線で区切るリスト

飾りを足すかわりに、行の間へうすい線を1本ずつ。お知らせ一覧やメニュー表など、静かに整えたい場面の定番です。

.news li {
  padding: 12px 4px;
  border-bottom: 1px solid #eee;
}

最後の行の下にも線が残るのが気になるときは、.news li:last-child { border-bottom: none; }を足します。日付側のflex-shrink: 0は、本文が長くなっても日付が折り返されないようにするための保険です。

矢印つきリンクリスト

リストの1行ずつがリンクになっている「メニュー型」。右端の矢印がホバーですっと動くと、押せることがはっきり伝わります。

.menu a {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.menu a:hover span {
  transform: translateX(4px);
}

justify-content: space-betweenで「文字は左、矢印は右」に振り分けています。li + liは「2行目以降」の意味で、行間の線を1本目には引かないための書き方です。

見せ場を作る

タイムライン風リスト

縦線と丸で「歩み」を見せる形。学習の記録や制作の歴史、プロフィールの経歴にぴったりです。

.timeline::before {
  content: "";          /* 縦線 */
  position: absolute;
  width: 2px;
}
.timeline li::before {
  content: "";          /* 各行の丸 */
  border-radius: 50%;
  border: 3px solid #fff;
}

縦線はリスト全体の::before、丸は各行の::beforeと、役割を分けて描いています。丸の白い縁が、線の上に浮いて見せるコツです。

カード風リスト

1行ずつを小さなカードに。行そのものに存在感を持たせたい、特徴の紹介などに向いています。

.cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cards li {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
}

行間の余白はgapで一括管理。行を増やしても詰まりません。

タグ・チップの横並びリスト

「すきなもの」「使える技術」のような単語の一覧は、縦に並べるよりチップにして横に流すとコンパクトです。

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tags li {
  padding: 6px 14px;
  border-radius: 999px;
}

flex-wrap: wrapが「入りきらなくなったら折り返す」の指定。タグが何個に増えても崩れません。

タグを何色かで塗り分けたいときは、nth-childで順番に色を当てるとHTMLを触らずにすみます。

.tags li:nth-child(3n+1) { background: #ffe8d6; color: #c05e1a; }
.tags li:nth-child(3n+2) { background: #e0f2e9; color: #1d7a4b; }
.tags li:nth-child(3n)   { background: #e3edff; color: #2b5cbf; }

3n+1は「1・4・7番目…」の意味。3色がループしながら並ぶので、タグが増えても自動で彩られます。

横に並べる定義リスト風

「項目名：内容」のペアが続くプロフィールは、名前の列と内容の列をそろえるときれいです。

.profile li {
  display: flex;
}
.key {
  width: 110px;      /* 項目名の列幅をそろえる */
  flex-shrink: 0;
}

項目名側に固定の幅を持たせるだけで、内容の頭がそろって表のように読めます。

リストが変になるときのチェックリスト

• 黒丸が消えない → list-style: noneを<ul>（<ol>）に書けば、中の<li>まで効きます。それでも消えないときは、別のCSSが<li>側でlist-styleを上書きしていないか確認を
• 左に謎の余白が残る → ブラウザ標準のpaddingです。<ul>にpadding: 0を
• ::beforeの飾りが出ない → content: ""を書き忘れていませんか？空でも必須です
• 飾りの位置がずれる → <li>側にposition: relativeが必要です

まとめ

1. すべての出発点は黒丸と余白のリセット（list-style: none＋padding: 0）
2. 飾りは::beforeで自作する——チェック・番号バッジ・タイムラインの丸、ぜんぶ同じ仕組み
3. 横に並べたいときはdisplay: flex＋flex-wrap: wrap——タグ風・定義リスト風に応用できる

箇条書きはどのページにも必ず出てくる部品です。ひとつ着替えさせるだけで、ページ全体が引き締まります。