【HTML】リスト『ol』の順番を途中から始める方法（順番を逆にもできる）

2022.8.26
HTML

リストなんですが、3番目から始めるとかってできますか？

できますよー。start属性を使うのが一番簡単ですねー

start属性を使ってみる
value属性を使ってみる
reversed属性で順番を逆に並べる
CSSでもできたりする
さいごに

start属性を使ってみる

これが一番簡単ですね、
『ol』にstart属性をつけて数字を指定するだけです。

See the Pen
【HTML】コメントアウトしたいけど、すでにコメントアウトが中にあるときのコメントアウト方法（頑張ってコメントアウトするなら） by 125naroom (@125naroom)
on CodePen.

コードはこちら

HTML

<ol start="3">
  <li>テキスト</li>
  <li>テキスト</li>
  <li>テキスト</li>
  <li>テキスト</li>
  <li>テキスト</li>
</ol>

value属性を使ってみる

value属性は、『li』に使うことができます。

See the Pen
【HTML】リスト『ol』の順番を途中から始める方法（start属性を使ってみる） by 125naroom (@125naroom)
on CodePen.

コードはこちら

HTML

<ol>
  <li value="3">テキスト</li>
  <li>テキスト</li>
  <li>テキスト</li>
  <li>テキスト</li>
  <li>テキスト</li>
</ol>

<ol>
  <li>テキスト</li>
  <li>テキスト</li>
  <li value="7">テキスト</li>
  <li>テキスト</li>
  <li>テキスト</li>
</ol>

<ol>
  <li value="3">テキスト</li>
  <li value="7">テキスト</li>
  <li value="9">テキスト</li>
  <li>テキスト</li>
  <li>テキスト</li>
</ol>

reversed属性で順番を逆に並べる

『ol』にreversed属性を使うと順番を逆にすることができます。

See the Pen
【HTML】リスト『ol』の順番を途中から始める方法（reversed属性で順番を逆に並べる） by 125naroom (@125naroom)
on CodePen.

コードはこちら

HTML

<ol reversed>
  <li>テキスト</li>
  <li>テキスト</li>
  <li>テキスト</li>
  <li>テキスト</li>
  <li>テキスト</li>
</ol>

<ol reversed start="9">
  <li>テキスト</li>
  <li>テキスト</li>
  <li>テキスト</li>
  <li>テキスト</li>
  <li>テキスト</li>
</ol>

<ol reversed>
  <li value="3">テキスト</li>
  <li value="5">テキスト</li>
  <li value="7">テキスト</li>
  <li>テキスト</li>
  <li>テキスト</li>
</ol>

CSSでもできたりする

うーん、CSSを使うといろいろ手間ですねー。olのcounter-reset: itemに1を引いた値を入れます。3番から始めたい時は2を入れます。で、liはブロック要素にしてインデントの調整。いやー、大変ですがCSSでコントロールすることはできますねー。どんな時に使うのでしょうか。。まだ使ったことはないのですが備忘録ということで。

See the Pen
【HTML】リスト『ol』の順番を途中から始める方法（CSSでもできたりする） by 125naroom (@125naroom)
on CodePen.

コードはこちら

HTML

<ol class="totyuu">
  <li>テキスト</li>
  <li>テキスト</li>
  <li>テキスト</li>
  <li>テキスト</li>
  <li>うーん、CSSを使うといろいろ手間ですねー。olのcounter-reset: itemに1を引いた値を入れます。3番から始めたい時は2を入れます。で、liはブロック要素にしてインデントの調整。いやー、大変ですがCSSでコントロールすることはできますねー。どんな時に使うのでしょうか。。まだ使ったことはないのですが備忘録ということで。</li>
  <li>テキスト</li>
</ol>

CSS

ol.totyuu {
  counter-reset: item 2;
  padding-left: 0;
}
ol.totyuu li {
  display: block;
  text-indent: -1.2em;
  padding-left: 1.2em;
}
ol.totyuu li:before {
  content: counter(item) ". ";
  counter-increment: item;
}