スポンサーリンク

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

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( カウント名 );

「カウント名」には同じものが入ります。「カウント名」は半角英数字で付けてください。

きらり
きらり

この3つで自動で番号が着くんだね。

結耶
結耶

「li」を増やしていけば「li」の数を数えて番号がつくんだよ。それぞれの意味と使い方を説明するね。

counter-reset

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

counter-reset: カウント名 ;

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

結耶
結耶

これでまたul liのリストを設置しても続きの番号からではなく「1」からカウントされます。

その他の値

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

counter-increment

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

counter-increment;カウント名;

結耶
結耶

もしカウントが進まない場合は、counter-incrementの入れる位置を変えてみてください。

その他の値

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

content:counter()

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

要素:before{ content: counter(カウント名) ; }

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

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

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

content:"第"counter(sample)"位";

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

「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;
}
きらり
きらり

最初のサンプルのCSSと変わらない気がするけど?

結耶
結耶

8行目のcontent部分がちょっと違うだけだねw

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

content:counters(カウント名, “.");

「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で番号を付けることができるので「番号を自分で入れるのが面倒くさい~」なんて思うことがあったら使ってみてください。

応援よろしくお願いします。
      ブログランキング・にほんブログ村へ

お問い合わせはこちら
この記事を書いた人
結耶(ゆうや)

2017年9月からブログを始め、2018年1月にWordPressに変更しました。知識ゼロのから始めた超初心者で、WordPressやHTML、CSSなど勉強したことを書いています。
愛知県在住。多発性硬化症(MS)という難病と闘っています。

登場キャラクター
きらり
きらり

ある日ひょっこり現れ住みついた居候(いそうろう)。今は結耶と一緒にWordPressやアフィリエイトのことを勉強している。
性別は♂ 。どこから来たかは不明。

楽天ROOM