リストを使う その2

今回は、リストの中にもう一つリストを入れる方法を説明します。

目次

• リストの階層化

リストの階層化

まずは次のリストを見てください。

<ul>
  <li>トヨタ</li>
  <li>日産</li>
</ul>

<ul>〜</ul>で囲んだところが一つのリストになるんでしたよね。リストを使うではお話しませんでしたが、実は<li>〜</li>の中に別の<ul>〜</ul>を入れると、リストの中にリストを入れることができるんです。

<ul>
  <li>トヨタ
    <ul>
      <li>プリウス</li>
      <li>カローラ</li>
    </ul>
  </li>
  <li>日産
    <ul>
      <li>マーチ</li>
      <li>セレナ</li>
    </ul>
  </li>
</ul>

<li>〜</li>の中に<ul>〜</ul>が入っています。こうやってリストを階層化させていくことができます。ul要素のかわりにol要素を使うこともできます。

<ul>
  <li>トヨタ</li>
  <ul>
    <li>プリウス</li>
    <li>カローラ</li>
  </ul>
  <li>日産</li>
  <ul>
    <li>マーチ</li>
    <li>セレナ</li>
  </ul>
</ul>

まとめ

• <li>〜</li>の中に<ul>〜</ul>を入れて、リストを階層化できる

Information