CSSカウンターを使ってみる

ひとりCSS Advent Calendar 2022 10日目です。

CSSカウンターを使ってみます。

CSSカウンターとは

例

• 見出し番号を自動で振れる
• ol の番号を変えられる

使い方

• counter-reset プロパティでカウンターの値を初期化する
  • 初期化する以外にデフォルト値を設定できる
• counter-increment でカウンターの値を増加できる
• counter() または counters() を content プロパティで使用すると表示できる

使ってみる

<section>
  <h2>Headline</h2>
  <p>Pragraqh</p>
</section>

<section>
  <h2>Headline</h2>
  <p>Pragraqh</p>
</section>

<section>
  <h2>Headline</h2>
  <p>Pragraqh</p>
</section>

<section>
  <h2>Headline</h2>
  <ol>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
  </ol>
</section>

:root {
  counter-reset: section;
}

h2::before {
  counter-increment: section;
  content: counter(section) ": ";
}

ol {
  counter-reset: listConter;
}

li {
  counter-increment: listConter;
}

li::marker {
  content: counter(section) "." counter(listConter) " ";
}

感想

• 便利

参考

• https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters