pgintro.net

CSS - counter

作成日時:2019/04/21

更新日時:2019/04/21

スポンサーリンク

参考サイト

MDN - CSS カウンターの使用

https://developer.mozilla.org/ja/docs/Web/Guide/CSS/Counters

設定方法

counter()関数は引数に変数名を渡すとその変数の値が返されます。

具体的には以下の通りの設定を任意の要素に設定する必要があります。

  1. 「counter-reset」オプションで任意の変数の値を初期化。
  2. 「counter-increment」オプションで任意の変数の値を増加。
  3. 「counter()」関数で任意の変数の値を表示。

counter() - style設定

デフォルトは「decimal」に設定されています。

スタイル名説明表示例
none非表示
  1. 表示例
  2. 表示例
  3. 表示例
armenianアルメニア数字
  1. 表示例
  2. 表示例
  3. 表示例
disc黒丸
  1. 表示例
  2. 表示例
  3. 表示例
circle白丸
  1. 表示例
  2. 表示例
  3. 表示例
square黒四角
  1. 表示例
  2. 表示例
  3. 表示例
cjk-ideographic漢数字
  1. 表示例
  2. 表示例
  3. 表示例
decimal十進数字
  1. 表示例
  2. 表示例
  3. 表示例
decimal-leading-zero先頭に0を付与した十進数字
  1. 表示例
  2. 表示例
  3. 表示例
georgianグルジア/ジョージア数字
  1. 表示例
  2. 表示例
  3. 表示例
hebrewヘブライ数字
  1. 表示例
  2. 表示例
  3. 表示例
hiraganaひらがな
  1. 表示例
  2. 表示例
  3. 表示例
hiragana-irohaひらがな(いろは)
  1. 表示例
  2. 表示例
  3. 表示例
katakanaカタカナ
  1. 表示例
  2. 表示例
  3. 表示例
katakana-irohaカタカナ(イロハ)
  1. 表示例
  2. 表示例
  3. 表示例
lower-alphaアルファベット(小文字)
  1. 表示例
  2. 表示例
  3. 表示例
lower-greekギリシャ文字(小文字)
  1. 表示例
  2. 表示例
  3. 表示例
lower-latinラテン文字(小文字)
  1. 表示例
  2. 表示例
  3. 表示例
lower-romanローマ数字(小文字)
  1. 表示例
  2. 表示例
  3. 表示例
upper-alphaアルファベット(大文字)
  1. 表示例
  2. 表示例
  3. 表示例
upper-latinラテン文字(大文字)
  1. 表示例
  2. 表示例
  3. 表示例
upper-romanローマ数字(大文字)
  1. 表示例
  2. 表示例
  3. 表示例

使用例1

以下の例では、

  1. 「rank」という変数が「rank-list」クラスの要素が現れた段階で「0」に初期化される。
  2. 「rank-list」クラス以下にある「li」要素の「before」擬似クラスにて1ずつインクリメントされる。
  3. 「content」オプションの値設定時に「counter(rank)」の呼び出しを行い変数の値を使用。

のような形で連番を表示しています。

css

.rank-list {
  counter-reset:rank;
}
.rank-list li:before {
  counter-increment:rank;
  content:counter(rank) "位　";
}

html

<ol class="rank-list">
  <li>製品A</li>
  <li>製品B</li>
  <li>製品C</li>
</ol>

結果

  1. 製品A
  2. 製品B
  3. 製品C

使用例2 - リストの入れ子

以下の例ではほとんど使用例1と同様の設定ですが、counter()関数の代わりにcounters()関数を使用します。

counterで使用する変数は以下のように入れ子になっている要素の場合、新しいインスタンスが作成されるため、親要素の値と子要素の値のどちらも表示することが可能です。

counters()関数の第一引数に変数名、第二引数に親要素と子要素の値の区切り文字を指定します。

  1. 「section」という変数が「section-list」クラスの要素が現れた段階で「0」に初期化される。
  2. 「section-list」クラス以下にある「li」要素の「before」擬似クラスにて1ずつインクリメントされる。
  3. 「content」オプションの値設定時に「counters(section, "-")」の呼び出しを行い変数の値を使用。

のような形で連番を表示しています。

css

.section-list {
  counter-reset:section;
}
.section-list li:before {
  counter-increment:section;
  content:counters(section, "-") "　";
}

html

<ol class="section-list">
  <li>大項目</li>
  <li>大項目
    <ol class="section-list" style="margin-left:20px;">
      <li>大項目</li>
      <li>大項目</li>
      <li>大項目</li>
    </ol>
  </li>
  <li>大項目
    <ol class="section-list" style="margin-left:20px;">
      <li>大項目</li>
      <li>大項目
        <ol class="section-list" style="margin-left:40px;">
          <li>大項目</li>
          <li>大項目</li>
          <li>大項目</li>
        </ol>
      </li>
      <li>大項目</li>
    </ol>
  </li>
</ol>

結果

  1. 大項目
  2. 大項目
    1. 大項目
    2. 大項目
    3. 大項目
  3. 大項目
    1. 大項目
    2. 大項目
      1. 大項目
      2. 大項目
      3. 大項目
    3. 大項目