リストは、Webページで情報を整理するための基本的なHTML要素です。
この記事では、CSSを使ってリストを効果的にスタイリングする方法を詳しく解説します。
CSS リスト(ul,ol,li)のスタイリングの基礎を覚えよう。
CSS リスト(ul,ol,li)のスタイリングとは、マーカーの形・位置・余白を整えて、見やすくデザインすることが基本です。応用的なテクニックの前に基本を確認しておきましょう。
基本のリストタイプ: ul, ol, li, dl
HTMLには主に3種類のリストがあります。
順序なしリスト（ul）
HTML
<ul>
<li>アイテム1</li>
<li>アイテム2</li>
<li>アイテム3</li>
</ul>順序付きリスト（ol）
HTML
<ol>
<li>ステップ1</li>
<li>ステップ2</li>
<li>ステップ3</li>
</ol>定義リスト（dl）
HTML
<dl>
<dt>用語</dt>
<dd>定義</dd>
</dl>list-style-type プロパティ
リストマーカーの種類を指定します。
順序なしリストの値
CSS
ul.disc { list-style-type: disc; }/* 黒丸（デフォルト） */
ul.circle { list-style-type: circle; }/* 白丸 */
ul.square { list-style-type: square; }/* 四角 */
ul.none { list-style-type: none; }/* マーカーなし */順序付きリストの値
CSS
ol.decimal { list-style-type: decimal; }/* 1, 2, 3... */
ol.lower-alpha { list-style-type: lower-alpha; }/* a, b, c... */
ol.upper-alpha { list-style-type: upper-alpha; }/* A, B, C... */
ol.lower-roman { list-style-type: lower-roman; }/* i, ii, iii... */
ol.upper-roman { list-style-type: upper-roman; }/* I, II, III... */
ol.lower-greek { list-style-type: lower-greek; }/* α, β, γ... */list-style-position プロパティ
マーカーの位置を制御します。
CSS
/* マーカーがテキストの外側に配置される（デフォルト） */
ul.outside {
list-style-position: outside;
}
/* マーカーがテキスト内に含まれる */
ul.inside {
list-style-position: inside;
}視覚的な違い：
outside: マーカーがコンテンツボックスの外側に表示inside: マーカーがコンテンツボックスの内側に表示され、テキストと同じ行に配置。テキストが長い場合、折り返しがマーカーの下に揃う。
使い分けのポイント：
| シーン | おすすめの指定 | 理由 |
|---|---|---|
| 一般的な文章・ブログ | outside | 読みやすく、整った見た目になる。 |
| 幅の狭い要素（スマホ・サイドバーなど） | inside | インデントを減らせて、スペースを有効に使える。 |
| マーカーをテキストの一部のように扱いたい | inside | マーカーを文章の流れに含めたいときに便利。 |
| デザイン的に行頭をそろえたい | outside | 各行の左端がそろって整然と見える。 |
list-style-image プロパティ：カスタム画像をマーカーとして使用
カスタム画像をマーカーとして使用できます。
CSS
ul.custom {
list-style-image: url('icon.png');
}
/* 画像が読み込めない場合のフォールバック */
ul.custom-safe {
list-style-image: url('icon.png');
list-style-type: disc;
}list-style ショートハンドプロパティ： タイプ＋ポジション＋画像を1行で指定
3つのプロパティを一度に指定できます。
CSS
ul {
/* type position image の順 */
list-style: square inside url('marker.png');
}
/* よく使われるパターン */
ul.no-bullets {
list-style: none;
}実践的なスタイリングテクニック
1. マーカーを完全に削除する
CSS
ul.clean {
list-style: none;
padding-left: 0;
margin: 0;
}2. カスタムマーカーを::before疑似要素で作成
CSS
ul.custom-marker {
list-style: none;
padding-left: 0;
}
ul.custom-marker li {
padding-left: 1.5em;
position: relative;
}
ul.custom-marker li::before {
content: "→";
position: absolute;
left: 0;
color: #007bff;
font-weight: bold;
}3. 絵文字をマーカーとして使用
CSS
ul.emoji-list {
list-style: none;
padding-left: 0;
}
ul.emoji-list li::before {
content: "✓ ";
color: green;
font-weight: bold;
margin-right: 0.5em;
}Resultを押してください。
See the Pen 絵文字をマーカーとして使用 by naoq (@naoq) on CodePen.
4. カウンターを使った高度な番号付け
CSS
ol.custom-counter {
list-style: none;
counter-reset: item;
padding-left: 0;
}
ol.custom-counter li {
counter-increment: item;
padding-left: 2em;
position: relative;
}
ol.custom-counter li::before {
content: counter(item) ".";
position: absolute;
left: 0;
font-weight: bold;
color: #007bff;
}Resultを押してください。
See the Pen リスト：カウンターを使った高度な番号付け by naoq (@naoq) on CodePen.
5. ネストされたリストのスタイリング
CSS
ul {
list-style-type: disc;
}
ul ul {
list-style-type: circle;
}
ul ul ul {
list-style-type: square;
}6. モダンなカードスタイルリスト
CSS
ul.card-list {
list-style: none;
padding: 0;
}
ul.card-list li {
background: #f8f9fa;
border-left: 4px solid #007bff;
padding: 1em;
margin-bottom: 0.5em;
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
ul.card-list li:hover {
background: #e9ecef;
transform: translateX(5px);
transition: all 0.3s ease;
}Resultを押してください。
::marker疑似要素でマーカーをスタイリング
::marker疑似要素は、リストアイテムのマーカー（箇条書きの記号や番号）を直接スタイリングするためのモダンなCSSの機能です。
::beforeを使った方法よりもシンプルで、マーカー専用に設計されています。
基本的な使い方
CSS
ul li::marker {
color: #007bff;
font-size: 1.2em;
}
ol li::marker {
color: #28a745;
font-weight: bold;
}HTML
<ul style="list-style-type: disc;">
<li style="::marker { color: #007bff; font-size: 1.2em; }">青色の大きなマーカー</li>
<li style="::marker { color: #007bff; font-size: 1.2em; }">シンプルに実装可能</li>
</ul>カスタムコンテンツの設定
contentプロパティを使って、マーカーの内容を変更できます。
CSS
ul.check-list li::marker {
content: "✓ ";
color: #28a745;
font-size: 1.3em;
}
ul.arrow-list li::marker {
content: "→ ";
color: #ff6b6b;
}
ol.bracket-list li::marker {
content: "[" counter(list-item) "] ";
color: #6c757d;
font-weight: bold;
}HTML:
HTML
<ul class="check-list">
<li>完了したタスク</li>
<li>確認済み項目</li>
</ul>
<ul class="arrow-list">
<li>次のステップ</li>
<li>進む方向</li>
</ul>
<ol class="bracket-list">
<li>最初の項目</li>
<li>2番目の項目</li>
</ol>使用できるプロパティ
::markerで使用できるプロパティは制限されています：
✅ 使用可能なプロパティ
color– マーカーの色content– マーカーの内容font-*– フォント関連（size, weight, family など）animationとtransition– アニメーションwhite-space– 空白の扱い
❌ 使用できないプロパティ
background– 背景色や画像padding/margin– 余白border– 枠線width/height– サイズ指定- その他多くのレイアウトプロパティ
実践例
1. カラフルな番号付きリスト
CSS
ol.colorful-numbers {
list-style-position: outside;
}
ol.colorful-numbers li::marker {
color: #e91e63;
font-weight: 700;
font-size: 1.4em;
}2. 絵文字マーカー
CSS
ul.emoji-markers li::marker {
content: "🎯 ";
font-size: 1.2em;
}
/* 異なる絵文字を使い分ける */
ul.mixed-emoji li:nth-child(1)::marker { content: "✨ "; }
ul.mixed-emoji li:nth-child(2)::marker { content: "🚀 "; }
ul.mixed-emoji li:nth-child(3)::marker { content: "💡 "; }3. ホバーエフェクト付き
CSS
ul.hover-effect li::marker {
color: #6c757d;
transition: color 0.3s ease;
}
ul.hover-effect li:hover::marker {
color: #007bff;
font-size: 1.2em;
}::markerと::beforeの使い分け
| 特徴 | ::marker | ::before |
|---|---|---|
| シンプルさ | ◎ コードが簡潔 | △ position指定など必要 |
| スタイリング | △ 限定的なプロパティ | ◎ すべてのプロパティ使用可能 |
| レイアウト制御 | ✗ margin/paddingなし | ◎ 完全な制御が可能 |
| セマンティック | ◎ マーカー専用 | △ 汎用的な疑似要素 |
| ブラウザサポート | △ 比較的新しい | ◎ 全ブラウザ対応 |
使い分けのガイドライン
::markerを使う場合：
- マーカーの色やフォントを変更するだけの場合
- シンプルなカスタマイズで十分な場合
- コードをすっきりさせたい場合
::beforeを使う場合：
- 背景色や枠線を付けたい場合
- 複雑なレイアウトが必要な場合
- より細かい位置調整が必要な場合
- 古いブラウザもサポートする必要がある場合
::markerのブラウザサポート
::markerは比較的新しい機能です：
- ✅ Chrome 86+ (2020年10月)
- ✅ Firefox 68+ (2019年7月)
- ✅ Safari 11.1+ (2018年3月)
- ✅ Edge 86+ (2020年10月)
フォールバック例：
CSS
/* 古いブラウザ用のフォールバック */
ul.safe-custom li {
list-style-type: disc;
}
/* ::marker対応ブラウザ用 */
@supports (::marker) {
ul.safe-custom li::marker {
content: "→ ";
color: #007bff;
}
}または、::beforeをフォールバックとして併用：
CSS
/* フォールバック：::before */
ul li::before {
content: "• ";
color: #007bff;
font-weight: bold;
margin-right: 0.5em;
}
/* ::marker対応ブラウザでは::beforeを無効化 */
@supports (::marker) {
ul {
list-style-type: disc;
}
ul li::before {
content: none;
}
ul li::marker {
color: #007bff;
font-size: 1.2em;
}
}アクセシビリティの考慮事項
リストのスタイリングを行う際は、以下の点に注意してください。
list-style: none を使用する場合
- ナビゲーションなど、意味的にリストでない場合に使用
- スクリーンリーダーは依然としてリストとして認識します
十分なコントラスト
カスタムマーカーの色は、背景との十分なコントラストを確保
リストには適切な間隔
リストアイテム間の適切なスペーシングで読みやすさを向上
CSS
ul.accessible {
line-height: 1.6;
}
ul.accessible li {
margin-bottom: 0.5em;
}ブラウザの互換性
基本的なlist-styleプロパティは全てのモダンブラウザでサポートされています。
ただし、以下の点に注意：
list-style-typeの一部の値（例：disclosure-open）は比較的新しい- カスタムカウンタースタイルは、古いブラウザでは制限がある
- 常にフォールバックを用意する
CSS
ul {
list-style-type: "→ ";/* モダンブラウザ */
list-style-type: disc;/* フォールバック */
}まとめ
CSSのリストスタイリングは、基本的なプロパティから高度なカスタマイズまで、幅広い表現が可能です。
キーポイント：
list-style-typeでマーカーの種類を変更list-style-positionでマーカーの配置を制御list-style-imageでカスタム画像を使用::before疑似要素でより柔軟なカスタマイズが可能- アクセシビリティを常に考慮する
適切なリストスタイリングにより、コンテンツの可読性が向上し、ユーザー体験が改善されます。プロジェクトの要件に応じて、これらのテクニックを組み合わせて使用してください。
