こんにちは！フロントエンドの現場で長年CSSと格闘してきたアーキテクトです。
CSSを学び始めたばかりの頃、「リストの『・（黒丸）』や『1. 2. 3.』、これをもっとオシャレに、あるいは自分の好きな色に変えたいのに、なぜかいうことを聞いてくれない！」と頭を抱えたことはありませんか？
実は、リストのマーカーは「ただの文字」ではなく、CSS界隈でも少し扱いが難しい「特殊な存在」なんです。でも大丈夫。そんなモヤモヤを魔法のように解決してくれるのが、`::marker`（マーカー）擬似要素という頼もしい味方です。
今日は、この「マーカーの支配権」を自分に取り戻す方法を、一緒に紐解いていきましょう。
—
マーカーは「リストの影の支配者」？
想像してみてください。あなたは今、レストランのメニュー表を作っています。
`
- `タグでメニューを並べれば、自動的に左側に「・」がつきますよね。この「・」くん、実は普段はCSSの指定をなかなか受け付けてくれない、ちょっと頑固なやつなんです。
- `の中に``を入れて、そこに背景画像を表示したり、無理やり位置をずらしたり……と、現場では結構な力技で乗り切っていました。
しかし、`::marker`を使えば、そんな苦労はもう過去のもの。こいつは、「リストの左端にいるマークだけをピンポイントで指名して、スタイリングする」ための専用コントローラーなんです。
—
早速、コードで遊んでみよう
まずは一番シンプルな例から。黒い丸を、パッと目を引く「お気に入りの色」に変えてみましょう。
どうでしょう？ `
- `全体の色を変えるのではなく、`::marker`を指定することで、「文字は黒いままで、マークだけが赤く大きくなる」という、ちょっとこなれたデザインが簡単に作れるんです。
—
現場で使える「ちょっとした裏技」
`::marker`が本当にすごいのは、ただ色を変えるだけじゃないところです。なんと、マークの内容そのものを書き換えることができるんです！
例えば、「・」の代わりに絵文字を使いたいと思ったことはありませんか？
.my-menu li::marker {
/ contentプロパティで、好きな文字や絵文字を指定可能！ /
content: “☕ “;
}これだけで、メニューの先頭が全部コーヒーカップのアイコンに早変わり。画像ファイルを読み込む必要もなく、CSSだけで軽快に実装できる。これが`::marker`の真骨頂です。
—
知っておいてほしい「注意点」という名の道しるべ
ここまで読んで「もう最強じゃん！」と思ったかもしれませんね。でも、CSSのスペシャリストとして、一つだけ「注意点」をこっそりお伝えしておきます。
`::marker`は、CSSのすべてのプロパティが使えるわけではありません。「色」や「サイズ」、「文字の種類」といったフォントに関連するものは得意ですが、`width`（幅）や`height`（高さ）、`margin`（外側の余白）といった「箱としての形」を変える指定は、残念ながら効かないことが多いんです。
もし「マーカーの余白を細かく調整したい！」という場合は、一度`::marker`を消してから、`::before`擬似要素を使って作り直す……というステップアップが必要になります。でも、そこまでできれば、もうあなたは中級者の入り口に立っていますよ！
—
最後に：小さな「点」へのこだわりが、プロを作る
Webデザインの世界では、「神は細部に宿る」と言います。
たかが黒い点、されど黒い点。その一つひとつに気を配り、自分の思い通りのデザインを表現しようとする姿勢こそが、優れたエンジニアへの第一歩です。`::marker`は、そんなあなたの小さなこだわりを叶えてくれる、とても優しいツールです。まずは今のプロジェクトのリストを、自分好みの色や絵文字に変えるところから始めてみてください。
「あ、CSSってこんなに自由なんだ！」と、きっとワクワクするはずですよ。
もしつまずいたら、いつでもここに戻ってきてくださいね。応援しています！ - `全体の色を変えるのではなく、`::marker`を指定することで、「文字は黒いままで、マークだけが赤く大きくなる」という、ちょっとこなれたデザインが簡単に作れるんです。
これまでは、わざわざ`
コメント