【CSS】番号付きリスト「ol」を途中から始めたり並び順を逆にしたりする方法

番号付きリストの「ol」を使う場合、普段は1から順に番号を振ることが多いですが、稀に途中から順番に数字を振りたい場合もありますよね。

例えばランキング圏外のものを10個紹介する際に11～20位を表示させたい、といったケースもあるでしょう。

というわけで、任意の数字から始めるための書き方と、ついでに並び順を逆にする方法もご紹介します。

start属性を使って順番に並べる

簡単なのはこの方法。下記のようにolにstart="11"という具合に始めたい数字を入れるだけです。

<ol start="11">
<li>項目11</li>
<li>項目12</li>
<li>項目13</li>
</ol>

上記のように書くことで、数字は11から始まり、以下順番に番号が振られます。

liにvalue="11"という具合に数字を入れる方法もあります。

<ol>
<li value="11">項目11</li>
<li>項目12</li>
<li>項目13</li>
</ol>

valueを入れた場所から順番に番号が振られるので、途中から番号を振ることもできます。

下記のようにすることで、1,2,3のあとに、11,12,13という具合に並べることができます。

<ol>
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
<li value="11">項目11</li>
<li>項目12</li>
<li>項目13</li>
</ol>

value属性で指定した数字がそのリストに表示されますので、すべて指定することで数字をこっちの都合の良いように決めることもできます。

<ol>
<li value="1">項目1</li>
<li value="3">項目3</li>
<li value="5">項目5</li>
</ol>

start属性との組み合わせで、reversed属性を使うと並び順を逆にすることができます。

<ol reversed start="10">
<li>項目10</li>
<li>項目9</li>
<li>項目8</li>
</ol>

CSSで指定する方法も見つけました。

olのcounter-reset: itemのところに、始めたい数字から1を引いた値を入れてください。

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

[開始値-1]となってるところを[10]とすれば11から順番に数字が振られます。

対応ブラウザはちゃんと調べてないので不安ですが、方法として知っておくといざというときに使えて便利だと思います。

ちなみに、僕は2014年のアクセスランキング記事内で11位～20位のランキングを作るために、今回ご紹介したstart属性の方法を使いました。