知ってると便利なHTMLやCSSの紹介コーナー。第2回。

番号付きリスト（<OL>）の入れ子表示

「CSSカウンター」の機能を利用します。詳細は次のサイトなどをご覧ください。

• CSS カウンターの使用 – MDN

まずCSSで入れ子用<OL>クラスを定義し、HTMLで実際にそのクラスを利用します。

<style>
ol.nest {
    counter-reset: mycount;
    list-style-type: none;
}
ol.nest li:before {
    content: counters(mycount, '.') ' ';
    counter-increment: mycount;
}
</style>

<ol class="nest">
<li>はじめに
    <ol class="nest">
	<li>始まる世界</li>
	<li>続く</li>
    </ol>
</li>
<li>次に
    <ol class="nest">
	<li>承前</li>
	<li>終わらない世界</li>
    </ol>
</li>
</ol>

実際に表示すると次のようになります。

1. はじめに
   1. 始まる世界
   2. 続く
2. 次に
   1. 承前
   2. 終わらない世界