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

「リストの点々」を自由自在に操る！::marker擬似要素でデザインの質を一段階引き上げよう

Webサイトを作っていると、必ずと言っていいほどお世話になるのがリスト（`

実は、あの小さなマーカー。昔は「色を変えるだけで一苦労」だったんです。でも今は違います。`::marker` というCSSの機能を使えば、まるで魔法のように、あのマーカーをあなたの思い通りにデザインできるんです。

今日は、初心者の方でも安心して使えるように、この「マーカーのカスタマイズ」について、優しく紐解いていきましょう！

—

そもそも「マーカー」って何者？

想像してみてください。お買い物の「お買い物リスト」を書くとき、項目ごとにチェックボックスや印をつけますよね。Webにおける `

HTMLが自動的につけてくれるあの「点々」や「数字」。あれは、ブラウザが気を利かせて「これはリストですよ」と教えてくれているサインなんです。この、リスト項目の先頭に自動で表示される目印のことを、専門用語で「マーカー」と呼びます。

::marker を使って「自分らしさ」をプラスしよう

これまで、このマーカーを装飾しようとすると、わざわざ `` タグを中に入れたり、背景画像を使ったりと、少し力技が必要でした。でも、`::marker` 擬似要素を使えば、もっとスマートに解決できます。

基本の使い方

まずは、一番シンプルな書き方を見てみましょう。

/ 箇条書きの丸（●）を赤色にして、少し大きくする例 /
li::marker {
color: #ff5e5e; / マーカーの色を情熱的な赤に /
font-size: 1.5rem; / サイズを少し大きく目立たせる /
}

たったこれだけで、あの無機質だった黒い点が、あなたのサイトのテーマカラーに早変わりです。「えっ、こんなに簡単なの？」と思いませんでしたか？そうなんです、実はとてもシンプルなんです。

—

注意点：何でもできるわけじゃないんです

ここが少しだけ踏ん張りどころです。「じゃあ、`::marker` を使えばどんな形にもできるの？」というと、残念ながら、そうではありません。

実は、`::marker` に使えるCSSプロパティには制限があるんです。具体的には、以下のようなプロパティは基本的に使えません。

`width` や `height`（サイズ指定は `font-size` で調整します）
`background`（背景画像や背景色は乗せられません）
`margin`（余白調整は `padding` や `list-style-position` で工夫します）

「えー、じゃあ自由度が低いじゃない！」と思うかもしれません。でも、考えてみてください。マーカーはあくまで「目印」です。あまりに主張しすぎると、肝心のリストの中身が読みづらくなってしまいますよね。この制限は、ある意味で「使いすぎによるデザインの崩壊」を防ぐための安全装置だと思ってください。

—

実践！絵文字でオリジナリティを出す

`::marker` の一番楽しい使い方は、「絵文字」をマーカーにすることです。これだけで、サイトの雰囲気がグッと親しみやすくなりますよ。

/ 番号付きリスト（ol）の数字を絵文字に変えてみよう /
ol li::marker {
content: “💡 “; / 数字の代わりに電球アイコンを表示 /
font-size: 1.2rem;
}

このように `content` プロパティを使うと、数字を好きな文字や記号に置き換えることができます。「お買い物の手順」なら 🛒、「今日の目標」なら ✅ を使ってみると、ユーザーはパッと見ただけで内容を直感的に理解できるようになります。これぞ、デザインの力です！

—

つまずいた時の処方箋

最後に、初心者の方がよくつまずくポイントを2つだけお伝えしますね。

1. 「あれ、色が変わらない？」と思ったら
もし `::marker` を指定しても色が変わらないときは、親要素（`ul` や `ol`）に `list-style-type` が設定されていないか確認してみてください。ブラウザのデフォルト設定と喧嘩している場合があります。
2. 「余白が気持ち悪い」ときは
マーカーと文章の距離を調整したいときは、`li` タグ自体に `padding-left` を与えてあげると、きれいに整列しますよ。

—

最後に：完璧を目指さなくて大丈夫

Web制作は、最初からすべてを完璧にこなそうとすると疲れてしまいます。まずは今日ご紹介したように、「マーカーの色を変えてみる」「絵文字にしてみる」という小さな一歩から始めてみてください。

ほんの少しの工夫ですが、それを積み重ねることで、あなたの作るWebサイトは、誰かにとっての「使いやすくて、素敵な場所」に変わっていきます。

もし途中でうまくいかなくても、「今日はHTMLの機嫌が悪いのかな？」くらいに思って、また明日、コードを触ってみてくださいね。応援しています！