HTMLのリストをネストして使っていると、「階層が深くなるにつれてインデントがズレる」「ブラウザごとに余白の量が違う」「デザイン通りに揃わない」といった問題が起こりがちです。これはCSSの不具合というより、ul・ol が持つデフォルトスタイルと、padding・margin・list-style の関係を正しく理解せずに調整していることが原因です。本記事では、ネストしたリストのインデントが崩れる理由を整理し、実務で安定して整えるための考え方と実装方法を解説します。
ネストしたリストでズレが起きる理由
ul や ol は、ブラウザ標準で左側に padding や margin を持っています。さらに、リストをネストすると、親と子それぞれに同じような余白が重なって適用されるため、階層が深くなるほどインデントが過剰になります。この状態で部分的に padding や margin を調整すると、階層ごとの一貫性が失われ、ズレて見える原因になります。
まずはデフォルトの余白をリセットする
ネストしたリストのインデントを整える第一歩は、ブラウザが持つデフォルトの余白を明示的にリセットすることです。これを行わずに調整を始めると、環境差を吸収できず、再利用しづらいCSSになります。
ul,
ol {
margin: 0;
padding: 0;
}
このリセットにより、すべてのリストが同じ基準点からスタートし、インデントをCSSでコントロールしやすくなります。
インデントはpadding-leftで統一管理する
リストのインデント調整では、margin-left ではなく padding-left を使うのが基本です。padding を使うことで、リストマーカーとテキストの関係を崩さずに階層ごとの余白を設計できます。
ul,
ol {
padding-left: 1.4em;
}
この指定だけでも、ネスト時のズレは大きく軽減されます。重要なのは、すべての階層で同じ基準値を使うことです。
ネスト階層ごとにインデントを制御する
階層構造を視覚的に分かりやすくしたい場合は、ネストされたリストに対して段階的に padding を加算します。セレクタで階層を限定すれば、意図しない影響を防げます。
ul ul,
ol ol {
padding-left: 1.2em;
}
ul ul ul,
ol ol ol {
padding-left: 1.2em;
}
ここでも em 単位を使うことで、フォントサイズが変わってもインデントのバランスが保たれます。
list-style-positionとの関係
list-style-position を inside にすると、マーカーとテキストが同じ行ボックス内に配置され、複数行になった際に折り返し位置が不揃いになります。ネストしたリストでは、この指定が可読性低下の原因になることが多いため、基本は outside のままにしておくほうが安全です。
ul,
ol {
list-style-position: outside;
}
マーカーを自作している場合の注意点
擬似要素でマーカーを自作している場合、padding-left の値とマーカーの幅が一致していないと、ネスト時にテキストが揃いません。この場合は、li 側に十分な padding を持たせ、すべての階層で同じ設計ルールを適用することが重要です。
.list li {
position: relative;
padding-left: 1.6em;
}
このように基準を統一しておくと、ネストが深くなってもレイアウトが破綻しにくくなります。
olとulが混在する場合の考え方
ol と ul が混在するネスト構造では、それぞれの list-style-type の違いによって見た目の幅が変わることがあります。その場合も、インデントは要素ごとに個別調整するのではなく、共通ルールで管理するほうが保守性が高くなります。
レスポンシブ対応での調整
モバイル画面では、深いインデントが可読性を下げる原因になります。そのため、画面幅が狭い場合はネストのインデント量を減らす、あるいはフラットに近づける調整が有効です。
@media (max-width: 600px) {
ul,
ol {
padding-left: 1em;
}
}
まとめ
ネストしたリストのインデントが崩れる原因は、デフォルトスタイルと余白設計を曖昧にしたまま調整していることにあります。最初に margin と padding をリセットし、padding-left を基準に階層構造を設計することで、ブラウザ差やネスト深度に強いリストレイアウトが実現できます。場当たり的な微調整ではなく、ルールを決めて整えることが、実務で破綻しないCSS設計につながります。
