正しいリストの記述方法

(x)htmlで深い階層があるリストを記述する際は上位の階層のli要素内にul要素を記述します。

<ul>
	<li>
		大カテゴリー
		<ul>
			<li>中カテゴリー</li>
		</ul>
	</li>
</ul>

さらに深い階層構造のリストを作成する場合は上階層の対応するli要素内に記述していく形になります。
サンプル

子孫セレクタを使用すればすべての要素に対してCSSを適用させる事は可能ですので各階層のul要素にclassやidを振る必要はありません。

また階層が深まるにつれli要素内のlist-style-typeプロパティが●(disc)→○(circle)→■(square)→■(square)...と変化していくのでCSSコーディングを始める前に、正しく記述できているかにリストプロパティの変化で確認することができます。

スポンサードリンク

«WordPress始めました。 | メイン | インスタントストア(TM) ベータ版»