数字型リストマーカー (箇条書き)

＜目次＞

数字型リストマーカー

今日は以下のような数字型の箇条書きをマークアップする際の備忘録です。

●見出し
   1. テキストテキストテキスト

●見出し
   2. テキストテキストテキスト
   3. テキストテキストテキスト

上記のように、

• 数字型リストマーカーによる箇条書き、連番
• 連番、途中番号の開始あり

を実現するには、以下のようにマークアップします。

標準的な数字タイプ (decimal)

[html]

<p>●見出し</p>
<ol class="decimal">
	<li>テキストテキストテキスト</li>
</ol>
<p>●見出し</p>
<ol class="decimal">
	<li value="2">テキストテキストテキスト</li>
	<li>テキストテキストテキスト</li>
</ol>

※ value="途中開始する任意の数字を設定"

[css]

.decimal {
	　list-style-type:  decimal;
	 }

Demo

ちなみに、他にも、以下のような表現ができますでの併せてご紹介しておきます。
※list-style-typeのパラメータ次第で、いろいろなバリエーションが可能ですね。

2桁数字タイプ(decimal-leading-zero)

[html]

<p>●見出し</p>
<ol class="decimal-leading-zero">
	<li>テキストテキストテキスト</li>
</ol>
<p>●見出し</p>
<ol class="decimal-leading-zero">
	<li value="2">テキストテキストテキスト</li>
	<li>テキストテキストテキスト</li>
</ol>

[css]

.decimal-leading-zero {
	list-style-type:  decimal-leading-zero;
	}

Demo (2桁数字型)

ローマ数字[小文字] タイプ(lower-roman)

[html]

<p>●見出し</p>
<ol class="lower-roman">
	<li>テキストテキストテキスト</li>
</ol>
<p>●見出し</p>
<ol class="lower-roman">
	<li value="2">テキストテキストテキスト</li>
	<li>テキストテキストテキスト</li>
</ol>

[css]

.lower-roman{
	list-style-type:  lower-roman;
	}

Demo(ローマ数字(小文字))

漢数字タイプ (cjk-ideographic)

[html]

<p>●見出し</p>
<ol class="cjk-ideographic">
	<li>テキストテキストテキスト</li>
</ol>
<p>●見出し</p>
<ol class="cjk-ideographic">
	<li value="2">テキストテキストテキスト</li>
	<li>テキストテキストテキスト</li>
</ol>

[css]

.cjk-ideographic {
	list-style-type:  cjk-ideographic;
	}

Demo(漢数字)

【参考サイト】
スタイルシート［CSS］/リスト/マーカーの種類を指定する - TAG index :
http://www.tagindex.com/stylesheet/list/list_style_type.html