こんにちは！
ジーニアスウェブのスギタです。
今月から平日３日の短時間だけですが、
いつもより１時間早く起きてランニングをしています。
朝活って時間を有効に使えて良いものだなぁと、気づきはじめた今日この頃です。
さて、皆さんはコーディングをする際
連番をつけたい時があると思いますが
どのようにコードを書いていますか？
手入力で、１、２、３・・・ってHTMLに記述されていますか？
そんなことしてたら、その項目が増えたり減ったりすると
その度にイチイチ書き換えないといけないですよね。
とっても面倒ですよね。
そこで便利な、CSSのcounter-increment。
こちらを使用すれば、簡単に自動で連番をつけることが出来ますので
その方法を今回はご紹介いたします。
１、タイトルに連番をつけてみよう
まずは、下記のような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
２、タイトルに「第●回目」をつけてみよう
１でご紹介しましたものにほんの少しだけ記述を追加し、
「第●回目」など、連番+固定される文字を合わせる方法をやってみましょう。
HTMLは先ほど使用したものと同じものを使用します。
CSSもほぼ同じです。先ほどと違う箇所は下記となります。
ul li h2::before {
content: "第"counter(title)"回目";
}
counter(title)の前後に、固定される文字を入れます。
その際は、必ず""（ダブルクォーテーション）もしくは、''（シングルクォーテーション）で括ります。
結果はこちらです。
See the Pen counter-increment-02 by ジーニアスウェブ (@genius-web) on CodePen.0
３、タイトルとその中の項目の両方に連番をつけてみよう
先ほどのものから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の書き方については、基本的に１、２と同様です。
今回はdtとddの両方に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を記述。
今回の場合は、「第●回目」を境に「内容●.」の連番をリセットさせたいので、
下記のようにdtにcounter-resetを記述します。
dt {
counter-reset: list;
}
すると、項目ごとに連番が増えるようになりました！
See the Pen counter-increment-03 by ジーニアスウェブ (@genius-web) on CodePen.0
さいごに
いかがでしたでしょうか？
今回ご紹介したcounter-incrementは、
連番がついた要素を削除しても追加しても
勝手に数字が変わってくれるので、個人的にニヤリとなるCSSのひとつです。
ぜひ使ってみてくださいね。
それでは、また。
