sakura*sakura

cssで「content」プロパティにcounter()を使用すると、指定の要素に自動ナンバリング表示が可能になる。

そこまではまぁ有名。

今回は、半角数字ではなくて、ちょっとおしゃれにローマ字で「a,b,c・・・」という風にしたい。

ついでに、ドット「.」も付け加えて、「a.」「b.」「c.」みたいに装飾したい。

h3タグにカウンター表記をする例

◆画面上の表示

◆HTML

<h2>h2タイトル１</h2>
<h3>h3タイトル</h3><p>・・・</p>
<h3>h3タイトル</h3><p>・・・</p>
<h3>h3タイトル</h3><p>・・・</p>

<h2>h2タイトル２</h2>
<h3>h3タイトル</h3><p>・・・</p>
<h3>h3タイトル</h3><p>・・・</p>

◆CSS

h2 {
  counter-reset: hoge; /* カウンター変数hogeをリセット */
}

h3:before {
  counter-increment: hoge; /* カウンター変数hogeをインクリメント */

　 /* カウンター変数hogeの画面表示形式 */
  content:counter(hoge, lower-alpha) "．"; /* 小文字アルファベット（a,b,c・・・）にドットをつける */
}

その他のパターン

h2 {
  counter-reset: hoge; /* カウンター変数hogeをリセット */
}

h3:before {
  counter-increment: hoge; /* カウンター変数hogeをインクリメント */

　 /* カウンター変数hogeを画面に表示する形式 */
  content:counter(hoge); /* 【default】半角数値（1,2,3・・・）「1」 */
  content:counter(hoge) "．"; /* 半角数値にドットをつける。「1．」 */
  content:counter(hoge, hiragana); /* ひらがな（あ,い,う,え,お・・・）「あ」 */
  content:counter(hoge, hiragana-iroha); /* ひらがな（い,ろ,は・・・）「い」 */
  content:counter(hoge, katakana); /* カタカナ（ア,イ,ウ,エ,オ・・・）「ア」 */
  content:counter(hoge, katakana-iroha); /* カタカナ（イ,ロ,ハ・・・）「イ」 */
  content:counter(hoge, upper-alpha); /* 大文字アルファベット（A,B,C・・・）「A」 */
  content:counter(hoge, lower-alpha); /* 小文字アルファベット（a,b,c・・・）「a」 */
  content:counter(hoge, upper-roman); /* 大文字のローマ数字（(I,II,III・・・）「I」 */
  content:counter(hoge, lower-roman); /* 小文字のローマ数字（i,ii,iii・・・）「i」 */
}

参考：MDN

複数使用しての入れ子も可能

counter()が便利なのって、複数入れ子にして使用することも出来るということ。

変数宣言を増やせば良い。

つまり、今回はカウンター変数を「hoge」にしているけど、他にも並行して使いたい場合は「huga」「piyo」・・・なんていう風に増産できる。

便利。