【実務・中級編】ネストされたリストのスタイリングとインデント制御 – HTML実践ガイド

「リストのネスト」を制する者は、余白の美学を制する。

フロントエンドの現場で、「リストの中にリストを入れ子にする」という設計に直面したとき、多くのエンジニアが一度は頭を抱えるはずです。「デフォルトのインデントが強すぎてデザインと合わない」「階層ごとに微妙にスタイルを変えたいのに、カスケードの継承で泥沼化する」。

これらは単なるCSSの微調整の話ではありません。ブラウザが裏側でどうDOMを解釈し、スタイルを適用しているかという「ブラウザの素顔」を知ることで、ようやく制御下に置くことができます。今日は、実務で明日から即戦力となる、スマートなリストのスタイリング術を伝授しましょう。

—

なぜブラウザはリストに「勝手な余白」をつけるのか

まず、基本のおさらいです。`

ここで厄介なのが、ネストされたリストも同様にこのスタイルを継承しようとする点です。階層が深くなるたびにどんどん右へ押し出され、最終的にはレイアウトが崩壊する……。これが「リストのネスト問題」の正体です。

これを解決する定石は、「デフォルトをリセットし、独自の変数で制御する」こと。これが保守性の高いコードを書くための唯一の解です。

—

実践：階層を意識した美しいリスト設計

CSS設計において、ネストされたリストを制御する際は `padding-left` を固定値で指定するのではなく、CSS変数（Custom Properties）を使うのが今のトレンドです。これにより、階層ごとのインデント量を一元管理できます。

以下のコードは、コピーしてそのままスタイルシートに貼れば、明日から整ったリストが手に入る構成です。

/ リスト全体の基本設定 /
.nested-list {
–list-indent: 1.5rem; / インデント量を一括管理 /
list-style: none; / ブラウザデフォルトのマーカーを消去 /
padding-left: 0; / 余計な余白をリセット /
}

/ 各階層のリストアイテム /
.nested-list li {
position: relative;
padding-left: var(–list-indent);
margin-bottom: 0.5rem;
}

/ カスタムマーカーの定義（擬似要素を使うのがプロの技） /
.nested-list li::before {
content: ‘■’; / 好きなアイコンや文字に変更可能 /
position: absolute;
left: 0;
color: #333;
font-size: 0.8em;
}

/ ネストされたリストの挙動を制御 /
.nested-list ul,
.nested-list ol {
margin-top: 0.5rem;
/ ここでインデントを継承せず、個別に再定義する /
padding-left: 0;
}

—

なぜこの実装が「現場の正解」なのか？

上記のコードが、ただの「なんとなく」のスタイルと一線を画している理由は3つあります。

1. `list-style: none` の徹底:
デフォルトの `disc` や `decimal` はブラウザごとにレンダリングが微妙に異なります。`::before` 擬似要素で自前実装することで、OSやブラウザ間での「見た目の揺れ」を完全に封じ込めます。
2. `padding-left` の再定義:
ネストされた `ul` に対して `padding-left: 0` を明示することで、親要素からの「勝手な継承」を断ち切っています。これにより、階層が何段になってもレイアウトが崩れず、デザイナーが意図した通りの位置関係を維持できます。
3. CSS変数によるスケーラビリティ:
「デザインレビューでインデントをもう少し広げてほしい」と言われたとき、CSS変数なら1箇所を書き換えるだけでサイト全体に反映されます。修正工数を最小限に抑えるのが、シニアエンジニアの流儀です。

—

` ` の扱いにこそ、職人のこだわりを

今回は `ul/ol` を中心に話しましたが、実は実務で重宝されるのが `

`（記述リスト）です。用語と説明のペアを整理する際に使いますが、これもネストさせると非常に美しい構造になります。

Frontend

ブラウザで動作するUIのこと。

HTML/CSSの構築
JavaScriptによる動的制御

` は単なるリストではなく「関係性」を示すタグです。これをスタイリングする際は、`dt` を太字にし、`dd` に `margin-left` を持たせることで、視覚的な階層構造が明確になります。

まとめ：機械的に書かず、意図を持って書く

リストのネストは、HTMLの構造美そのものです。ブラウザのデフォルトに依存せず、自分たちで制御するスタイルを確立することで、コードは驚くほど堅牢になります。

「なぜこの余白が必要なのか？」「なぜここでリセットするのか？」という問いを常に持ち、意図を持ったコードを書いてください。それができるエンジニアこそが、現場で本当に必要とされる「フロントエンド・スペシャリスト」です。

さて、あなたの次のプロジェクトでは、どのようなリストを実装しますか？