リストは、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を押してください。
アクセシビリティの考慮事項
リストのスタイリングを行う際は、以下の点に注意してください。
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: "→ "; <em>/* モダンブラウザ */</em>
list-style-type: disc; <em>/* フォールバック */</em>
}まとめ
CSSのリストスタイリングは、基本的なプロパティから高度なカスタマイズまで、幅広い表現が可能です。
キーポイント：
list-style-typeでマーカーの種類を変更list-style-positionでマーカーの配置を制御list-style-imageでカスタム画像を使用::before疑似要素でより柔軟なカスタマイズが可能- アクセシビリティを常に考慮する
適切なリストスタイリングにより、コンテンツの可読性が向上し、ユーザー体験が改善されます。プロジェクトの要件に応じて、これらのテクニックを組み合わせて使用してください。
