現場で差がつく！`::marker`擬似要素でリストデザインをスマートに完結させる技術
フロントエンド開発の現場で、リストの「あの黒丸（ビュレット）」に頭を悩ませたことはありませんか？
かつては`list-style-type: none`で消し去り、`::before`擬似要素で絶対配置を使ってアイコンを当てる……というのが、我々の「常識」でした。しかし、この手法はレイアウトの崩れや、レスポンシブ対応時の微調整という名の「泥臭い作業」を常に強いてきました。
そんな苦労から私たちを解放してくれるのが、CSSの`::marker`擬似要素です。今回は、この強力かつモダンな仕様について、ブラウザの挙動も含めて深掘りしていきます。
—
なぜ `::marker` が「正解」なのか
ブラウザのレンダリングエンジンにおいて、リストアイテム（`
`::marker`は、この隠されたマーカー部分に直接アクセスできる擬似要素です。従来の`::before`が「リストアイテムの中身」にコンテンツを追加するのに対し、`::marker`は「リストのマーカー専用の枠」を操作します。
最大のメリットは「レイアウトへの干渉がないこと」です。
`::before`で無理やり配置すると、文字の折り返しやパディング設定に気を使う必要がありますが、`::marker`は標準のリストフローに組み込まれたままスタイルだけを書き換えるため、エンジニアが配置計算に頭を悩ませる必要はもうありません。
—
実践：`::marker` を使いこなすためのベストプラクティス
`::marker`は全てのCSSが使えるわけではありません。使えるプロパティは限定的（`color`, `content`, `font`, `text-combine-upright`, `unicode-bidi` など）です。しかし、この制約こそが「リストの見た目を簡潔に保つ」という設計思想の表れでもあります。
コード例：洗練されたモダンリストの構築
以下は、実務でも即戦力となるスタイリング例です。
/ リストのマーカーをカスタマイズする基本形 /
.custom-list li::marker {
/ マーカーの色をブランドカラーに変更 /
color: #3b82f6;
/ フォントサイズやウェイトも調整可能 /
font-weight: bold;
/ 記号そのものを変更することも容易 /
content: ‘▶ ‘;
}
/ 記述リスト（dl）にも応用可能 /
.feature-list dt::marker {
color: #ef4444;
content: ‘■ ‘;
}
- エンジニアファーストな設計思想
- パフォーマンスを意識したDOM構造
- 保守性を高めるCSS設計
—
ブラウザの「裏側」を知る：注意点と回避策
ここで一つ、現場のシニアとしてアドバイスを。`::marker`は非常に便利ですが、「過度な装飾」には向いていません。
例えば、マーカーを完全に消したい、あるいは複雑な背景画像を表示させたいという場合、`::marker`で`content: url(‘icon.svg’)`を使う手法もありますが、実はSVGのサイズ制御がブラウザ間で不安定になることがあります。
- 単一の記号や数字の装飾: `::marker` が最適解。
- 複雑なアイコンや画像: 無理に `::marker` を使わず、従来通り `background-image` を使うか、インラインSVGを `::before` で挿入する方が、クロスブラウザの安定性は高いです。
「何でも `::marker` で解決しようとしない」こと。これも立派な技術選定です。
—
最後に：エンジニアとしての引き出しを増やす
今回紹介した `::marker` は、CSSが単なる「見た目の装飾」から、ブラウザのレンダリング挙動を深く理解した「構造的な制御」へと進化していることを象徴する機能です。
「昔からこうやっていたから」という慣習に甘んじるのではなく、仕様の深部を理解し、より保守的でスマートな実装を選択する。そうした小さな積み重ねが、長期運用されるプロダクトの品質を左右します。
ぜひ次回のプロジェクトで、この `::marker` を活用してみてください。コードが少しだけ軽やかになり、皆さんの開発体験（DX）が向上するはずです。
もし実装で詰まったら、まずはブラウザのインスペクターを開いて、`::marker` がどう計算されているか覗いてみてください。そこには、ブラウザが一生懸命リストを整列させている「エンジニアリングの美学」が見えるはずですよ。
コメント