• RSS

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

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

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

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

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行目の頭を行揃えすることができます。

  1. 2行目に折り返すような長いテキスト2行目に折り返すような長いテキスト2行目に折り返すような長いテキスト2行目に折り返すような長いテキスト
  2. リスト2
  3. リスト3
  4. リスト4
  5. リスト5



  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください