プログラミングの独学サイトです。

CSS

CSSリストデザイン集｜ul・olをおしゃれにするコピペ例

CSSでul・ol・dlのリストを見やすく整えるコピペ例を20個まとめました。チェックリスト、番号付き、カード風、横並び、タイムライン、ランキングなど、箇条書きをおしゃれにする方法を紹介します。

更新 2026.07.12公開 2026.07.08 24分で読めます
この記事の目次
  1. 1. 基本の読みやすいリスト
  2. 2. チェックマークのリスト
  3. 3. 丸アイコンのチェックリスト
  4. 4. 矢印アイコンのリスト
  5. 5. 下線区切りのリスト
  6. 6. 背景つきのカードリスト
  7. 7. 番号付きの基本ステップリスト
  8. 8. 丸番号のステップリスト
  9. 9. カード型のステップリスト
  10. 10. 横並びタグリスト
  11. 11. 横並びメニューリスト
  12. 12. 2列に並べるリスト
  13. 13. タイムライン風リスト
  14. 14. ランキングリスト
  15. 15. FAQ風のリスト
  16. 16. 定義リスト風の情報リスト
  17. 17. 階層が見やすい入れ子リスト
  18. 18. ::marker で点だけ変えるリスト
  19. 19. 注意書きリスト
  20. 20. CSS変数で色を変えやすいリスト
  21. リストデザインで失敗しやすいポイント
  22. どのリストを選ぶとよいか
  23. まとめ

リストは、箇条書き、手順、特徴、注意点、ランキング、メニューなど、Webサイトのあちこちで使います。

ただ、初期状態の ul や ol のままだと、余白が合わなかったり、少し地味に見えたりします。

この記事では、CSSで使いやすいリストデザインを20個まとめました。HTMLとCSSをそのままコピーして、色や余白だけ調整して使える形にしています。

1. 基本の読みやすいリスト

まずは、行間と余白だけを整える基本形です。本文中の箇条書きに向いています。

<ul class="list-basic">
  <li>文章を短く区切る</li>
  <li>同じ種類の情報を並べる</li>
  <li>読みやすい余白を入れる</li>
</ul>
.list-basic {
  padding-left: 1.4em;
  line-height: 1.9;
}

.list-basic li + li {
  margin-top: 6px;
}

迷ったら、この形から始めると失敗しにくいです。

2. チェックマークのリスト

メリット、対応内容、完了条件などにはチェックリストが合います。

<ul class="list-check">
  <li>スマホでも読みやすい</li>
  <li>コピペで使いやすい</li>
  <li>色を変更しやすい</li>
</ul>
.list-check {
  padding: 0;
  list-style: none;
}

.list-check li {
  position: relative;
  padding-left: 30px;
  line-height: 1.8;
}

.list-check li + li {
  margin-top: 10px;
}

.list-check li::before {
  position: absolute;
  top: 0;
  left: 0;
  color: #16a34a;
  font-weight: 700;
  content: "✓";
}

list-style: none; で標準の点を消し、::before でチェックを追加します。

3. 丸アイコンのチェックリスト

チェックマークを丸の中に入れると、サービス紹介や機能一覧で目立ちます。

<ul class="list-check-circle">
  <li>初期設定を済ませる</li>
  <li>必要な項目を入力する</li>
  <li>公開前に表示を確認する</li>
</ul>
.list-check-circle {
  padding: 0;
  list-style: none;
}

.list-check-circle li {
  position: relative;
  padding-left: 38px;
  line-height: 1.8;
}

.list-check-circle li + li {
  margin-top: 12px;
}

.list-check-circle li::before {
  position: absolute;
  top: 4px;
  left: 0;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  content: "✓";
  background: #2563eb;
  border-radius: 50%;
}

アイコンの高さがずれる場合は、top の値を少し調整します。

4. 矢印アイコンのリスト

リンク一覧や「次に読む項目」には矢印のリストが使いやすいです。

<ul class="list-arrow">
  <li><a href="#">料金プランを見る</a></li>
  <li><a href="#">導入事例を見る</a></li>
  <li><a href="#">よくある質問を見る</a></li>
</ul>
.list-arrow {
  padding: 0;
  list-style: none;
}

.list-arrow li + li {
  margin-top: 10px;
}

.list-arrow a {
  position: relative;
  display: inline-block;
  padding-left: 20px;
  color: #1d4ed8;
  text-decoration: none;
}

.list-arrow a::before {
  position: absolute;
  left: 0;
  content: "›";
}

.list-arrow a:hover {
  text-decoration: underline;
}

リンクのリストでは、ホバー時に下線を出すとクリックできることが伝わりやすくなります。

5. 下線区切りのリスト

ニュース、更新履歴、お知らせのように、項目ごとに区切りたい場合の形です。

<ul class="list-border">
  <li>2026.07.08 新しい記事を公開しました</li>
  <li>2026.07.01 CSS記事を更新しました</li>
  <li>2026.06.25 サンプルを追加しました</li>
</ul>
.list-border {
  padding: 0;
  border-top: 1px solid #e5e7eb;
  list-style: none;
}

.list-border li {
  padding: 14px 0;
  line-height: 1.7;
  border-bottom: 1px solid #e5e7eb;
}

余白を上下に入れるだけで、一覧として読みやすくなります。

6. 背景つきのカードリスト

注意点やポイントを、少し目立たせたいときのリストです。

<ul class="list-card">
  <li>余白を詰めすぎない</li>
  <li>色を増やしすぎない</li>
  <li>スマホ表示も確認する</li>
</ul>
.list-card {
  display: grid;
  gap: 12px;
  padding: 0;
  list-style: none;
}

.list-card li {
  padding: 16px;
  line-height: 1.7;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}

カードをもっと作り込みたい場合は、CSSカードデザイン集 も参考にしてください。

7. 番号付きの基本ステップリスト

手順を説明するときは、意味としても ol を使うのが自然です。

<ol class="list-step-basic">
  <li>HTMLを書く</li>
  <li>CSSを追加する</li>
  <li>ブラウザで確認する</li>
</ol>
.list-step-basic {
  padding-left: 1.4em;
  line-height: 1.8;
}

.list-step-basic li + li {
  margin-top: 10px;
}

数字の装飾が不要なら、標準の番号を活かすだけでも十分読みやすくできます。

8. 丸番号のステップリスト

番号を丸く装飾すると、作業手順や登録フローに使いやすくなります。

<ol class="list-step-circle">
  <li>アカウントを作成する</li>
  <li>プロフィールを入力する</li>
  <li>公開ボタンを押す</li>
</ol>
.list-step-circle {
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.list-step-circle li {
  position: relative;
  padding-left: 44px;
  line-height: 1.8;
}

.list-step-circle li + li {
  margin-top: 14px;
}

.list-step-circle li::before {
  position: absolute;
  top: 2px;
  left: 0;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  content: counter(step);
  counter-increment: step;
  background: #0f766e;
  border-radius: 50%;
}

counter-reset と counter-increment を使うと、HTMLに番号を書かずに装飾できます。

9. カード型のステップリスト

1ステップごとに説明文を入れたいときは、カード型にすると読みやすいです。

<ol class="list-step-card">
  <li>
    <strong>準備する</strong>
    <span>必要な素材と文章をそろえます。</span>
  </li>
  <li>
    <strong>作成する</strong>
    <span>HTMLとCSSを追加します。</span>
  </li>
  <li>
    <strong>確認する</strong>
    <span>スマホとPCで表示を確認します。</span>
  </li>
</ol>
.list-step-card {
  display: grid;
  gap: 14px;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.list-step-card li {
  position: relative;
  padding: 18px 18px 18px 64px;
  background: #fff;
  border: 1px solid #dbeafe;
  border-radius: 8px;
}

.list-step-card li::before {
  position: absolute;
  top: 18px;
  left: 18px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  color: #1d4ed8;
  font-weight: 700;
  content: counter(step);
  counter-increment: step;
  background: #dbeafe;
  border-radius: 50%;
}

.list-step-card strong,
.list-step-card span {
  display: block;
}

.list-step-card span {
  margin-top: 4px;
  color: #64748b;
  line-height: 1.7;
}

タイトルと説明文を分けると、手順の意味がすぐ伝わります。

10. 横並びタグリスト

カテゴリ、タグ、使用技術などを並べるときの定番です。

<ul class="list-tags">
  <li>HTML</li>
  <li>CSS</li>
  <li>WordPress</li>
  <li>SEO</li>
</ul>
.list-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  list-style: none;
}

.list-tags li {
  padding: 5px 12px;
  color: #334155;
  font-size: 14px;
  background: #f1f5f9;
  border-radius: 9999px;
}

バッジやラベルの種類を増やしたい場合は、CSSバッジ・ラベル・タグデザイン集 に分けると記事同士の重複を避けられます。

11. 横並びメニューリスト

ヘッダーやフッターのメニューは、ul を横並びにして作ることが多いです。

<ul class="list-menu">
  <li><a href="#">ホーム</a></li>
  <li><a href="#">サービス</a></li>
  <li><a href="#">会社情報</a></li>
  <li><a href="#">お問い合わせ</a></li>
</ul>
.list-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  padding: 0;
  list-style: none;
}

.list-menu a {
  color: #111827;
  font-weight: 700;
  text-decoration: none;
}

.list-menu a:hover {
  color: #2563eb;
}

本格的なヘッダーは、CSSヘッダーデザイン集 で扱うとよいです。

12. 2列に並べるリスト

特徴や対応範囲が多いときは、PCで2列にすると視線移動が少なくなります。

<ul class="list-two-column">
  <li>トップページ制作</li>
  <li>下層ページ制作</li>
  <li>フォーム設置</li>
  <li>スマホ対応</li>
  <li>表示速度改善</li>
  <li>更新サポート</li>
</ul>
.list-two-column {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 24px;
  padding-left: 1.2em;
  line-height: 1.7;
}

@media (max-width: 600px) {
  .list-two-column {
    grid-template-columns: 1fr;
  }
}

列数を変えたい場合は、CSS Gridの記事に分けて深掘りできます。

13. タイムライン風リスト

制作の流れ、経歴、更新履歴などは、縦線を入れると時系列に見えます。

<ol class="list-timeline">
  <li>
    <span>STEP 1</span>
    <strong>お問い合わせ</strong>
  </li>
  <li>
    <span>STEP 2</span>
    <strong>ヒアリング</strong>
  </li>
  <li>
    <span>STEP 3</span>
    <strong>ご提案</strong>
  </li>
</ol>
.list-timeline {
  position: relative;
  padding: 0 0 0 28px;
  list-style: none;
}

.list-timeline::before {
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 7px;
  width: 2px;
  content: "";
  background: #cbd5e1;
}

.list-timeline li {
  position: relative;
  padding-bottom: 22px;
}

.list-timeline li::before {
  position: absolute;
  top: 6px;
  left: -28px;
  width: 16px;
  height: 16px;
  content: "";
  background: #2563eb;
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px #2563eb;
}

.list-timeline span {
  display: block;
  color: #2563eb;
  font-size: 12px;
  font-weight: 700;
}

.list-timeline strong {
  display: block;
  margin-top: 3px;
}

縦線と点は疑似要素で作るため、HTMLはシンプルに保てます。

14. ランキングリスト

人気記事、売れ筋商品、よく読まれているページにはランキング形式が便利です。

<ol class="list-ranking">
  <li><a href="#">CSSボタンデザイン集</a></li>
  <li><a href="#">CSSカードデザイン集</a></li>
  <li><a href="#">CSS見出しデザイン集</a></li>
</ol>
.list-ranking {
  padding: 0;
  list-style: none;
  counter-reset: ranking;
}

.list-ranking li {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #e5e7eb;
}

.list-ranking li::before {
  display: grid;
  flex: 0 0 30px;
  place-items: center;
  width: 30px;
  height: 30px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  content: counter(ranking);
  counter-increment: ranking;
  background: #f59e0b;
  border-radius: 50%;
}

.list-ranking a {
  color: #111827;
  text-decoration: none;
}

順位をHTMLに直書きしないので、並び替えたときも番号の修正が不要です。

15. FAQ風のリスト

短いQ&Aを並べるだけなら、リストでも十分表現できます。

<ul class="list-faq">
  <li>
    <span>Q</span>
    <div>
      <strong>CSSだけで使えますか？</strong>
      <p>はい。JavaScriptなしで使える見た目です。</p>
    </div>
  </li>
  <li>
    <span>Q</span>
    <div>
      <strong>色は変えられますか？</strong>
      <p>背景色と文字色を変更すれば調整できます。</p>
    </div>
  </li>
</ul>
.list-faq {
  display: grid;
  gap: 14px;
  padding: 0;
  list-style: none;
}

.list-faq li {
  display: flex;
  gap: 12px;
  padding: 16px;
  background: #f9fafb;
  border-radius: 8px;
}

.list-faq span {
  display: grid;
  flex: 0 0 28px;
  place-items: center;
  width: 28px;
  height: 28px;
  color: #fff;
  font-weight: 700;
  background: #111827;
  border-radius: 50%;
}

.list-faq strong {
  display: block;
}

.list-faq p {
  margin: 6px 0 0;
  color: #64748b;
  line-height: 1.7;
}

開閉式のFAQにしたい場合は、別記事でアコーディオンとして扱うと検索意図が分かれます。

16. 定義リスト風の情報リスト

会社情報、商品情報、プロフィールなどには dl も使えます。

<dl class="list-definition">
  <div>
    <dt>営業時間</dt>
    <dd>10:00 - 18:00</dd>
  </div>
  <div>
    <dt>定休日</dt>
    <dd>土日祝</dd>
  </div>
  <div>
    <dt>所在地</dt>
    <dd>東京都渋谷区</dd>
  </div>
</dl>
.list-definition {
  margin: 0;
  border-top: 1px solid #e5e7eb;
}

.list-definition div {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid #e5e7eb;
}

.list-definition dt {
  font-weight: 700;
}

.list-definition dd {
  margin: 0;
  color: #475569;
}

@media (max-width: 600px) {
  .list-definition div {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

「項目名」と「内容」の組み合わせには、ul より dl が合うことがあります。

17. 階層が見やすい入れ子リスト

カテゴリの中に小項目がある場合は、入れ子リストの余白を整えます。

<ul class="list-nested">
  <li>HTML
    <ul>
      <li>タグの使い分け</li>
      <li>見出し構造</li>
    </ul>
  </li>
  <li>CSS
    <ul>
      <li>レイアウト</li>
      <li>装飾</li>
    </ul>
  </li>
</ul>
.list-nested {
  padding-left: 1.2em;
  line-height: 1.8;
}

.list-nested > li + li {
  margin-top: 12px;
}

.list-nested ul {
  margin-top: 6px;
  padding-left: 1.4em;
  color: #64748b;
}

.list-nested ul li + li {
  margin-top: 4px;
}

入れ子が深すぎると読みにくくなるため、2階層程度に抑えるのがおすすめです。

18. ::marker で点だけ変えるリスト

標準の箇条書きを残したまま、点や番号の色だけ変える方法です。

<ul class="list-marker">
  <li>HTMLの意味を保てる</li>
  <li>CSSが短く済む</li>
  <li>本文のリストに使いやすい</li>
</ul>
.list-marker {
  padding-left: 1.4em;
  line-height: 1.8;
}

.list-marker li + li {
  margin-top: 8px;
}

.list-marker li::marker {
  color: #2563eb;
  font-size: 1.2em;
}

大きく装飾したい場合は ::before、点や番号だけ変えたい場合は ::marker が手軽です。

19. 注意書きリスト

禁止事項や注意点を並べる場合は、背景色を薄く入れると伝わりやすくなります。

<ul class="list-caution">
  <li>重要な情報を色だけで伝えない</li>
  <li>文字サイズを小さくしすぎない</li>
  <li>スマホで折り返しを確認する</li>
</ul>
.list-caution {
  display: grid;
  gap: 10px;
  padding: 16px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 8px;
  list-style: none;
}

.list-caution li {
  position: relative;
  padding-left: 28px;
  line-height: 1.7;
}

.list-caution li::before {
  position: absolute;
  left: 0;
  color: #ea580c;
  font-weight: 700;
  content: "!";
}

注意書きは目立たせすぎると読みにくいので、背景は薄めの色にします。

20. CSS変数で色を変えやすいリスト

複数ページで使い回すなら、色や余白をCSS変数にしておくと管理しやすいです。

<ul class="list-variable">
  <li>色をまとめて変更できる</li>
  <li>サイト全体で使い回しやすい</li>
  <li>修正漏れを減らせる</li>
</ul>
.list-variable {
  --list-color: #7c3aed;
  --list-bg: #f5f3ff;
  --list-gap: 10px;

  display: grid;
  gap: var(--list-gap);
  padding: 0;
  list-style: none;
}

.list-variable li {
  position: relative;
  padding: 12px 14px 12px 42px;
  line-height: 1.7;
  background: var(--list-bg);
  border-radius: 8px;
}

.list-variable li::before {
  position: absolute;
  top: 14px;
  left: 16px;
  color: var(--list-color);
  font-weight: 700;
  content: "•";
}

色だけ変えたいときは、--list-color と --list-bg を変更します。

リストデザインで失敗しやすいポイント

  • 文章が長いのに行間が狭く、読みづらくなる
  • ul や ol の意味がある場所で div だけにしてしまう
  • list-style: none; を指定したあと、代わりの目印を入れ忘れる
  • 横並びリストで flex-wrap を入れず、スマホで崩れる
  • アイコンや番号をHTMLに直書きしすぎて、あとから修正しにくくなる

どのリストを選ぶとよいか

  • 本文中の箇条書きには、基本リストや ::marker のリスト
  • メリットや対応内容には、チェックリスト
  • 手順には、番号付きリストやステップカード
  • タグやカテゴリには、横並びタグリスト
  • 時系列には、タイムラインリスト
  • 人気順や順位には、ランキングリスト

まとめ

CSSリストデザインは、まず ul、ol、dl の意味を選び、その上で見た目を整えるのが大切です。

「点だけ変える」「チェックを付ける」「番号を装飾する」「カード化する」「横並びにする」のパターンを持っておくと、ほとんどのリストに対応できます。

RELATED

あわせて読みたい記事