閉じる

CSS ::marker疑似要素でリスト装飾を自在に操る！モダンなカスタマイズ手法

広告

ウェブサイトのデザインにおいて、リスト要素は情報を整理して伝えるための重要なコンポーネントです。

従来のCSSでは、リストの先頭に表示される「・」や数字といったマーカーの装飾には多くの制約がありました。

かつてはマーカーの色やサイズを少し変えるだけでも、list-style-type: none;でデフォルトを消去し、::before疑似要素で自作するのが一般的でした。

しかし、現在のモダンなCSS開発においては、::marker疑似要素を活用することで、これらを手軽かつ柔軟にカスタマイズできるようになっています。

2026年現在、主要なブラウザのすべてがこの機能を完全にサポートしており、アクセシビリティを損なうことなく高度なリスト装飾が可能です。

この記事では、::marker疑似要素の基礎から、実戦で役立つ応用テクニック、そしてアクセシビリティへの配慮までを詳しく解説します。

目次 [ close ]
  1. ::marker疑似要素の基本概念とメリット
    1. ::markerで変更可能なプロパティの制限
  2. contentプロパティによるマーカーの置換
    1. SVGや画像をマーカーに使用する方法
  3. カウンタ変数との組み合わせによる高度な番号リスト
  4. アニメーションとホバーエフェクトの活用
  5. 実務で役立つカスタマイズ比較表
  6. アクセシビリティへの配慮と注意点
  7. よくあるトラブル：::markerが効かない原因
  8. まとめ

::marker疑似要素の基本概念とメリット

::markerは、<li>要素や、display: list-item;が指定された要素の先頭にあるマーカーを直接選択するための疑似要素です。

これまでマーカーだけを赤色にしたり、フォントサイズを大きくしたりするには、HTML構造を工夫するか、複雑なCSSを記述する必要がありました。

::markerを使用すれば、HTMLのセマンティクスを維持したまま、CSSだけで直感的にマーカー部分をデザインできます。

また、::before疑似要素による代替手法と比較して、読み上げソフト（スクリーンリーダー）における番号の読み上げミスを防げるという大きなメリットがあります。

まずは、最もシンプルな実装例を見ていきましょう。

CSS
/* リストのマーカーだけを青色にし、サイズを大きくする */
li::marker {
    color: #007bff;
    font-size: 1.5em;
    font-weight: bold;
}
実行結果
・（青色の大きな点）リスト項目1
・（青色の大きな点）リスト項目2

このように、従来のlist-style-typeでは不可能だった細かな調整が、数行のコードで実現可能です。

::markerで変更可能なプロパティの制限

::markerは非常に便利ですが、すべてのCSSプロパティを適用できるわけではありません。

ブラウザのレンダリングパフォーマンスを維持するため、操作可能なプロパティには一定の制限が設けられています。

一般的に、::markerに対して使用できるプロパティは以下の通りです。

  • フォント関連（font-family, font-size, font-weight など）
  • 色関連（color）
  • テキスト装飾（white-space, text-combine-upright, unicode-bidi など）
  • コンテンツ（content）
  • アニメーション・遷移（transition, animation）

一方で、widthやheight、background、margin、paddingといったレイアウトに関するプロパティは原則として機能しませんので注意が必要です。

contentプロパティによるマーカーの置換

::markerの真価を発揮するのは、contentプロパティと組み合わせたときです。

標準の黒丸や数字の代わりに、絵文字、文字列、さらには独自の記号をマーカーとして指定できます。

これにより、アイコンフォントを別途読み込むことなく、手軽に箇条書きを装飾できます。

CSS
/* チェックマークの絵文字をマーカーにする */
.check-list li::marker {
    content: "✔️ ";
    font-size: 1.2rem;
}

/* 任意のテキストをマーカーにする */
.note-list li::marker {
    content: "【重要】";
    color: #d9534f;
}
実行結果
✔️ リスト項目1
✔️ リスト項目2
【重要】リスト項目3

この手法の優れた点は、HTML側で特別なクラスを各項目に振る必要がないことです。

親要素に対してスタイルを定義するだけで、子要素のすべてのマーカーが一括で変更されます。

SVGや画像をマーカーに使用する方法

contentプロパティには画像URLを指定することも可能です。

SVGを指定すれば、拡大してもぼやけない鮮明なカスタムアイコンをリストの先頭に配置できます。

CSS
li.custom-icon::marker {
    content: url('icon-star.svg');
}

ただし、画像を使用する場合はサイズの調整が難しいため、アイコンの大きさが固定されている場合に適しています。

サイズを柔軟に変更したい場合は、次に解説するフォントベースのカスタマイズが推奨されます。

カウンタ変数との組み合わせによる高度な番号リスト

<ol>要素などの番号付きリストでは、CSSのcounter機能を::marker内で活用できます。

これにより、「第1章」「Step 01」といった独自の形式で番号を表示させることが可能になります。

CSS
ol.custom-step {
    counter-reset: my-counter; /* カウンタをリセット */
    list-style-type: none;     /* デフォルトの番号を隠す */
}

ol.custom-step li {
    counter-increment: my-counter; /* カウンタを増加 */
    display: list-item;            /* ::markerを機能させるために必要 */
}

ol.custom-step li::marker {
    content: "Step " counter(my-counter, decimal-leading-zero) ". ";
    color: #2c3e50;
    font-weight: 800;
}
実行結果
Step 01. アカウントを作成する
Step 02. プロフィールを設定する
Step 03. サービスを開始する

このように、counter()関数を使用することで、プログラム的なナンバリングが容易になります。

list-style-typeをnoneにしても、display: list-itemを指定し直せば::markerは有効になるという点は重要なテクニックです。

アニメーションとホバーエフェクトの活用

::markerは、マウスホバーなどのインタラクションにも対応しています。

ユーザーがリスト項目にカーソルを合わせた際、マーカーの色を変えたり、少し動かしたりすることで、視認性を向上させることができます。

CSS
.interactive-list li {
    transition: color 0.3s ease;
    cursor: pointer;
}

.interactive-list li::marker {
    transition: all 0.3s ease;
    color: #ccc;
}

.interactive-list li:hover {
    color: #000;
}

.interactive-list li:hover::marker {
    color: #ff4500;
    font-size: 1.4em;
}

これまで::beforeを使わなければ実装できなかった「マーカーだけのアニメーション」が、非常にシンプルな記述で実現できます。

リッチなユーザーインターフェースを構築する際、こうした細かな動きがサイトのクオリティを大きく左右します。

実務で役立つカスタマイズ比較表

リストの装飾手法には複数のアプローチがあります。

それぞれの特徴を理解し、プロジェクトの要件に最適な方法を選択することが重要です。

手法柔軟性アクセシビリティ実装の容易さ
list-style-type低い最高非常に容易
::marker高い高い容易
::before (代替)非常に高い注意が必要複雑

2026年現在のベストプラクティスとしては、基本的には::markerを使用し、どうしてもレイアウト上の制約（マーカーの背景色指定など）がある場合のみ::beforeを検討するという流れが定着しています。

アクセシビリティへの配慮と注意点

デザインを追求するあまり、ユーザーの利便性を損なわないように注意しなければなりません。

::marker内でcontentを使用して独自の記号を表示する場合、その記号が情報の意味を正しく伝えているかを確認してください。

例えば、意味のあるアイコンをマーカーにする場合、スクリーンリーダーがそれをどう読み上げるかを考慮する必要があります。

幸い、::markerはブラウザのアクセシビリティツリーに正しく統合されているため、標準的な使用範囲であれば問題になることは稀です。

しかし、複雑な文字列をマーカーに含める場合は、音声ブラウザでの挙動を実機で確認することを推奨します。

よくあるトラブル：::markerが効かない原因

実装中に「::markerに指定したスタイルが反映されない」という問題に直面することがあります。

最も多い原因は、要素のdisplayプロパティがlist-item以外になっていることです。

例えば、FlexboxやCSS Gridを使用するためにli { display: flex; }と記述すると、その要素のマーカーは消失し、::markerも機能しなくなります。

この場合、リストの構造を維持するために、liの直下にdivやspanを配置してレイアウトを組むか、マーカーを自作する::before手法へ切り替える必要があります。

また、前述の通り、backgroundやpaddingなど許可されていないプロパティを指定していないかも再確認してください。

まとめ

CSSの::marker疑似要素は、リストデザインの可能性を大きく広げる強力なツールです。

従来の煩雑なコードを削減し、シンプルかつ保守性の高い方法でリストをカスタマイズできる点は、現代のフロントエンド開発において欠かせない知識と言えます。

colorやfont-sizeによる基本的な装飾から、contentやcounter()を駆使した高度な表現まで、幅広く活用してみてください。

HTMLのセマンティクスを守りながら、視覚的にも優れたリストを作成することで、ユーザーにとってより分かりやすいウェブサイトを目指しましょう。

この記事で紹介したテクニックを参考に、あなたのプロジェクトでもモダンなリスト装飾を取り入れてみてください。

URLをコピーしました！