counter

counterとは？

CSSの「counter（カウンタ）」を使用すると連番などの自動ナンバリングが可能になります。
「1」「2」「3」「4」のような一般的なナンバリングをはじめ、さらには「第1章」「第2章」「第3章」という書き出しをつけることができます。
さまざまな用途に応用が可能な機能です。

CSSカウンタの使い方

「counter-reset」と「counter-increment」をそれぞれ指定します。

「counter-reset」　:　カウントする値を初期化をします。※数字は初期値です。省略をすると「0」になります。

「counter-increment」　:　カウントの増加数をセットします。※「1」をセットすると「1」ずつ増加することになります。

「content　:　counter(number)」　: 表示形式を指定します。例では、自動ナンバリングの後ろに” “で半角スペースをひとつセットしています。

counter-resetに設定する値は任意で命名できます。
※複数カウンタを使うときは被らないよう注意しましょう。

実際にHTMLコードを書いてブラウザで表示してみます。

【CSS】

.numbering {
  counter-reset: number 0; /* number のカウンタを 0 にセット */
}
h1:before  {
  counter-increment: number;     /* number カウンタの増加数をセット */ 
  content: counter(number)"位　";      /* 表示形式を指定 */
}

【HTML】

<div class="numbering">
  <h2>第9回AKB48選抜総選挙 順位</h2>
  <h1>指原莉乃</h1>
  <p>「こんな私をアイドルにしてくれた、ファンの皆さんに感謝です!!」</p>
  <h1>渡辺麻友</h1>
  <p>「ファンの皆さんの応援のおかげでずっと“神7”、“ベスト5”に入れさせてもらって感謝しれきない思いでいっぱいです。」</p>
  <h1>松井珠理奈</h1>
  <p>「来年はチャンピオンベルトを取りたいです。」</p>
  </div>

【ブラウザ表示例】

ナンバリング1

⬆︎出力イメージはこんな感じになります。「位」の前に数字が入ります。

連番の前にテキストを付加する方法

「content」プロパティで、自動ナンバリングの前後にテキストを付加してみます。

【CSS】

.numbering {
  counter-reset: number 0; /* number のカウンタを 0 にセット */
}
.numbering h1:before  {
  counter-increment: number;     /* number カウンタの増加数をセット */ 
  content: "第" counter(number) "位 ";     /* 表示形式を指定 */
}

【HTML】

<div class="numbering">
  <h2>第9回AKB48選抜総選挙 順位</h2>
  <h1>指原莉乃</h1>
  <p>「こんな私をアイドルにしてくれた、ファンの皆さんに感謝です!!」</p>
  <h1>渡辺麻友</h1>
  <p>「ファンの皆さんの応援のおかげでずっと“神7”、“ベスト5”に入れさせてもらって感謝しれきない思いでいっぱいです。」</p>
  <h1>松井珠理奈</h1>
  <p>「来年はチャンピオンベルトを取りたいです。」</p>
  </div>

【ブラウザ表示例】

⬆︎出力イメージはこんな感じになります。名前の前に「第」と入りました。

初期値・増加する値の設定

「counter-reset」と「counter-increment」の初期値はそれぞれ以下の通り。

counter-reset … 0
counter-increment … 1
変更する場合、値を追加します。

counter-reset: 5;

⬆︎初期値は5なので5からスタートします。

counter-increment: 3;

⬆︎初期値+3かつ3こづつ増えます。

最後に・・・

このよう「counter」を使うことで自動で数字を振ることができるのでとても便利です。CSSでレイアウトもいろいろ変えられるので是非つかってみてください。

投稿者プロフィール

kinukawahiroyasu
投稿タグ
, ,