「リストのマーカー、まだ `::before` で頑張ってるの？」―― `::marker` 擬似要素でCSSをスマートに解決しよう
こんにちは。フロントエンドの現場で日々CSSのメンテナンスに頭を悩ませている皆さん、お疲れ様です。
リストの装飾といえば、昔からの定番は「`list-style` を消して、`::before` でアイコンを置く」という手法ですよね。僕も若い頃は散々やりました。でも、これって「マーカーの位置調整が面倒」「コンテンツとマーカーの距離感が崩れやすい」「アクセシビリティ面で意図しない読み上げが発生するリスク」といった、地味ながらも確実に工数を食う課題が付きまといます。
そこで今回は、現代CSSの隠れた実力者である `::marker` 擬似要素にスポットを当てます。「今さら聞けない」なんて言わずに、ぜひこの機会に現場の武器としてインストールしてください。
—
なぜ `::marker` なのか：ブラウザの裏側を覗く
まず、ブラウザがリストをどう扱っているかを知る必要があります。`
これまで、この領域を直接いじるCSSのフックはありませんでした。だからこそ、みんな無理やり `::before` で「偽のマーカー」を作って誤魔化してきたわけです。しかし `::marker` は、ブラウザが本来持っているその「マーカーボックス」に対して、CSSで直接スタイルを当てられるようにした正統派の仕様です。
`::marker` の強み：
- レイアウト崩れに強い: マーカーが本来のリストアイテムの一部として管理されるため、テキストの回り込みや改行の挙動が極めて自然です。
- プロパティの限定: `::marker` に使えるプロパティは `color`, `content`, `font-`, `text-combine-upright` など限られています。逆に言えば、「変なスタイルを当ててレイアウトを壊すリスク」が極めて低い、非常に堅牢な設計です。
—
実践：現場で使える「垢抜けた」リスト装飾
百聞は一見にしかず。まずは、コピペしてそのまま使えるモダンなサンプルコードを見てみましょう。
/ リストアイテムの基本設定 /
.custom-list li {
margin-bottom: 0.5rem;
padding-left: 0.5rem;
color: #333;
}
/ ::markerでマーカー部分をスタイリング /
.custom-list li::marker {
/
ここで色を指定するだけで、テキストとマーカーの色を分離可能。
::beforeだとこうはいかない。
/
color: #ff6b6b;
font-weight: bold;
}
/
Contentプロパティを使えば、デフォルトの「点」や「数字」を
絵文字やカスタム記号に差し替えられる。
/
.emoji-list li::marker {
content: “🚀 “; / 好きなアイコンや文字に変更 /
}
/
数字リスト（
- ）にも有効。
- ` に `padding-left` を与えるのが、CSSのアーキテクチャとしては正解です。
2. 読み上げとアクセシビリティ
`::marker` は、スクリーンリーダーに対して非常に賢く振る舞います。例えば `content: “✅ “` と指定した場合、多くのスクリーンリーダーはこれを「チェックマーク」として認識して読み上げを制御してくれます。`::before` で無理やり装飾したものは、時に読み上げ順序が狂ったり、無意味な記号を読み上げたりすることがありますが、`::marker` ならその心配が格段に減ります。
—
まとめ：CSSを「書く」から「操る」へ
`::marker` は、派手なアニメーションを作るような機能ではありません。しかし、こうした「本来あるべき場所に、本来あるべきコードでアプローチする」という姿勢こそが、大規模なプロダクトを長く健全に保つ秘訣です。
「とりあえず `::before` でいいや」という妥協を捨て、「CSSの標準仕様で解決できないか？」と一度立ち止まる。この小さな意識の積み重ねが、あなたのコードを、ひいてはチームのフロントエンド環境を、より堅牢で美しいものに変えていくはずです。
さて、皆さんのプロジェクトのリスト装飾、明日から少しだけ「標準化」してみませんか？それでは、また現場でお会いしましょう。
カウンターと組み合わせれば、より高度な制御も可能。
/
.numbered-list li::marker {
content: counter(list-item) ” ≫ “;
color: #4ecdc4;
}
—
現場で陥りやすい「落とし穴」
中級者レベルのエンジニアが `::marker` を使う際、必ず直面する壁が2つあります。ここを抑えておけば、レビューで「おっ、こいつ分かってるな」と思われるはずです。
1. ボックスモデルの制約
先ほど触れた通り、`::marker` には `margin`, `padding`, `width`, `height` といったボックスモデル関連のプロパティは効きません。
もし「マーカーとテキストの間隔をもっと開けたい！」という要件が来たら、`::marker` をいじるのではなく、親要素である `
コメント