連番リストを作る

連番リストを作る方法を解説します。

通常のリストタグulでリストを作ると項目毎にマークを付けることができますが、olタグを使ったリストを作ると自動的に連番が振られたリストを作ることができます。

<ol>
	<li>リスト</li>
	<li>リスト</li>
	<li>リスト</li>
</ol>

順番を入れ替えるのも簡単にでき改行にも対応できるので連番でリストを作りたいときには便利なタグです。

もし、olタグを使ってリストを作っても連番が表示されない場合は、CSSでliタグがリセットされている可能性があります。その場合はulのliタグのみをリセットするか、olを再設定してください。

ul li{
	list-style: none;
}

ol{
	list-style-type: decimal;
}

またCSSリセットで注意したい点としては、余白をリセットしている場合に連番の位置が左側にずれます。これは通常olタグには左に40pxの内部余白が設けられていますが、この余白がリセットされているためです。この場合もolタグに改めて内部余白をCSSで設けてあげれば解決できます。

ol{
	list-style-type: decimal;
	padding-left: 40px;
}

内部余白は必ずしも40pxである必要はありません。デフォルトでは2桁の連番も想定して大きめに余白を設けていますが、ご自身のデザインに合わせて内部余白を設定してください。