入れ子のリスト

前回のリストの基本は理解できたんですが、もっと複雑な情報を整理したい場合はどうすればいいんですか？例えば、大項目の中に小項目があるような…

それが「入れ子のリスト」と呼ばれる技術だね。リストの中にさらにリストを作ることで、階層構造を表現できるんだ。目次や組織図のような複雑な情報も、きれいに整理できるよ。

入れ子って、箱の中に小さな箱が入っているような感じですか？

そうそう！まさにその通りだね。大きな箱の中に小さな箱が入っているように、HTMLでは<li>の中に新しい<ul>や<ol>を入れることで階層構造を作るんだ。

入れ子リストの基本

入れ子のリストは、通常のリスト項目（<li>）の中に、新しいリスト（<ul>や<ol>）を配置することで作成します。これにより、情報を階層的に整理できます。

基本構造のポイントと作成ルール

入れ子リストを正しく作成するための重要なポイントと実装ルールを理解しましょう。

基本構造のポイント

作成ルール

これらのポイントやルールを守ることで、ブラウザが正しく階層構造を認識し、適切なインデントで表示されます。

入れ子リストを試してみよう

以下のエディターで入れ子リストの基本的な書き方を試してみてください。

様々な入れ子パターン

パターン1：番号付きリストの入れ子

手順の中に詳細な手順がある場合は、<ol>の入れ子が効果的です。

パターン2：異なるリストタイプの組み合わせ

大分類は番号付き、詳細は箇条書きという使い分けも可能です。

パターン3：深い階層構造

3段階以上の深い階層も作成できますが、読みやすさを考慮して適度な深さに留めることが重要です。

分かりやすい「入れ子リスト」を作る3つの原則

入れ子リストは便利ですが、ただ深くするだけでは逆に分かりにくくなります。 読み手にとって親切なリストを作るには、以下の3つの原則を意識するのが大切です。

原則1：論理的な階層にする

親子関係が直感的に分かるように、関連性の高い項目をグループ化しましょう。「大分類 → 中分類 → 小分類」のように、大きなテーマから具体的な項目へと掘り下げていくのが基本です。

原則2：階層を深くしすぎない

階層が深くなりすぎると、ユーザーは自分がどこにいるのか分からなくなってしまいます。多くのWebサイトでは、3階層までを一つの目安にしています。

原則3：同じ階層のレベルを揃える

同じ階層には、同じレベル感の項目を並べましょう。例えば、「具体的な商品名」と「抽象的なカテゴリ名」が同じ階層に混ざっていると、構造が歪んで見えます。

3つの原則は分かったんですが、実際にWebサイトで入れ子リストを作る時って、他にも気をつけることがあるんですか？

実は、ユーザーの立場になって考えることが一番重要なんだ。例えば「5秒ルール」って知ってる？ページを見て5秒以内に構造が理解できるかどうかを確認するんだよ。

5秒ルール！それは確かに大事そうですね。他にもコツがあるんですか？

そうだなぁ。スマホでも見やすいかチェックしたり、情報が増えた時に構造が破綻していないか定期的に見直したりすることも大切かな。

あと、身近な人に「これ分かりやすい？」って聞いてみるのもいいよ。完璧な構造を最初から作ろうとせず、少しずつ改善していくのがポイントなんだ！

理解度チェッククイズ

入れ子リストの作成方法と設計原則を理解できたか、クイズで確認してみましょう。

<ul>
<li>親項目1
  <ul>
    <li>子項目1</li>
    <li>子項目2</li>
  </ul>
</li>
<li>親項目2</li>
</ul>

<ol>
<li>手順1
  <ul>
    <li>詳細A</li>
    <li>詳細B</li>
  </ul>
</li>
<li>手順2</li>
</ol>

<ul>
<li>フルーツ
  <ul>
    <li>りんご</li>
    <li>価格が安い順</li>
    <li>みかん</li>
  </ul>
</li>
</ul>

まとめ

入れ子リストって、情報を整理するのにすごく便利ですね！目次とか、商品カテゴリとかに使えそう。

3段階までって制限があるのも納得です。確かにあまり深いと、どこにいるのか分からなくなりそう。

そうだね！入れ子リストは強力なツールだけど、使いすぎは禁物。ユーザーのことを考えて、分かりやすい構造を心がけることが一番大切だ。次は、用語と説明をセットで表現する「定義リスト」について学んでいこう。