2017.05.26 Fri

CSSのcounter-incrementを使って簡単に自動で連番をつける方法

170526_counter-increment_thum

こんにちは!
ジーニアスウェブのスギタです。

今月から平日3日の短時間だけですが、
いつもより1時間早く起きてランニングをしています。
朝活って時間を有効に使えて良いものだなぁと、気づきはじめた今日この頃です。

さて、皆さんはコーディングをする際
連番をつけたい時があると思いますが
どのようにコードを書いていますか?

手入力で、1、2、3・・・ってHTMLに記述されていますか?
そんなことしてたら、その項目が増えたり減ったりすると
その度にイチイチ書き換えないといけないですよね。
とっても面倒ですよね。

そこで便利な、CSSのcounter-increment
こちらを使用すれば、簡単に自動で連番をつけることが出来ますので
その方法を今回はご紹介いたします。

 

1、タイトルに連番をつけてみよう

まずは、下記のようなHTMLを準備します。

<ul>
  <li>
    <h2>タイトル</h2>
    <p>テキストが入ります。テキストが入ります。</p>
  </li>
  <li>
    <h2>タイトル</h2>
    <p>テキストが入ります。テキストが入ります。</p>
  </li>
  <li>
    <h2>タイトル</h2>
    <p>テキストが入ります。テキストが入ります。</p>
  </li>
</ul>

今回はul,liを使用していますが、どんなタグでもOKです。

CSSは下記のように記述します。

ul li {
  counter-increment: title;
}
ul li h2::before {
  content: counter(title);
}

連番表示をさせるための繰り返しの要素にcounter-increment
そして、連番表示をさせたい要素のbefore要素にcounter(title)を指定します。
今回はtitleを指定していますが任意のものでOKです。

その結果下記のような表示が出来るようになります。

See the Pen counter-increment-01 by ジーニアスウェブ (@genius-web) on CodePen.0

 

2、タイトルに「第●回目」をつけてみよう

1でご紹介しましたものにほんの少しだけ記述を追加し、
「第●回目」など、連番+固定される文字を合わせる方法をやってみましょう。

HTMLは先ほど使用したものと同じものを使用します。
CSSもほぼ同じです。先ほどと違う箇所は下記となります。

ul li h2::before {
  content: "第"counter(title)"回目";
}

counter(title)の前後に、固定される文字を入れます。
その際は、必ず""(ダブルクォーテーション)もしくは、''(シングルクォーテーション)で括ります。

結果はこちらです。

See the Pen counter-increment-02 by ジーニアスウェブ (@genius-web) on CodePen.0

 

3、タイトルとその中の項目の両方に連番をつけてみよう

先ほどのものからHTMLを変更しましたが
こちらも、どんなタグを使用しても問題ありません。

<dl>
    <dt>セミナー</dt>
    <dd>テキストが入ります。テキストが入ります。</dd>
    <dd>テキストが入ります。テキストが入ります。</dd>
    <dt>セミナー</dt>
    <dd>テキストが入ります。テキストが入ります。</dd>
    <dd>テキストが入ります。テキストが入ります。</dd>
    <dd>テキストが入ります。テキストが入ります。</dd>
    <dt>セミナー</dt>
    <dd>テキストが入ります。テキストが入ります。</dd>
    <dd>テキストが入ります。テキストが入ります。</dd>
    <dd>テキストが入ります。テキストが入ります。</dd>
</dl>

CSSの書き方については、基本的に1、2と同様です。
今回はdtddの両方にcounter-incrementを記述しています。

dt {
  counter-increment: title;
}
dt::before {
  content: "第"counter(title)"回目";
}
dd {
  counter-increment: list;
}
dd::before {
  content: "└ 内容"counter(list) ". ";
}

これでうまくいくかと思いきや・・・

このままの記述で進めると、
下記のように「内容●.」の連番が全ての項目内で増えていってしまいます。

See the Pen counter-increment-04 by ジーニアスウェブ (@genius-web) on CodePen.0

それを回避するのがcounter-resetというもの。
こちらを、連番をリセットしたい要素にcounter-resetを記述。
今回の場合は、「第●回目」を境に「内容●.」の連番をリセットさせたいので、
下記のようにdtcounter-resetを記述します。

dt {
  counter-reset: list;
}

すると、項目ごとに連番が増えるようになりました!

See the Pen counter-increment-03 by ジーニアスウェブ (@genius-web) on CodePen.0

 

さいごに

いかがでしたでしょうか?
今回ご紹介したcounter-incrementは、
連番がついた要素を削除しても追加しても
勝手に数字が変わってくれるので、個人的にニヤリとなるCSSのひとつです。
ぜひ使ってみてくださいね。

それでは、また。

WRITERこの記事を書いた人

杉田

杉田

大阪オフィスで主にフロントエンドを担当しています。

大阪オフィスで主にフロントエンドを担当しています。

FREE DOWNLOAD

顧客獲得に成功した24社の成功事例を1冊にまとめました。
顧客獲得にお困りの方も、そうでない方も、一度お読みいただくことをお勧めします。

MORE VIEW