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

【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から始まり、以下順番に番号が振られます。

value属性を使った場合は

順番に並べる

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>

reversed属性で順序を逆にできる

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

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

CSSで番号を振る方法

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属性の方法を使いました。