techronicle テクロニクル

Webサイト作成に関する情報提供サイトです。WordPress,HTML+CSSなど。

リストの入れ子

2012/02/06 HTML+CSS

リストは入れ子構造にすることができます。

子のリストを入れる場所を間違いやすいので注意してください。

正しい入れ方

子のulが親のliの中に入ります。

<ul>
<li>○○○○</li>
<li>○○○○
<ul>
<li>○○○○</li>
<li>○○○○</li>
<li>○○○○</li>
</ul>
</li>
<li>○○○○</li>
</ul>

よくある間違った入れ方

子のulが親のliの間に位置しています(中に入っていない)。

<ul>
<li>○○○○</li>
<li>○○○○</li>
<ul>
<li>○○○○</li>
<li>○○○○</li>
<li>○○○○</li>
</ul>
<li>○○○○</li>
</ul>