リスト「ol」で途中からスタートさせる方法

,

34 views

順序付きリスト「ol」を使って番号をふり分ける場合、みなさんはどうやって番号を割り振っていますか?
擬似要素?start属性?それ以外?

擬似要素を使う方法

自分は今までは、下記のようにHTMLを記述し、

擬似要素で指定して、

ブラウザ表示

  1. 1番目
  2. 2番目
  3. 3番目

このように番号をふっていました。

しかし、今からご紹介する方法でわりふった方が楽だ!と思いましたので、
その方法をいまからご紹介していこうと思います。

start属性を使う

ブラウザ表示

  1. 1番目
  2. 2番目
  3. 3番目

start属性を使うと、擬似用など使わず簡単に番号を割り振ることができます。
しかも、startの値を「6」などにすると、6から番号が割り振られるという、
とても便利な属性です。

番号順を逆にする

reversed属性を使うと順番を逆にできます。

ブラウザ表示

  1. 1番目
  2. 2番目
  3. 3番目

CSSのcounter-incrementを使って割り振る方法

counter-incrementというのは、自動で連番をつけるCSSコードになります。

ブラウザ表示

  1. 1番目
  2. 2番目
  3. 3番目

連番表示させたい部分にcounter-increment:をつけ、
その擬似要素(before)にcontent: counter(place);を指定します。
「place」を指定していますが、文字は任意のもので大丈夫です。

先ほどつけた番号に第◯位と表示させる

先ほどの記述を少しいじって「第◯位」と文字を追加する方法です。
CSSを少しだけいじりました。

ブラウザ表示

  1. 1番目
  2. 2番目
  3. 3番目

擬似要素のcontente: counter(place)の前後に、表示させたい文字を入れます。
必ず””(ダブルクォーテーション)か、”(シングルクォーテーション)で括ります。
そうしないと記述でのエラーはでないのですが、表示がされません。

HTMLクリックリファレンスにも乗っているので参考にしてみてください。

まとめ

番号を割り振る方法は擬似要素以外でもたくさんあります。
自分は擬似要素しか知らなかったので、こんな方法があったとは!と驚きです。