CSSを使って自動で番号(カウント)を付ける方法

2020年10月9日HTML・CSS

今回の記事では「CSSを使って自動で番号(カウントアップ)を付ける方法」を紹介しようと思います。

当サイトでも使用している「目次」で各章のタイトル(見出し)の前に番号がついていますよね。あれはh2やh3の数を数えて自動で連番をつけられています。

あんなのを今回はCSSを使ってやってみようという訳です。

私もいろいろな記事で

と思うことも多いので調べてみたらCSSで思ったより簡単にできたので紹介しようと思います。

CSSを使って自動で番号を付ける方法

• ゴーヤ
• とうがらし
• ピーマン
• 春菊

上はul liのリストです。HTMLは以下の通りです。

<ul>
  <li>ゴーヤ</li>
  <li>とうがらし</li>
  <li>ピーマン</li>
  <li>春菊</li>
</ul>

通常ul liのリストは黒ポチ「・」が表示されます。上記は黒ポチの代わりにCSSで番号つくようにしました。

以下が上記サンプルのCSSです。

ul{
    counter-reset:sample;
    list-style:none;
}

ul li:before{
    counter-increment:sample;
    content:counter(sample);
    margin-right:7px;
}

自動で番号を付けるためのCSSは3つです。

• 2行目 counter-reset: カウント名 ;
• 7行目 counterincrement: カウント名 ;
• 8行目 content:counter( カウント名 );

counter-reset

カウンターを使うには、counter-resetプロパティでカウントをリセット(初期化)する必要があります。

上のサンプルでは「counter-reset:sample;」となっています。つまり「sampleというカウントをリセット」という意味にになります。

その他の値

• none(初期値)リセットしない
• カウント名
  指定したカウント名のカウントをリセット
• カウント名 数字カウント名の後に半角スペースで区切り数字を入れると、指定した数字にリセットされる

counter-increment

counter-incrementはカウントを1つずつ増減させるものです。これを指定しないとカウントされません。

その他の値

• none(初期値)カウントを進めない
• カウント名
  指定したカウント名のカウントを1つずつ進める
• カウント名 数字カウント名の後に半角スペースで区切り数字を入れると、指定した数字分増減する

content:counter()

表示させたい要素にbeforeやafterなどの擬似要素を指定し、「content」プロパティを使い、値に「counter(カウント名)」を指定することで表示されます。

上のサンプルでは「li」にカウント(数字)を表示させているので「li:before」の中にcontent:counter()を入れています。

カウント(数字)の前後に文字を入れる

カウント(数字)の前後に文字を入れることもできます。

「counter(カウント名)」の前後に入れたい文字を「" 」で囲んで入れるとカウント(数字)の前後に文字を入れることができます。

入れ子にする

HTML

<ul>
<li>子供が嫌いな野菜ランキング
 <ul>
    <li>ゴーヤ</li>
    <li>とうがらし</li>
    <li>ピーマン</li>
  </ul>
</li>
<li>大人が嫌いな野菜ランキング
  <ul>
    <li>セロリ</li>
    <li>ゴーヤ</li>
    <li>ケール</li>
  </ul>
</li>
</ul>

CSS

ul{
    counter-reset:sample;
    list-style:none;
}

ul li:before{
    counter-increment:sample;
    content:counters(sample, ".");
    margin-right:7px;
}

子要素にも数字を付ける場合content: counter()を以下のようにすると上のサンプルのようになります。

「counters」と複数形にして、カウント名の後に「. (カンマ)」で区切り子要素の数字に「. (コンマ)」が入るようにしています。

番号のデザインを変えてみよう！

フォントを変える

ul{
   counter-reset:sample;

ul li:before{
    content-increment:sample;
    counter:counter(sample);
    font-family:フォント名;  /*数字のフォント*/
    margin-right:7px;
}

font-familyでフォント名を指定すれば数字のフォントを変えることができます。

四角数字

ul{
   counter-reset:sample;
}

ul li{
    counter-increment:sample;
}

ul li:before{
    content:counter(sample);
    margin-right:7px;
/*以下 四角の設定*/
    display:inline-block;
    width:22px;
    height: 22px;
    height:22px;
    background:darkorange;
    color:white;
    line-height:22px;
    text-align:center;
}

※この場合、上手くカウントされないため、counter-incrementの設定場所を変更しています。

丸数字

ul{
   counter-reset:sample;
}

ul li{
    counter-increment:sample;
}

ul li:before{
    content:counter(sample);
    margin-right:7px;
/*以下 丸の設定*/
    display:inline-block;
    width:22px;
    height: 22px;
    height:22px;
    background:darkorange;
    color:white;
    border-radius:50%;
    line-height:22px;
    text-align:center;
}

※四角数字にborder-radius:50%;を追加すれば丸数字になります。

最後に

今回は「CSSを使って自動で番号を付ける方法」について書いてみました。
今回サンプルにリスト(ul li)を使いましたが、リスト以外にも付けることはできます。

3つのCSSで番号を付けることができるので「番号を自分で入れるのが面倒くさい～」なんて思うことがあったら使ってみてください。