リストマーカーの挙動、制御できていますか？ `list-style-position` が握るレイアウトの鍵
フロントエンドの現場で、意外と「なんとなく」で済ませがちなのがリスト要素のマーカー制御です。CSSで `ul` や `ol` をリセットして独自の装飾を当てることが多い昨今ですが、標準的な `list-style-position` の挙動を深く理解しているかどうかで、複雑なコンポーネントのメンテナンス性は大きく変わります。
今日は、中級エンジニアが避けて通れない「マーカーの配置」と「ボックスモデルの裏側」について、少し踏み込んで解説します。
1. `outside` vs `inside`：境界線の正体
`list-style-position` には `outside`（デフォルト）と `inside` の2種類があります。この違いを単に「マーカーの位置」と捉えるのは少し危険です。
- `outside`: マーカーはリストアイテム（`li`）のボックスの外側に配置されます。言い換えれば、マーカーは `li` のボックスモデルの計算に含まれません。
- `inside`: マーカーはリストアイテムのコンテンツの一部として扱われます。つまり、マーカーは `li` のボックス内に食い込み、テキストと一緒にインラインボックスの一部としてレンダリングされます。
なぜこれが重要なのか？
`outside` の場合、マーカーは要素の `padding-left` の外側に浮いている状態です。そのため、複数行にわたる長いテキストを流し込んだとき、2行目以降はマーカーの下に回り込まず、綺麗に左端で揃います。これが一般的なUIの期待値です。
一方で `inside` にすると、2行目以降のテキストはマーカーの直下（左端）まで回り込んでしまいます。デザインカンプで「2行目以降が左端に揃っていない」というバグに遭遇したとき、多くのエンジニアが `padding` や `margin` で力技の修正を試みますが、その原因の多くはここにあるのです。
2. ブラウザが裏側でやっていること
ブラウザのレンダリングエンジンは、`list-style-position: outside` のとき、リストアイテムの左側に「マーカー専用の領域（::marker 擬似要素）」を確保します。
実は、このマーカー領域を CSS で直接コントロールするのは非常に厄介です。なぜなら、マーカーは親の `li` とは独立したレイアウトコンテキストを持っていることが多いからです。そのため、リスト全体に一律のインデントを適用したい場合、`padding-left` を使うのが定石ですが、ブラウザごとのデフォルトスタイルの差異がこの計算を狂わせます。
3. 実践：現場で使える「綺麗なリスト」の作り方
現場では「マーカーを消して擬似要素で自作する」パターンがほとんどですが、あえて標準のマーカーを活かしつつ、インデントを完璧に制御するパターンを紹介します。
.custom-list {
/ リスト自体の左余白を調整 /
padding-left: 1.5rem;
/ ブラウザのデフォルトの振る舞いを統一 /
list-style-position: outside;
}
.custom-list li {
/ リスト項目同士の間隔を確保 /
margin-bottom: 0.5rem;
/ マーカーとテキストの距離を調整したい場合 /
padding-left: 0.5rem;
}
/
- ポイント：マーカーの色やサイズだけ変えたいなら
- ::marker 擬似要素を使うのが2024年の最適解です。
/
.custom-list li::marker {
color: #3b82f6; / ブランドカラーなどを指定 /
font-weight: bold;
}
コピペで使えるTips
もし、リストのインデントが崩れて困っているなら、まずは以下の CSS をベースにリセットしてみてください。
ul, ol {
/ ブラウザごとのデフォルトpaddingを強制リセット /
padding-left: 0;
/ リスト自体を左端に寄せ、インデントは子要素で管理する /
margin-left: 1.5rem;
list-style-position: outside;
}
li {
/ マーカーとテキストの間の距離を保つ /
padding-left: 0.5rem;
}
最後に：なぜ「標準仕様」にこだわるのか
「全部 `list-style: none` にして、`div` でマークアップすればいいのでは？」という意見もあるでしょう。確かにそれは一つの解決策です。しかし、スクリーンリーダーなどのアクセシビリティツールは、正しく `ul/li` で構造化されたリストを読み取ることで、ユーザーに「ここからリストが始まる」というコンテキストを伝えます。
「見た目」を制御しつつ、「意味」を損なわないこと。
それが、シニアエンジニアに求められる真のフロントエンドスキルです。
`list-style-position` の挙動を掌握し、無駄な `div` のネストを減らして、セマンティックかつ美しいコードを書いていきましょう。また現場で躓きそうなポイントがあれば、いつでも共有してくださいね。
コメント