小粋空間  -  a cheap joke and a play on words site

ol要素のstart属性を使わずにCSSで番号を途中から振る方法

ol要素のstart属性を使わずに、CSSで番号を途中から振る方法を紹介します。

番号付きリストで「第10位以降のランキング」など、途中から番号を振るケースは少なくないと思いますので、ご活用頂ければ幸いです。

１．基本

ol要素を使えば番号付きリストを作成できます。

HTML

<ol>
  <li>あああ</li>
  <li>いいい</li>
  <li>ううう</li>
</ol>

実行結果

1. あああ
2. いいい
3. ううう

ol要素にstart属性を使えば、番号を途中から割り振ることもできます。

例えば、次のようにstart属性に「5」を設定すれば、番号付きリストを「5」から開始することができます。

HTML

<ol start="5">
  <li>あああ</li>
  <li>いいい</li>
  <li>ううう</li>
</ol>

実行結果

5. あああ
6. いいい
7. ううう

ただし、このstart属性はHTMLあるいはXHTML仕様で非推奨あるいは廃止となっているので、できればというか、start属性は使いたくないところです。
追記：HTML5では非推奨でなくなっています（HTML4.01は非推奨）。失礼致しました。

２．ol要素のstart属性を使わずに番号を途中から振る

ol要素のstart属性を使わずに番号を途中から振るには、CSSのcounter-reset/counter-incrementプロパティを利用します。

プロパティの基本的な使い方については改めて紹介したいと思いますので、ここではstart属性の代替案のみ掲載しておきます。

HTML

<ol>
  <li>あああ</li>
  <li>いいい</li>
  <li>ううう</li>
</ol>

CSS

ol {
    counter-reset: item [開始値-1];
}
li {
    display: block;
}
li:before {
    content: counter(item) ". ";
    counter-increment: item;
}

実行結果は以下のサンプルをどうぞ。

表示サンプル

次のように、[開始値-1] の部分に「4」を設定すれば、１項のサンプルで「start="5"」をつけたものと同じ振舞いになります。

ol {
    counter-reset: item 4;
}
…後略…

３．他の要素を使って途中から番号を割り振る

counter-reset/counter-incrementプロパティは他の要素で利用することもできます。

以下はh3要素に番号を割り振ったときのサンプルです。

CSS

.top {
  counter-reset: section 4;
}
h3 {
  counter-increment: section;
}
h3:before {
  content: counter(section) ". ";
}

HTML

<h3 class="top">あああ</h3>
<h3>いいい</h3>
<h3>ううう</h3>

こちらもサンプルを用意しました。「いきなりh3はおかしい」というツッコミはなしで（笑）。

表示サンプル

counter-resetプロパティの「4」を削除すれば「1」から開始します。

４．対応ブラウザ

Firefox/Google Chrome/Safari/Opera/IE8以降で動作することを確認しています。