リストの「見た目」を思い通りに！`list-style`の意外な落とし穴と解決策
こんにちは！フロントエンドの世界へようこそ。
HTMLでリストを作るとき、`
- `や`
- `は真っ先に覚える基本のタグですよね。でも、いざ「マーカーを画像に変えたい」「位置を調整したい」と思った途端、CSSの挙動に「あれ？思った通りにならないぞ…」と戸惑った経験はありませんか？
今回は、そんなリストの「マーカーの謎」を、身近な例え話と一緒に解き明かしていきましょう。大丈夫、ひとつひとつ紐解けば決して難しくありませんよ！
—
1. マーカーを画像に変える：`list-style-image`の魔法
普通の黒丸（disc）じゃ物足りないとき、`list-style-image`を使えば、好きなアイコンや小さな画像をマーカーにすることができます。
やり方はとってもシンプル。CSSで画像を指定するだけです。
ul {
/ リストのマーカーを画像にする /
list-style-image: url(‘star-icon.png’);
}でも、ここでちょっとした「あるある」が。
実は`list-style-image`で指定した画像は、ブラウザによって微調整が効きにくいという弱点があります。位置が微妙にズレたり、画像のサイズ感が変えられなかったり…。現場のプロたちは、この方法よりも「擬似要素（`::before`）」を使ってアイコンを表示させる手法をよく使います。でも、まずは基本として「画像に変えられるんだ！」と覚えておいてくださいね。
—
2. 「inside」と「outside」って結局なに？
ここが一番のつまずきポイントです！`list-style-position`プロパティには、`outside`（初期値）と`inside`という2つの値があります。
これを「お買い物かご」で例えてみましょう。
- outside（外側）：
リストのマーカーは「お買い物かごの外側」にポツンと置かれています。文字が長くなっても、マーカーは常に左端の「外」で待機しています。これが標準のスタイルです。
- inside（内側）：
マーカーが「お買い物かごの中（文字の先頭）」に入り込みます。文字が2行目以降に折り返されたとき、`outside`ならマーカーの下には文字が入りませんが、`inside`だと文字がマーカーの真下まで回り込みます。
視覚的な違いを確認してみよう
- outside: マーカーは文字の外側（左側）に配置されます。
- inside: マーカーが文字の先頭に寄り添い、テキストが折り返されるとマーカーの下にも文字が回り込みます。
.example-outside {
list-style-position: outside; / これが初期値です /
}.example-inside {
list-style-position: inside; / マーカーもテキストの一部のような挙動になります /
}—
3. なぜ「思った通り」にならないの？
多くの初心者が悩むのは、「リストの左側の余白」です。
実は、`list-style-position: outside`のとき、マーカーは要素の外側に「浮いて」いる状態なので、CSSの`padding`や`margin`をいじっても、なかなか思うような位置に動いてくれないことがあります。
「どうすればいいの？」というときの解決策：
1. `list-style: none;` で一度マーカーを消す。
2. `li` に対して `padding-left` で余白を作る。
3. `li::before` を使って、好きな位置にアイコンを配置する。これが、現場で最も安定して崩れにくい「プロの型」です。最初は少し面倒に感じるかもしれませんが、これさえ覚えれば、どんなデザインのリストでも怖くありません！
—
最後に：完璧を目指さなくて大丈夫
HTMLとCSSを学び始めたばかりの頃は、「なぜブラウザによって少しズレるんだろう？」とイライラしてしまうこともあるかもしれません。でも、それはあなたが細かい部分まで気を配れている証拠です。
まずは`outside`と`inside`の違いを実際に触って確認して、「あ、文字が回り込むかどうかでこんなに印象が変わるんだ！」という発見を楽しんでみてください。
もし行き詰まったら、いつでも戻ってきてくださいね。あなたのWeb制作ライフを、これからもずっと応援しています！
コメント