こんにちは！Web制作の世界へようこそ。
HTMLを学び始めると必ず出会うのが「リスト（箇条書き）」ですよね。`
- `で囲んで、`
- `を並べて……。最初はただの黒い丸（●）が表示されるだけで十分満足していたはずなのに、いざデザインをこだわろうとすると、「この黒い丸、もっと可愛くできないかな？」「お店のロゴマークをマーカーにしたいな」という欲が出てくるものです。
今日は、そんな時にぶつかる「リストマーカーのカスタマイズ」という壁を、一緒に楽しく乗り越えていきましょう。
—
1. まずは「list-style-image」で手軽に挑戦！
CSSには、リストの黒丸を画像に変えるための専用プロパティ `list-style-image` が用意されています。まずはこれを使ってみましょう。
ul {
/ リストのマーカーを画像にする魔法の命令 /
list-style-image: url(‘icon-star.png’);
}「お、簡単じゃん！」と思いますよね。でも、実際にやってみると……「あれ、画像の高さとテキストの行間がうまく合わない……」「余白が調整できなくて、画像が勝手にどこかへ飛んでいく！」なんて経験、しませんでしたか？
そうなんです。`list-style-image` は、実はとても「わがまま」なプロパティ。ブラウザによって表示位置が微妙にズレたり、画像自体の大きさや位置を微調整することがほとんどできないんです。まさに「一度配置したら、あとはもう触らせてくれない頑固な職人さん」のような存在なんですね。
—
2. なぜ「background-image」が最強の選択肢なのか？
そこで、現場のプロがこぞって採用するのが `background-image` を使う裏技です。
これはリストのマーカーとして画像を表示するのではなく、`
- `タグの「背景」として画像を敷き詰め、位置を自由自在に操るというテクニックです。お買い物の流れに例えるなら、「決まった場所から動かせない既製品の飾り」を買うのではなく、「自分で好きな場所にピン留めできる自由なワッペン」を貼るようなイメージです。
どうやってやるの？（実践編）
`list-style-image` を使わず、あえて背景画像として設定してみましょう。こうすることで、CSSの力を使って「上下左右の位置を1ピクセル単位で調整する」ことが可能になります。
li {
/ 元々の黒い丸を消します /
list-style: none;/ 背景画像としてマーカーを設定 /
background-image: url(‘icon-star.png’);/ 画像が繰り返されないようにする /
background-repeat: no-repeat;/ 画像の位置を調整（左端から0px、上下中央に配置） /
background-position: 0 50%;/ 画像のサイズを指定（これで大きすぎ・小さすぎ問題も解決！） /
background-size: 16px 16px;/ テキストが画像と重ならないように、左側に余白を空ける /
padding-left: 25px;
}—
3. 「background-image」が愛される理由
この方法の何がそんなに嬉しいのか、ポイントを整理してみましょう。
- 配置が自由自在： `background-position` で、数ピクセル単位のズレも完璧に修正できます。
- サイズが自由自在： `background-size` が使えるので、どんな画像でも好きな大きさで表示できます。
- ブラウザの機嫌を損ねない： CSSで細かく指定するため、どのブラウザでも「思った通りの位置」に画像がいてくれます。
最初は少しコードが長く感じるかもしれませんが、これこそが「思い通りのデザインを実現する」ための第一歩。一度書いてしまえば、あとはコピー＆ペーストで使い回せるので安心してくださいね。
—
最後に：つまずくのは「こだわっている証拠」です！
「コードが長くなった」「思ったより難しい」と感じた方、大丈夫ですよ。それはあなたが、「より良い表現をしたい」というデザイナーとしての視点を持ち始めている証拠です。
公式マニュアル通りに動かすだけなら簡単ですが、現場のWeb制作では、こうやって小さな不満を「どうすれば解決できるかな？」と工夫して乗り越えていくことが、一番の近道であり、一番楽しいところなんです。
ぜひ、次回の制作ではこの `background-image` を使って、自分だけの素敵なリストを作ってみてください。きっと、昨日よりも少しだけ自信を持ってコードを書けるようになっているはずです。
また分からないことがあったら、いつでも聞きに来てくださいね！応援しています。
コメント