こんにちは！フロントエンドの世界へようこそ。Web制作を始めたばかりの皆さんにとって、HTMLとCSSは最初の大きな壁ですよね。
今日は、リスト（箇条書き）の「あの黒い点」や「数字」を、もっと可愛く、あるいはもっとカッコよく自分好みに変身させる魔法のようなテクニック、`::marker`（マーカー）についてお話しします。
「リストの見た目を変えたいけど、結局 `list-style-image` とかいう難しいやつを使うの？」と悩んでいたあなたも、この記事を読めばもう大丈夫。一緒に見ていきましょう！
—
リストの「黒い点」は、じつは「マーカー」という名前なんです
まずは想像してみてください。スーパーで買い物をする時、手に取る「買い物リスト」を。
「牛乳」「卵」「パン」……。この単語の横についている「・」や「1.」といった記号、これらはリストの一部として非常に重要ですよね。
HTMLで書く `
- `（箇条書き）や `
- まずは準備を整える
- コードを書いてみる
- ブラウザで確認！
- `::marker` はリストの記号だけを狙い撃ちできるCSSの魔法
- 色や大きさ、フォントを変えるのが得意
- 複雑な形を作りたいときは無理せず `::before` も検討しよう
- `（番号付きリスト）の先頭にある記号のことを、CSSの世界では「マーカー」と呼びます。
昔は、このマーカーの色やサイズを個別に変えるのは至難の業でした。しかし、今は `::marker` という擬似要素を使うだけで、驚くほど簡単にカスタマイズできるようになったんです。
さっそく書いてみよう！ `::marker` の基本
まずは、一番シンプルな「色を変える」ことに挑戦してみましょう。
/ ulの中にあるすべてのliのマーカーに対して指示を出します /
ul li::marker {
color: #ff6b6b; / 可愛いピンク色に変えてみました /
font-size: 1.2em; / ちょっと大きくして強調！ /
}
たったこれだけで、あの無機質な黒い点が、あなたのWebサイトの雰囲気に合わせた「こだわりのアイコン」に早変わりします。
実践：番号付きリストをオシャレにしてみる
次は `
- ` で使う数字リストです。「1.」「2.」という数字も、もちろん `::marker` でデザインできます。
.my-list li::marker {
color: #4ecdc4; / 爽やかなミントグリーン /
font-weight: bold; / 数字を太字にして目立たせる /
font-family: ‘Arial’, sans-serif; / フォントもおしゃれに /
}
このように、「リストの本体（テキスト部分）はそのままに、記号だけをいじる」というのが `::marker` の最大の強みです。
注意点：何でもできるわけじゃない？
ここで一つだけ、初心者がつまずきやすいポイントを共有しておきますね。
`::marker` は、CSSのすべてのプロパティが使えるわけではありません。例えば、`width`（幅）や `height`（高さ）、`display`（表示形式）などは使えないんです。
「あれ、思ったように動かないな？」と焦ることもあるかもしれませんが、大丈夫。そんな時は、無理に `::marker` で解決しようとせず、一度 `list-style: none;` でマーカーを消してから、`::before` 擬似要素を使って「アイコンを別途作る」という昔ながらの王道テクニックに切り替えるのが、プロの現場でもよくある選択です。
「全部 `::marker` でやるぞ！」と意気込みすぎず、「色やサイズを変えるなら `::marker` が最高！」くらいの気軽な気持ちで付き合っていくのが、長続きのコツですよ。
まとめ：あなたのリストを「自分色」に
`::marker` を使いこなすと、Webサイトの「読みやすさ」と「世界観」がグッと深まります。
Web制作は、こうした小さな「こだわり」の積み重ねです。まずは今日、あなたのサイトのリストの色を、お気に入りの色に変えるところから始めてみませんか？
「ここをこう変えたら、もっと素敵になるかも！」というワクワク感こそが、一番のスキルアップの近道です。また分からないことがあれば、いつでも聞きに来てくださいね！
コメント