olタグでカッコ数字や丸数字を使う
番号付きの箇条書きは通常olタグを使ってマークアップしますが、入れ子になった場合とかにカッコ数字の番号や丸数字を利用したくなったことは無いでしょうか？僕の場合は往々にしてあります。
なので今回はol liでマークアップした場合カッコ数字や丸数字を表示させます。
ol liのデフォルトスタイルであるdecimalを非表示にしてカッコ数字や丸数字をli内に記述します。そしてspanタグでくくり、CSSで整形して表示すると言う方法です。
ソースコードは次のようになります。
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はハックを使って微調整しています。
1
はじめまして、こんにちわ。
ずっと、括弧つきのリスト表示に悩んでおりました。
tableタグだと、ソースがごちゃごちゃするし…
今回このcssを使ったソースを利用させていただきました。
ソースもすっきりして良かったです。
2
htmlソースがすっきりして良いです！
ずっと括弧付リストをどうにかしたいと思っていたので、
このソース参考にさせていただきます。
DWで開くとレイヤー扱いで少々見づらいですが、それはDWのせいだ！
ってことで。
ありがとうございます。
3
コメントありがとうございます。
olタグを利用して入れ子の数字リストを扱うことって結構多いんですよね。
ローマ数字とかではちょっと…そんな時に使えると思います。
4
position: absoluteを使うとDW上では矩形で囲まれてしまいますからね。
ちょっと触ると位置がずれたり。
コードビューでの作業がおすすめです。