本文へスキップ
  1. Web BENTO CSS
  2. カテゴリ一覧
  3. リスト装飾
14 / LIST 12 パーツ

CSSリストデザイン 12選

コピペで使えるおしゃれなCSSリスト（箇条書き）のデザイン集。チェック・番号・矢印などのマーカーからステップ・ゼブラまで、シャッフルで配色のバリエーションを試せます。表示中のプレビューとコードは常に一致するので、気に入ったらそのままコピーしてください。クラス名は .bnto-list-check 形式です。

該当するパーツが見つかりませんでした。

  • デザインを選ぶ
  • コピーする
  • 貼って完成

チェックリスト

.bnto-list-check { list-style: none; padding: 0; }
.bnto-list-check li { display: flex; align-items: center; gap: 10px; }
.bnto-list-check li::before {
  content: "✓"; flex: none;
  width: 20px; height: 20px; border-radius: 50%;
  background: hsl(119 31% 51%); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px;
}
使い方のコツ

メリットや特徴の一覧など「できること」を伝えるリストに最適。flex: none はテキストが長いときにマーカーが潰れるのを防ぐ保険です。「✓」は好きな記号や絵文字に差し替えられます。

  1. 重箱を選ぶ
  2. コピーする
  3. 貼って完成

番号バッジ

.bnto-list-number { list-style: none; padding: 0; counter-reset: n; }
.bnto-list-number li { display: flex; align-items: center; gap: 10px; }
.bnto-list-number li::before {
  counter-increment: n; content: counter(n);
  width: 22px; height: 22px; border-radius: 50%;
  background: hsl(202 73% 56%); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; flex: none;
}
使い方のコツ

番号は counter がCSSで自動採番するので、HTMLに数字を書く必要はありません。①親に counter-reset、②li::before に counter-increment、③content: counter(名前) で表示、の3点セットです。<li> を増やすだけで番号が続き、並べ替えにも強いのが利点。

  • ポイント1
  • ポイント2
  • ポイント3

矢印マーカー

.bnto-list-arrow { list-style: none; padding: 0; }
.bnto-list-arrow li { display: flex; align-items: center; gap: 10px; }
.bnto-list-arrow li::before {
  content: "→"; flex: none;
  color: hsl(5 100% 65%);
  font-weight: 900;
}
使い方のコツ

関連記事やナビゲーションなど、リンクを並べるリストと好相性。「→」を「▶」「≫」に替えるだけで印象が変わります。li 内を <a> にする場合は text-decoration: none; を添えるとすっきりします。

  • 項目テキスト
  • 項目テキスト
  • 項目テキスト

カラードット

.bnto-list-dot { list-style: none; padding: 0; }
.bnto-list-dot li { display: flex; align-items: center; gap: 10px; }
.bnto-list-dot li::before {
  content: ""; flex: none;
  width: 9px; height: 9px;
  border-radius: 50%; background: hsl(41 100% 50%);
}
使い方のコツ

ブラウザ標準の黒点をサイトのテーマカラーに置き換えたいときの定番。border-radius: 50% を 3px 程度にすると角丸四角のアイコン風ドットになります。

  • 項目テキスト
  • 項目テキスト
  • 項目テキスト

ダッシュ

.bnto-list-dash { list-style: none; padding: 0; }
.bnto-list-dash li { display: flex; align-items: center; gap: 10px; }
.bnto-list-dash li::before {
  content: "—"; flex: none;
  color: hsl(40 5% 58%);
  font-weight: 900;
}
使い方のコツ

注釈や補足事項など、控えめに見せたいリストにぴったり。グレー系のミュートカラーにしておくと本文の邪魔をしません。フッターのリンクリストにもよく使われます。

  • おすすめ項目
  • おすすめ項目
  • おすすめ項目

スター

.bnto-list-star { list-style: none; padding: 0; }
.bnto-list-star li { display: flex; align-items: center; gap: 10px; }
.bnto-list-star li::before {
  content: "★"; flex: none;
  color: hsl(41 100% 50%);
  font-size: 14px;
}
使い方のコツ

特典・おすすめポイントなど「特別感」を出したいリストに。塗りなしの「☆」や「♦」「●」など、記号を替えるだけで別のマーカーとして流用できます。

  • 項目を確認
  • 内容を保存
  • 提出する

角チェック

.bnto-list-sqcheck { list-style: none; padding: 0; }
.bnto-list-sqcheck li { display: flex; align-items: center; gap: 10px; }
.bnto-list-sqcheck li::before {
  content: "✓"; flex: none;
  width: 20px; height: 20px;
  border-radius: 5px; background: hsl(202 73% 56%);
  color: #fff; font-size: 12px;
  display: inline-flex; align-items: center; justify-content: center;
}
使い方のコツ

チェックボックス風の見た目なので、TODO・手続きの完了リストと相性抜群。border-radius を大きくすると丸チェックに近づき、柔らかい印象になります。

  • 完了タスク
  • 完了タスク
  • 完了タスク

チェックマーク

.bnto-list-tick { list-style: none; padding: 0; }
.bnto-list-tick li { display: flex; align-items: center; gap: 10px; }
.bnto-list-tick li::before {
  content: ""; flex: none;
  width: 7px; height: 13px;
  border: solid hsl(119 31% 51%); border-width: 0 3px 3px 0;
  transform: rotate(45deg); margin: 0 4px 3px 0;
}
使い方のコツ

文字の「✓」ではなく、borderの2辺を45度回転させて描くレ点。フォントに依存しないため、どの環境でも同じ形で表示されます。太さは border-width の 3px を調整。

  • 項目テキスト
  • 項目テキスト
  • 項目テキスト

円マーカー

.bnto-list-circle { list-style: none; padding: 0; }
.bnto-list-circle li { display: flex; align-items: center; gap: 10px; }
.bnto-list-circle li::before {
  content: ""; flex: none;
  width: 10px; height: 10px;
  border-radius: 50%; border: 3px solid hsl(327 53% 54%);
}
使い方のコツ

塗りつぶしドットより軽やかな、リング型のマーカー。border の太さで印象が変わり、太いほどポップに、細いほど上品になります。

  1. お申し込み
  2. ヒアリング
  3. 納品・公開

ステップ・タイムライン

.bnto-list-step { list-style: none; padding: 0; counter-reset: step; }
.bnto-list-step li { position: relative; counter-increment: step;
  padding: 2px 0 24px 40px; }
.bnto-list-step li::before {
  content: counter(step); position: absolute; left: 0; top: 0;
  width: 26px; height: 26px; border-radius: 50%;
  background: hsl(160 45% 42%); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
}
.bnto-list-step li::after {
  content: ""; position: absolute; left: 12px; top: 28px; bottom: 2px;
  width: 2px; background: hsl(160 45% 42% / 0.25);
}
.bnto-list-step li:last-child { padding-bottom: 2px; }
.bnto-list-step li:last-child::after { display: none; }
使い方のコツ

サービスの流れ・お申し込み手順の説明に定番のタイムライン型。縦線は li::after で描いていて、left: 12px は番号丸の中心（26px ÷ 2 − 線の半分）に合わせた値です。丸のサイズを変えたら線の位置も揃えてください。

  • 項目テキスト
  • 項目テキスト
  • 項目テキスト

ゼブラ（交互背景）

.bnto-list-zebra { list-style: none; padding: 0; margin: 0;
  border-radius: 10px; overflow: hidden; }
.bnto-list-zebra li { padding: 10px 16px; }
.bnto-list-zebra li:nth-child(odd) {
  background: hsl(327 55% 56% / 0.12);
}
使い方のコツ

項目数が多いリストでも行の区切りが追いやすくなる、テーブル譲りのテクニック。:nth-child(odd) を even にすると偶数行に色が付きます。背景色は薄め（透明度 0.1 前後）が上品です。

  1. 人気の記事タイトル
  2. 人気の記事タイトル

ビッグ番号

.bnto-list-bignum { list-style: none; padding: 0; counter-reset: big; }
.bnto-list-bignum li { position: relative; counter-increment: big;
  padding: 9px 0 9px 56px; }
.bnto-list-bignum li::before {
  content: counter(big, decimal-leading-zero);
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  font-size: 32px; font-weight: 800; line-height: 1;
  color: hsl(258 47% 56% / 0.26);
}
使い方のコツ

ランキングや特集記事の一覧で映える、大きな薄い番号が背景のように入るデザイン。decimal-leading-zero で「01, 02…」表記になります。数字部分に等幅フォントを指定すると桁が揃ってさらに雑誌風に。

CSSリストデザインの基礎知識

箇条書き（リスト）は、文章を要点ごとに区切って伝えられる基本パーツです。適切に装飾されたリストは流し読みでも内容が頭に入りやすく、記事の可読性や理解度の向上に直結します。このページでは、CSSでおしゃれに仕上げたリストデザインを12種類掲載。チェック・番号・矢印の定番マーカーから、ステップ（タイムライン）・ゼブラ縞・ビッグ番号まで、すべて画像を使わないピュアCSSです。

ブラウザ標準の黒点は ::marker 疑似要素で色やサイズを変えられますが、装飾の自由度は高くありません。そこで本ページのパーツは list-style: none で標準マーカーを消し、li::before 疑似要素でマーカーを描き直す手法で統一しています。HTMLは ul（または ol）と li のままでよく、箇条書きのデザインをコピペだけで整えられます。クラス名は .bnto-list-〇〇 形式の独自プレフィックス付きで、既存CSSと衝突しにくい設計です。

チェック・番号・矢印の使い分け

  • チェック系 — メリット・特徴・プラン内容など「できること」の一覧に。ポジティブな印象を与えます。
  • 番号・ステップ系 — 手順やランキングなど順番に意味がある内容に。ol タグと組み合わせるのがセオリー。
  • 矢印・ドット系 — 汎用の箇条書きや関連リンクに。本文になじむ控えめな装飾です。

counterプロパティで自動採番

番号付きデザインは、親に counter-reset、li::before に counter-increment と content: counter(名前) を書く3点セットで、CSSが自動で連番を振ります。HTMLに数字を書かないため、項目の追加や並べ替えをしても番号が崩れません。

行間・余白の設計

マーカーと文字の間隔は gap、行同士の間隔は margin や padding で調整します。行間が詰まりすぎたリストは読みにくいので、文字サイズの0.5〜0.8倍程度のすき間を目安にすると、コピペ後もバランスよく仕上がります。

よくある質問

コピーしたリストのCSSはそのまま使えますか？
はい。CSSタブのコードをスタイルシートに、HTMLタブのコードをページに貼り付けるだけで動きます。list-style: none などのリセットも含まれているため、ブラウザ標準の黒点マーカーと二重になる心配はありません。
ulとolはどう使い分ければいいですか？
順序に意味がない箇条書きは ul、手順やランキングなど順番が大事なリストは ol を使います。番号バッジやステップのような連番デザインはCSSのcounterが自動で採番するので、HTMLに数字を書く必要はありません。
マーカーの色やサイズを変更するには？
li::before の background や color、width / height の値を書き換えるだけです。各カードの「シャッフル」ボタンを押すと配色のバリエーションをその場で試せて、コードも自動で書き換わります。
商用サイトで利用できますか？
はい、すべてのパーツは商用・個人を問わず無料で利用できます。登録やクレジット表記も不要です。
このページのパーツはAIコーディングツールでも使えますか？
はい。Claude CodeやCursorのようにWebページを読めるAIには、このページのURLとパーツ名（例:「番号バッジ」）を伝えるだけで適用を指示できます。AIがWebを読めない場合は、「コピー」ボタンで取得したHTMLとCSSをチャットに貼り付けて調整を頼むのが確実です。改変後のコードは、公開前に表示確認することをおすすめします。

関連カテゴリ

リストと組み合わせて使いやすいパーツはこちら。

見出し装飾 区切り線 バッジ・タグ テーブル装飾