【実務・中級編】::marker擬似要素による高度なマーカー装飾 – HTML実践ガイド

負債を生まないリスト装飾：::marker擬似要素を使いこなす極意

フロントエンドの現場で「リストの装飾」ほど、CSSの歴史と苦闘の跡を感じさせるものはありません。かつては `list-style-image` の貧弱な仕様に泣き、`::before` 擬似要素で無理やりアイコンを配置しては、要素のズレやアクセシビリティの低下に頭を抱えていたものです。

しかし、モダンブラウザの進化とともにやってきた `::marker` 擬似要素は、まさに福音です。今回は、この強力な機能を「ただ使える」レベルから「実務でバグを生まない」レベルへと引き上げるための知見を共有します。

—

::markerの現在地と「制約」という名の武器

`::marker` は、リストアイテム（`

` や `

`）のマーカー部分のみをピンポイントでスタイリングできる擬似要素です。従来の `::before` が「コンテンツ領域に擬似的な要素を挿入する」のに対し、`::marker` は「ブラウザが自動生成するマーカーを直接操作する」という決定的な違いがあります。

制御可能なプロパティは意外と少ない

ここが中級エンジニアが躓くポイントです。`::marker` には全てのCSSが使えるわけではありません。以下のプロパティのみが許容されています。

`font` 関連（`font-size`, `font-weight`, `color` など）
`content`（ここが肝です）
`text-combine-upright`, `unicode-bidi`, `direction`
`animation`, `transition`（一部の環境では挙動に注意）

`padding` や `margin` が効かないことに焦りを感じるかもしれませんが、「マーカーは配置の主導権をブラウザに委ねることで、リストの構造的完全性を保っている」と捉えてください。レイアウトの微調整は `li` 自体の `padding-left` や `list-style-position` で行うのが、CSSの作法というものです。

—

実践：アイコンフォントと連動した「極上リスト」の作り方

現場でよくある「マーカーにブランドカラーのアイコンを置きたい」という要望。これを最も堅牢に実装する方法を紹介します。

/ リスト全体のベーススタイル /
.feature-list {
list-style-type: none; / ブラウザ標準を消す /
padding-left: 1.5rem;
}

/ 個別のアイテムにスタイルを適用 /
.feature-list li {
margin-bottom: 0.8rem;
/ リストのマーカー位置を確保 /
padding-left: 0.5rem;
}

/ ::markerでアイコンを定義 /
.feature-list li::marker {
/ Unicodeやアイコンフォントを指定可能 /
content: “★ “;
color: #ff4757; / ブランドカラーを反映 /
font-size: 1.2rem;
font-weight: bold;
}

なぜこれが「綺麗」なのか

`::before` を使うと、リストアイテム内のテキストが折り返した際、インデントの調整が非常に面倒になります。しかし `::marker` なら、ブラウザがマーカーの位置を管理してくれるため、テキストが複数行になってもマーカーは常に左端の適正な位置に留まり続けます。 これが、メンテナンス性の高いコードを書くための「プロの判断」です。

—

注意すべきブラウザの挙動と「逃げ道」

`::marker` は非常に優秀ですが、まだ完璧ではありません。特にSafariなどのレンダリングエンジンによっては、`content` プロパティに複雑な要素（画像など）を入れようとすると、意図したサイズにならないことがあります。

現場で詰まった時の鉄則

1. 画像を使いたい場合: `list-style-image` が本来の用途ですが、サイズ制御が困難です。どうしても画像がいい場合は、あえて `::marker` を諦め、`li` に `background-image` を当てるか、従来通り `::before` に `display: inline-block` を適用する手法に切り替えましょう。「意固地になってハックを重ねない」のが、シニアエンジニアの嗜みです。
2. アクセシビリティ: スクリーンリーダーは `::marker` の内容を読み上げる場合があります。装飾目的であれば、`content: “”` と空文字列を指定して制御することも可能です。

—

まとめ：正しく使い、正しく諦める

`::marker` は、リスト装飾の「意味論的（セマンティック）な整合性」と「ビジュアルの自由度」を両立させる素晴らしいツールです。

基本は `::marker` で色やフォントを制御する。
レイアウト崩れを防ぐため、配置は `li` の `padding` で行う。
複雑な画像装飾が求められたら、無理に擬似要素を使わず、背景画像への切り替えを検討する。

この切り分けができるようになれば、あなたの書くCSSはぐっと洗練され、後からコードを触るメンバーからも感謝されるはずです。まずは小さな箇条書きから、このスマートな記述に置き換えてみてください。その「小さな差」が、プロダクト全体の品質を底上げするのです。