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

こんにちは！Web制作の世界へようこそ。

HTMLでリストを作っているとき、「この項目の下に、さらに細かい項目を並べたいな」と思うこと、ありますよね。例えば、お買い物のメモを作るとき、「野菜」という項目の下に「キャベツ」「人参」と並べたいようなケースです。

これを技術用語で「ネスト（入れ子）」と呼びます。

でも、いざやってみると「あれ？なんだかインデント（左側の余白）が深すぎて変な見た目になっちゃった…」「親のスタイルが子にも引き継がれて崩れてしまう」なんて経験、一度はありませんか？

大丈夫です。これ、初心者が必ずと言っていいほどつまずく「登竜門」のようなもの。今日は、このリストのインデントを自分好みに、そして綺麗に制御する方法を、一緒に紐解いていきましょう！

—

ブラウザには、もともと「リストは左側にこれくらいの余白（パディング）をとるよ！」という初期設定があります。

リストの中にさらにリストを入れると、その「初期設定の余白」が二重、三重に重なってしまうんです。結果として、どんどん右側に押しやられて、ガタガタの見た目になってしまう……これが正体です。

これを解決するコツは、「ブラウザの言いなりにならず、自分たちで余白をリセットする」こと。たったこれだけで、驚くほどスッキリしますよ。

—

まずは、入れ子構造をしっかり作ってみましょう。ポイントは、`li`（リスト項目）の中に、さらに新しい`ul`（リスト）をそっと潜り込ませることです。

ここで大切なのは、「リストの階層を意識したマークアップ」です。`li`の中に`ul`が入るという形を崩さないようにしてくださいね。

—

さあ、ここからが腕の見せ所です！CSSを使って、この重なり合う余白をコントロールします。

重要なのは、`padding-left` を指定して、自分たちが心地よいと思う「深さ」に調整してあげること。そして、デフォルトでついている余白を一度「0」にリセットするのが鉄則です。

/ リストの初期設定を一旦リセットします /
.main-list, .sub-list {
list-style: none; / 点（マーク）を一旦消す /
padding-left: 0; / ブラウザの初期余白を消去 /
}

/ 階層ごとの見た目を整える /
.main-list {
padding-left: 20px; / 親リストの左側余白 /
}

.sub-list {
margin-top: 10px; / 親項目との距離を確保 /
padding-left: 30px; / 子リストのインデントを少し深めにする /
border-left: 2px solid #ccc; / 階層が見えやすいように線を追加 /
}

/ 項目に個性を出す /
.sub-list li {
margin-bottom: 5px;
color: #555;
}

—

CSSの素晴らしいところであり、ときに厄介なのが「継承（親のスタイルが子に伝わること）」です。

もし「ネストしたリストだけ文字サイズを小さくしたい」という場合は、以下のようにセレクタを工夫するだけでOKです。

.main-list { font-size: 16px; }
.sub-list { font-size: 14px; } / 親の影響を受けつつ、上書きができる /

こうして、「親のリストは大きく、その中のリストは少し控えめに」といったメリハリをつけると、デザインの完成度がグッと上がります。

—

Web制作を始めたばかりの頃は、「なぜかコード通りにならない！」と頭を抱えることも多いはず。でも、それはあなたが「どうすれば綺麗に見えるか」を真剣に考えている証拠です。

まずは、`padding-left` を「0」にして、自分の手で余白を足していく……というプロセスを試してみてください。ブラウザのデフォルトに頼らず、自分の手でコントロールできるようになると、Web制作はもっと楽しくなりますよ。

もし崩れてしまっても大丈夫。デベロッパーツール（ブラウザの右クリック→「検証」）を開いて、どこに余白があるのか一つずつチェックしていけば、必ず答えは見つかります。

あなたのコードが、世界中の誰かにとって読みやすいものになりますように。応援しています！