【CSS】箇条書きリストを入れ子構造にする方法！

2018.09.15 2024.10.07

リストの入れ子構造を作る方法について。

リストは

<ul>
 	<li>リンゴ</li>
 	<li>みかん</li>
 	<li>バナナ</li>
</ul>

<ul>

</ul>

という箇条書きのものだ。

リストの入れ子構造というのは

という感じで、階層が深くなる場合によく使う。

<ul>
　　<li>果物
　　　　<ul>
 	　　<li>リンゴ</li>
 	　　<li>みかん</li>
 	　　<li>バナナ</li>
　　　　</ul>
　　</li>
 　 <li>野菜</li>
</ul>

<ul>

　　<li>果物

　　　　<ul>

　　　　</ul>

　　</li>

</ul>

<ul>のあとは<li>しか取れない。

しかし、<li>の後はまた<ul>を取れるので、上記のようにリストの入れ子構造が出来るのだ。