olタグでカッコ数字や丸数字を使う

番号付きの箇条書きは通常olタグを使ってマークアップしますが、入れ子になった場合とかにカッコ数字の番号や丸数字を利用したくなったことは無いでしょうか？僕の場合は往々にしてあります。

なので今回はol liでマークアップした場合カッコ数字や丸数字を表示させます。

ol liのデフォルトスタイルであるdecimalを非表示にしてカッコ数字や丸数字をli内に記述します。そしてspanタグでくくり、CSSで整形して表示すると言う方法です。

View Demo

ソースコードは次のようになります。

XHTML

<ol class="num1">
<li><span>[1]</span>カッコ数字をリストで使う</li>
<li><span>[2]</span>カッコ数字をリストで使う</li>
<li><span>[3]</span>カッコ数字をリストで使う</li>
</ol>

CSS

/* num1 */
ol.num1 { margin-bottom: 1.4em; margin-left: 2.5em; }
ol.num1 li {
	position: relative;
	list-style: none;
	line-height: 1.4;
	margin-bottom: 0.3em;
}
ol.num1 li span {
	position: absolute;
	top: 0;
	left: -1.7em;
}
* html ol.num1 li span { top: -0.1em; } /* for win ie6 */
*:first-child+html ol.num1 li span { top: -0.1em; } /* for win ie7 */

仕組みはli要素にpostion: relativeを設定して基準点にします。spanタグでカッコ数字をマークアップし、親要素であるli要素に対して絶対配置にするためposition: absoluteを設定します。

IE6やIE7はハックを使って微調整しています。