【実務・中級編】list-style-typeの全プロパティとカスタムマーカー – HTML実践ガイド

皆さん、こんにちは！フロントエンド開発の現場で日々奮闘されている皆さん、お疲れ様です。今日のテーマは、Webサイトの見た目を大きく左右する、しかし意外と奥が深い「リストマーカー」のカスタマイズについてです。

デザインカンプ通りにピクセルパーフェクトで実装しようとすると、標準のリストマーカーでは物足りない、あるいはそもそもデザインと合わない…そんな経験、一度や二度ではないはず。かといって、`::before`擬似要素でイチから作るのも手間がかかるし、意味付けが損なわれる懸念もありますよね。

そこで本記事では、HTMLのリスト要素に標準で備わる`list-style-type`プロパティの種類から、モダンCSSで強力なカスタマイズを可能にする`::marker`擬似要素まで、その全貌を深掘りしていきます。ブラウザが裏側でどのようにマーカーを処理しているのか、といった知的好奇心も満たしつつ、明日からすぐに使える実用的なコード例を交えて、頼りがいのあるプロの視点から解説していきます。

さあ、一緒にリストマーカーの秘められた可能性を探求し、よりリッチでセマンティックなUIを実現しましょう！

—

1. `list-style-type`の基本の「き」：標準マーカーを使いこなす

まずは、CSSの`list-style-type`プロパティが提供する、標準的なリストマーカーの種類からおさらいしましょう。これは、特別なCSSテクニックを使わずとも、リストの種類や用途に応じて視覚的な区別をつけるための基本的な手段です。

1-1. 順序なしリスト（` `）のマーカー

/ style.css /
.unordered-list-styles ul {
list-style-type: disc; / デフォルトの塗りつぶされた円 /
}

.unordered-list-styles .circle-list {
list-style-type: circle; / 塗りつぶされていない円 /
}

.unordered-list-styles .square-list {
list-style-type: square; / 塗りつぶされた四角 /
}

.unordered-list-styles .no-marker-list {
list-style-type: none; / マーカーなし（後述のカスタムマーカーと組み合わせる際に重宝します） /
}

順序なしリストのマーカー

デフォルトのマーカー (disc)
項目2

塗りつぶされていない円 (circle)
項目2

塗りつぶされた四角 (square)
項目2

マーカーなし (none)
項目2

1-2. 順序付きリスト（` `）のマーカー

/ style.css /
.ordered-list-styles ol {
list-style-type: decimal; / デフォルトの数字 (1, 2, 3…) /
}

.ordered-list-styles .zero-padded-decimal {
list-style-type: decimal-leading-zero; / 0埋め数字 (01, 02, 03…) /
}

.ordered-list-styles .lower-alpha-list {
list-style-type: lower-alpha; / 小文字のアルファベット (a, b, c…) /
}

.ordered-list-styles .upper-roman-list {
list-style-type: upper-roman; / 大文字のローマ数字 (I, II, III…) /
}

/ その他の代表的な値 /
/
list-style-type: upper-alpha; // 大文字のアルファベット (A, B, C…)
list-style-type: lower-roman; // 小文字のローマ数字 (i, ii, iii…)
list-style-type: hiragana; // ひらがな (あ, い, う…)
list-style-type: katakana; // カタカナ (ア, イ, ウ…)
list-style-type: cjk-ideographic; // 漢字 (一, 二, 三…)
/

順序付きリストのマーカー

デフォルトのマーカー (decimal)
項目2

0埋め数字 (decimal-leading-zero)
項目2
項目3

小文字アルファベット (lower-alpha)
項目2

大文字ローマ数字 (upper-roman)
項目2

1-3. 記述リスト（` `）とマーカー

`、`

`からなる記述リストは、定義リストや用語集などで使用され、通常はマーカーを持ちません。しかし、CSSを工夫すれば、見た目上マーカーのような装飾を施すことも可能です。ただし、これは純粋なリストマーカーの範疇からは外れるため、今回は深掘りせず、必要に応じて`::before`擬似要素などで対応することになります。

1-4. `list-style`ショートハンド

`list-style-type`、`list-style-position`、`list-style-image`の3つのプロパティは、`list-style`というショートハンドプロパティでまとめて指定できます。

/ style.css /
.short-hand-list {
/ type / position / image の順で指定できます。不要なプロパティは省略可能 /
list-style: square inside url(‘path/to/marker-image.png’);
/ 例えば、マーカーの種類だけ指定するなら /
/ list-style: circle; /
}

2. ブラウザの裏側：`::marker`擬似要素が生まれる場所

さて、ここからが本題です。標準の`list-style-type`では表現できない、より複雑なデザイン要件に応えるために登場したのが、CSS `::marker`擬似要素です。しかし、この`::marker`、一体どこに、どのように存在しているのでしょうか？

実は、リストマーカーは、HTMLのDOMツリーとは少し異なる「匿名ボックス (anonymous box)」として生成され、レンダリングされています。ブラウザは`display: list-item`プロパティを持つ要素（主に`

`）に対して、その要素のコンテンツの「外側」にこの匿名ボックスを生成し、そこにマーカーを描画します。

この匿名ボックスは、CSSの仕様において「`::marker`擬似要素」として公開され、我々開発者がスタイルを適用できるようになりました。これはShadow DOMのような形で、DOMツリー上には直接現れないけれども、CSSでアクセスできる特別な領域、とイメージすると分かりやすいでしょう。

リストアイテム

<::marker>・
リストアイテム

この`::marker`擬似要素は、通常の要素とは異なり、適用できるCSSプロパティが限定されています。主に、マーカーの見た目に関わるプロパティ（`color`, `font`, `content`, `text-align`, `white-space`など）が対象となります。ボックスモデルに関わるプロパティ（`width`, `height`, `padding`, `margin`, `border`, `background`など）は基本的に適用できません。これは、マーカーがコンテンツとは独立した、非常にミニマルな目的のために存在しているためです。

この背景を理解することで、なぜ特定のCSSプロパティが`::marker`に効かないのか、といった疑問が解消されるはずです。

3. `::marker`擬似要素による究極のカスタマイズ

`::marker`擬似要素は、リストマーカーの見た目を柔軟に制御するための強力なツールです。従来の`list-style-type`や`list-style-image`では難しかった、文字色、フォントサイズ、さらにはカスタムのテキストや絵文字、カウンターの挿入までが可能になります。

3-1. `::marker`に適用可能な主なプロパティ

`::marker`に適用できる代表的なCSSプロパティは以下の通りです。

`color`: マーカーの色
`font`: マーカーのフォントスタイル（`font-size`, `font-family`, `font-weight`など）
`content`: マーカーとして表示するテキストや絵文字、CSSカウンター
`white-space`: マーカー内の空白の扱い
`text-align`: マーカー内のテキストの水平方向の配置（主にカスタムカウンターで使用）

3-2. 基本的なスタイリング：色とフォントの変更

まずは、最もシンプルなカスタマイズ、色とフォントの変更から見ていきましょう。

/ style.css /
.custom-marker-list li::marker {
color: #007bff; / マーカーの色を青に /
font-size: 1.2em; / マーカーのフォントサイズを大きく /
font-weight: bold; / マーカーを太字に /
font-family: “メイリオ”, Meiryo, sans-serif; / 特定のフォントを指定 /
}

/ 順序付きリストのマーカーの色を変える例 /
.ordered-custom-marker-list li::marker {
color: #28a745; / マーカーの色を緑に /
}

`::marker`による基本的なスタイリング

カスタムマーカーの色とサイズ
項目2
項目3

順序付きリストのマーカーも変更可能
項目2
項目3

ポイント: `list-style-type: disc;` などの値を先に指定しておけば、その形状のマーカーに対してスタイルが適用されます。`list-style-type: none;` としても、`::marker`で`content`プロパティを指定すれば、独自のマーカーを表示できます。

3-3. `content`プロパティを使ったカスタムマーカー

`::marker`の真価を発揮するのが`content`プロパティです。これを使えば、任意のテキスト、絵文字、特殊記号などをマーカーとして表示できます。

3-3-1. テキストや絵文字をマーカーにする

/ style.css /
.emoji-marker-list li::marker {
content: “💡 “; / マーカーを電球の絵文字とスペースに /
color: orange; / 絵文字に色を付ける（絵文字の種類によっては効かないこともあります） /
font-size: 1.2em;
}

.custom-text-marker-list li::marker {
content: “CHECK! “; / マーカーを「CHECK!」というテキストに /
color: #dc3545; / テキストの色を赤に /
font-weight: bold;
}

`content`プロパティでカスタムマーカー

絵文字マーカー
これならデザインの幅が広がりますね！

テキストマーカー
重要なポイントを目立たせたい時に

注意点: `content`プロパティで指定した絵文字や特殊記号の色・フォントは、環境依存や絵文字自体の特性により、CSSが期待通りに適用されない場合があります。

3-3-2. CSSカウンターによる高度な番号付け

順序付きリストの番号付けをより詳細に制御したい場合、CSSカウンターが非常に強力です。`counter-reset`, `counter-increment`, `counter()`関数を組み合わせることで、通常の数字だけでなく、独自のカウント形式や、多階層のリストの番号付けにも対応できます。

/ style.css /
/ ul要素にカウンターをリセットし、名前を ‘section-counter’ とします /
.nested-counter-list {
counter-reset: section-counter;
}

/ 各li要素でカウンターをインクリメント /
.nested-counter-list li {
counter-increment: section-counter;
}

/ li要素のマーカーにカウンターの値を表示 /
.nested-counter-list li::marker {
/ counter()関数でカウンターの値を取得し、最後にピリオドを追加 /
content: counter(section-counter) “. “;
color: purple;
font-weight: bold;
font-size: 1.1em;
}

/ ネストされたリストのカウンター（例としてさらにアルファベットを追加） /
.nested-counter-list ul {
counter-reset: sub-section-counter; / サブカウンターをリセット /
margin-top: 5px; / 見た目の調整 /
margin-bottom: 5px;
}

.nested-counter-list ul li {
counter-increment: sub-section-counter; / サブカウンターをインクリメント /
}

.nested-counter-list ul li::marker {
/ 親カウンターと子カウンターを組み合わせる /
content: counter(section-counter) “.” counter(sub-section-counter, lower-alpha) “. “;
color: darkmagenta;
}

CSSカウンターによるカスタム番号付け

セクション1
- サブセクションa
- サブセクションb
セクション2
- サブセクションa
- サブセクションb
- サブセクションc
セクション3

これは非常に強力なテクニックで、複雑なドキュメントの目次や、ステップバイステップのガイドなどで、デザインとセマンティクスを両立させながら、柔軟な番号付けを実現するのに役立ちます。

3-4. `list-style-image`との使い分け

`list-style-image`プロパティもカスタムマーカーとして画像を指定する際に利用できます。

/ style.css /
.image-marker-list {
/ 画像マーカーを指定。パスは適宜調整してください /
list-style-image: url(‘data:image/svg+xml;utf8,‘);
/ SVGを直接埋め込んでいるため、適宜URLを画像ファイルパスに置き換えてください /
list-style-position: outside; / マーカーの位置 /
}

`list-style-image`による画像マーカー

画像マーカーの例
アイコンを直接指定できます

`list-style-image`と`::marker`の使い分け:

`list-style-image`: シンプルな画像（アイコンなど）をマーカーとして使いたい場合に手軽です。ただし、画像のサイズや位置の調整が難しく、画像の色をCSSで変更することはできません。
`::marker` + `content`: テキスト、絵文字、CSSカウンターなど、画像以外の柔軟なコンテンツをマーカーにしたい場合に最適です。SVGアイコンを`content`プロパティで指定することも技術的には可能ですが、エンコードが必要になり、扱いが複雑になる傾向があります。多くの場合、SVGアイコンをカスタムマーカーにしたい場合は、`::before`擬似要素と`background-image`を組み合わせる方が、CSSでのサイズや位置、色の制御がしやすいため一般的です。

どちらを選ぶかは、要件とメンテナンス性を考慮して判断しましょう。

4. 現場でのベストプラクティスと注意点

リストマーカーのカスタマイズは非常に便利ですが、実務で使う際にはいくつかの注意点とベストプラクティスがあります。

4-1. アクセシビリティへの配慮

リスト要素のセマンティクスは、スクリーンリーダーなどの支援技術にとって非常に重要です。

意味のあるリスト構造: リストは必ず`
4-2. ブラウザ互換性

`::marker`擬似要素は比較的新しいCSSの機能であり、主要なモダンブラウザ（Chrome, Firefox, Safari, Edge）ではサポートされています。しかし、古いInternet Explorerではサポートされていません。もしIE対応が必要なプロジェクトであれば、`::marker`の使用は避け、`::before`擬似要素を用いたカスタムマーカー手法に切り替えるか、フォールバック（代替）のスタイルを検討する必要があります。
- IE対策:
/ IEでは::markerは効かないため、従来の::beforeで代替 /
.my-list li {
list-style: none; / デフォルトのマーカーを非表示 /
position: relative;
padding-left: 20px; / マーカー分のスペースを確保 /
}
.my-list li::before {
content: “▶”; / カスタムマーカー /
color: #007bff;
position: absolute;
left: 0;
top: 0; / 必要に応じて調整 /
}

/ モダンブラウザ向けに::markerを適用 /
@supports selector(::marker) {
.my-list li::before {
content: none; / ::markerが使えるなら::beforeは非表示に /
}
.my-list li::marker {
content: “▶”;
color: #007bff;
}
}

`@supports`ルールを活用することで、モダンブラウザとレガシーブラウザで異なるCSSを適用できます。

4-3. パフォーマンスと画像マーカー

`list-style-image`で画像を使う場合、画像の読み込みが発生します。多数のリストアイテムがある場合や、アイコンの種類が多い場合は、CSSスプライトやSVGアイコンを活用することで、HTTPリクエスト数を減らし、パフォーマンスを向上させることができます。

`::marker`で絵文字やCSSカウンターを使う場合は、画像読み込みが発生しないため、この点で有利です。

5. まとめ：リストマーカーを制する者は、UIを制す！

今回の記事では、HTMLリストの標準マーカーから始まり、ブラウザが裏側でどのようにマーカーを生成しているのか、そして`::marker`擬似要素を使った高度なカスタマイズ手法まで、幅広く解説してきました。
- `list-style-type`: 基本的なマーカーの選択に。
- `::marker`: マーカーの色、フォント、`content`によるテキスト・絵文字・CSSカウンターの挿入など、きめ細やかなスタイリングに。ブラウザの内部的な挙動を理解することで、より深いレベルでのコントロールが可能になります。
- CSSカウンター: 多階層リストや複雑な番号付けの要件に。
- `list-style-image`: シンプルな画像アイコンの手軽な適用に。
デザインの要求は日々高まっており、細部にわたる表現力が求められます。リストマーカーのような小さな要素も、ユーザー体験やブランドイメージを左右する重要なパーツです。標準の機能で解決できないからと安易に`div`で代用したり、`::before`で無理やり実装したりするのではなく、`::marker`という強力な武器を使いこなすことで、よりセマンティックで、メンテナンス性の高いコードを書くことができるようになります。

今日学んだ知識とテクニックが、皆さんの日々の開発業務の一助となれば幸いです。これからも一緒に、より良いフロントエンドの世界を築いていきましょう！