Help us understand the problem. What is going on with this article?

CSSで連番をつける方法

Web制作をしているなかで、こんな風に連番をつけたいときってないですか?

counter-increment_1.png

よく採用の流れ・業務の流れ等ででてくるかなと思います。
いままでは、普通にhtmlやcssに直接数字を書いていたんですが、CSSに便利なものがありました。

counter-incrementの使い方

今回使うcssのプロパティはcounter-incrementと言うものです。
まずは、htmlを準備します。今回は、リストを作成するのでulタグliタグを使用します

index.html
  <ul>
    <li>タイトル</li>
    <li>タイトル</li>
    <li>タイトル</li>
    <li>タイトル</li>
    <li>タイトル</li>
  </ul>

次に、連番をつけるために必要なCSSプロパティを付与します。

style.scss
ul{
  list-style: none;
  li{
    counter-increment: test;
    &::before{
      content: counter(test);
    }
  }
}

counter-increment:testは連番表示をさせるための繰り返しの要素にcontent:counter(test)は連番表示をさせたい要素のbefore要素に。
ここまででどのように表示されるかをみてみます。

See the Pen counter-increment練習1 by TakahiroOkada (@okalog) on CodePen.

では、さらにみやすくCSSを当てていきます。

See the Pen counter-increment完成 by TakahiroOkada (@okalog) on CodePen.

このように、数字を直接書かなくても連番表記ができるようになりました。
一桁の数字指定ぐらいであればめんどくさくないかもしれませんが、ちょっと便利なCSSですね。
わたしも、案件で使おうとしたんですが、結局画像でいいよーって話になったので使用はしませんでしが、覚えておくとどっかで役に立つかもしれません。

OKALOG_info
知多半島でWebフリーランスをしています。 勉強の毎日です。
http://okalog.info/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away