CSSでリストをスタイリングする創造的な方法

ブラウザのデフォルトのリストが実際のデザインに合うことはほとんどありません。ナビゲーションメニュー、ステップバイステップのチュートリアル、製品機能リストなど、どのようなものを構築する場合でも、CSSのリストスタイリングを使用することで、意図的な見た目にすることができます。この記事では、ネイティブのリストプロパティからCSSカウンター、カスタムマーカーまで、アクセシビリティを犠牲にすることなく、最も実用的で標準に基づいたテクニックを紹介します。

適切なHTMLリストタイプから始める

CSSに触れる前に、適切な要素を選択しましょう:

• <ul> — 順序が重要でない順不同リスト(ナビゲーションメニュー、機能リスト)
• <ol> — 順序が意味を持つ順序付きリスト(手順、ランキング)
• <dl> — 用語と定義をペアにする説明リスト(用語集、メタデータ)

ここではセマンティックHTMLが重要です。スクリーンリーダーはリストのタイプとアイテム数を通知するため、ユーザーは1つのアイテムを読む前にコンテキストを理解できます。

list-style-*プロパティ:出発点

list-styleショートハンドは3つのプロパティをまとめます:

ul {
  list-style: square inside none;
  /* list-style-type | list-style-position | list-style-image */
}

**list-style-position**は明確に理解する価値があります:

• outside(デフォルト) — マーカーはマージンに配置され、テキストはきれいに整列されます
• inside — マーカーはテキストと一緒に流れ、複数行のアイテムで折り返しが発生します

list-style-imageは存在しますが制限があります—画像のサイズ変更や再配置ができません。カスタム画像ビュレットには、background-imageを使った::before疑似要素の方がはるかに多くの制御が可能です。

CSS ::markerでネイティブマーカーをスタイリング

::marker疑似要素を使用すると、追加のマークアップなしで、組み込みのビュレットや番号を直接スタイリングできます:

li::marker {
  color: deeppink;
  font-size: 1.2em;
  font-weight: bold;
}

重要な制限: ::markerは特定のCSSプロパティのサブセットのみをサポートします:color、content、font-*、direction、unicode-bidi、white-space、text-combine-upright、およびアニメーション/トランジションプロパティ。display、background、padding、margin、または位置指定は適用できません。完全な要素ではなく、テキストレベルのスタイリングフックとして扱ってください。

::markerのブラウザサポートは現在のブラウザでは良好ですが、対象ブラウザマトリックスを確認してください。通常、ネイティブマーカーのシンプルな色やフォントの変更には最もクリーンなオプションです。

::beforeでカスタムリストビュレット

::markerでは不十分な場合—アイコンスタイルのビュレット、複雑な配置、またはトランジションが必要な場合—代わりに::beforeを使用します:

ul {
  list-style: none;
  padding-left: 0;
}

ul li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

ul li::before {
  content: "✓";
  color: green;
  flex-shrink: 0;
}

アクセシビリティに関する注意: list-style: noneを設定すると、Safari/VoiceOverが要素をリストとして公開しなくなる可能性があります。リストのセマンティクスが意味を持つ場合は、<ul>または<ol>にrole="list"を追加してください。

スタイル付き順序付きリストのためのCSSカウンター

CSSカウンターを使用すると、番号付きリストのフォーマットを完全に制御できます—カスタムプレフィックス、サフィックス、または複数レベルの番号付けを持つスタイル付き順序付きリストに便利です:

ol {
  list-style: none;
  counter-reset: steps;
}

ol li {
  counter-increment: steps;
}

ol li::before {
  content: "Step " counter(steps) ". ";
  font-weight: bold;
  color: #333;
}

ネストされたカウンター

ネストされたリストの場合、counters()(複数形)は完全な階層を出力します:

ol {
  list-style: none;
  counter-reset: steps;
}

ol li {
  counter-increment: steps;
}

ol li::before {
  content: counters(steps, ".") " ";
}
/* 出力: 1, 1.1, 1.2, 2, 2.1 */

counter-incrementプロパティはステップサイズも受け入れます:counter-increment: steps 2は毎回2ずつ増加します。

@counter-styleに関する注意

@counter-styleアットルールを使用すると、完全にカスタムのカウントシステムを定義できます—カスタムシンボル、アルファベット、または循環パターン:

@counter-style thumbs {
  system: cyclic;
  symbols: "👍" "👎";
  suffix: " ";
}

ul {
  list-style-type: thumbs;
}

注意して使用してください。 @counter-styleのブラウザサポートは依然として不完全です—特に、Safariはバージョン17でのみサポートを追加しました。常に対象ブラウザ全体でテストし、グレースフルデグラデーションを確保するために同じ要素にlist-style-typeのフォールバックを定義してください。

適切なアプローチの選択

まとめ

優れたCSSリストスタイリングは、セマンティックHTMLから始まり、その上にビジュアルの改善を重ねます。軽量な色とフォントの変更には::markerを使用し、レイアウト制御が必要な場合は::beforeを使用し、順序付きリストにカスタム番号付けが必要な場合はCSSカウンターを使用します。ARIAを介して復元せずにリストのセマンティクスを削除しないでください。各テクニックには明確なユースケースがあります—複雑にしすぎずに、デザインに合ったものを選択してください。

よくある質問

Truly understand users experience

See every user interaction, feel every frustration and track all hesitations with OpenReplay — the open-source digital experience platform. It can be self-hosted in minutes, giving you complete control over your customer data. . Check our GitHub repo and join the thousands of developers in our community..