[CSS]olのリストで①や②などの丸数字を表示させる方法

CSSプロパティ

2013.10.28

olによるリストで丸数字を使う方法をまとめました。

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

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

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

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

<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*/
*htmlolli 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>

<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*/

*htmlolli span {

left: -1.25em;

}

</style>

<ol>

</ol>

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

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