スポンサード

稀に ol によるリストで丸数字を使う場合があるので備忘録としてまとめました。

ol li の list-style は none で消しておいて、替わりに ① や ② などの「丸数字」を表示させる方法です。

ol の リストで「丸数字」を表示させるサンプル

li タグ内に ① ②…と丸数字も合わせて書いていき、丸数字は <span> タグで囲ってあげます。

<style>
ol	{
	position: relative;
	margin:0;
	padding:0
}

ol li  {
	list-style: none;
	list-style-position:outside;
	margin:0;
	padding-left:1.25em
}
ol li span {
	position: absolute;
	left:0;
	margin:0
}

/*IE6*/
*html ol li span  {
	left: -1.25em;
}
</style>

<ol>
	<li><span>&#9312;</span>リスト1</li>
	<li><span>&#9313;</span>リスト2</li>
	<li><span>&#9314;</span>リスト3</li>
	<li><span>&#9315;</span>リスト4</li>
	<li><span>&#9316;</span>リスト5</li>
	<li><span>&#9317;</span>リスト6</li>
	<li><span>&#9318;</span>リスト7</li>
	<li><span>&#9319;</span>リスト8</li>
	<li><span>&#9320;</span>リスト9</li>
	<li><span>&#9321;</span>リスト10</li>
	<li><span>&#9322;</span>リスト11</li>
	<li><span>&#12881;</span>リスト21</li>
</ol>

ol li は list-style:none にしています。

あと、span に対して position: absolute; left:0 で丸数字を左に位置固定した分、「リスト1」などのテキストには padding-left:1.25em で左側に余白を設けています。これにより、各リストの2行目の頭を行揃えすることができます。

スポンサード