こんにちは！フロントエンドの世界へようこそ。
HTMLでリスト（`
- `や`
- イメージ： 教室の出席簿のチェック欄。名前の左側にチェックボックスがあるような状態ですね。
- 特徴： テキストが2行目以降に折り返されたとき、マーカーの下には文字が回り込みません。テキストは最初から「マーカーの幅分」だけ右にずれて表示されます。
- イメージ： 本文の中に紛れ込んだアイコン。まるで文字の一部であるかのように、テキストと一緒に「ボックスの内側」に同居します。
- 特徴： テキストが2行目以降に折り返されると、なんとマーカーの真下まで文字が入り込んできます。
- outside: マーカーがボックスの外に出ます。2行目になっても左端は揃います。
- inside: マーカーがボックスの中に潜り込みます。2行目になるとマーカーの下に文字が回り込みます。
- `outside`の場合：`padding-left`を削ると、マーカーは「ボックスの外」へ突き飛ばされ、画面外へ消えてしまうことがあります。
- `inside`の場合：マーカーがボックスの一部なので、`padding`を削ると素直に左に寄りますが、テキストとマーカーが重なりやすくなります。
- `）を書いているとき、「あれ？この黒い点（マーカー）のせいで、文字のインデントが思ったように決まらないな…」と、モヤモヤしたことはありませんか？
実は、リストのマーカーというのはCSSの`list-style-position`というプロパティ一つで、その性格がガラリと変わるんです。今日は、このちょっと気難しい「マーカーくん」の扱い方を、身近な例えを交えて紐解いていきましょう。
—
マーカーの居場所は「外」か「内」か？
`list-style-position`には、大きく分けて`outside`と`inside`という2つの設定があります。
1. `outside`：お行儀よく「外」に座るマーカー
デフォルト（初期設定）がこれです。マーカーは、リストの中身（テキスト）の左側、ボックスの外にちょこんと浮いています。
2. `inside`：中身と仲良く「内」に収まるマーカー
こちらを指定すると、マーカーはリストのテキストの「一部」として扱われます。
—
実際にコードで違いを見てみよう
百聞は一見に如かず。実際にCSSを書いて動きを確認してみましょう。
/ 外側に配置（デフォルト） /
.list-outside {
list-style-position: outside;
background-color: #f0f8ff; / 領域を見やすくするために色をつけています /
padding-left: 30px; / マーカーがはみ出さないように余白を確保 /
}
/ 内側に配置 /
.list-inside {
list-style-position: inside;
background-color: #fff0f5;
}
—
なぜ「インデント調整」でつまづくのか？
初学者の皆さんが一番悩むのは、「リストの左側の余白を消したいのに、マーカーが消えてしまったり、逆に余白が残ったりする！」というケースではないでしょうか。
これは、「マーカーはボックスモデルのpaddingの内側には存在できない」というルールが原因です。
解決のヒント：自分でマーカーを作っちゃう！
現場のプロがよくやるのは、`list-style`をあえて`none`にして消し、`::before`疑似要素を使って自分でアイコンや装飾を配置する方法です。
「えっ、わざわざそんな面倒なことを？」と思うかもしれませんが、これなら余白もデザインも1ピクセル単位でコントロールできるので、実は一番の近道だったりします。
ul.custom-list {
list-style: none; / 標準のマーカーを消す /
padding-left: 0;
}
ul.custom-list li {
padding-left: 20px;
position: relative;
}
/ 自分でマーカーを描く /
ul.custom-list li::before {
content: “★”;
position: absolute;
left: 0;
color: #ff9900;
}
—
最後に：つまずくのは「理解している証拠」です
CSSのレイアウトは、最初は本当にパズルみたいで難しいですよね。「なぜそこに空間が空くの？」「なぜはみ出るの？」とイライラすることもあると思います。でも、それはあなたが「要素の境界線を意識できている」という、スペシャリストへの第一歩を踏み出している証拠です。
まずは`outside`と`inside`を切り替えて、ブラウザの検証ツール（デベロッパーツール）で青やオレンジの領域（ボックスモデル）がどう動くか眺めてみてください。
「あ、君はそこにいたのか！」とマーカーの正体が分かれば、もう怖いものはありませんよ。また何かあれば、いつでも聞きに来てくださいね。応援しています！
コメント