今回は、CSSだけで自動カウント(CSSカウンタ)する方法をご紹介したいと思います。カウンターは、文書内の位置に基づいてコンテンツの表示方法を調整することができます。ウェブページ内の見出し番号を自動的に振るのに使ったりします。規則によって増加し、何回使用されたかを追跡するものです。引用:https://developer.mozilla.org/ja/docs/Web/Guide/CSS/Countersつまり、CSSだけを使って自動的に見出し番号を振ったりすることのできる機能です。counter(xxx);」を指定。実際に上記ルールを適用してみました。<h1>これは見出しです。<h1>これは見出しです。<h1>これは見出しです。class="box"><h1>これは見出しです。</h1><p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p><h1>これは見出しです。</h1><p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p><h1>これは見出しです。counter(num);}表示h1の疑似要素「:before」を使って簡単に見出しの前に自動カウントできました。見出しではなくても、リストなどでも応用できそうです。数を数えながら入れ込みをする手間も減りますし、要素を入れ替えても番号順になるのでとても便利です!自動カウントの開始する数を変更する自動カウントの開始する数や、間隔も変更ができます。下記のようなシーンです。5からカウントを始めたい2ずつ飛ばしてカウントさせたいHTMLは先程と同様のまま、CSSだけ変更します。counter(num);}.box要素に指定している「counter-reset」に、「num」と初期値である「5」を指定します。ナンバリングしたい要素には「counter-increment」に、「num」と飛ばしてカウントしたい「2」を指定します。表示このカスタマイズでナンバリングの幅がぐっと広がりました。様々な用途に合わせて使えそうです。数字以外にも漢数字や白丸なども指定できるCSSカウンタのデフォルトは数字ですが、こちらも指定することにより漢数字や白丸などに変更ができます。counter(num,cjk-ideographic);}「content」部分に、カンマで区切りを入れて指定します。下記表にあるプロパティをいれていただくと、変更できます。フロントエンドエンジニア・デザイナーの社員Aです。更新頻度が多いかと思います。このブログのテーマも作成しました。一人旅がだいすきで、特に東南アジアを周っています。株式会社ユニバースです。ホームページデザイン、ECサイトデザインなどWEB制作のトータルサポートを行っております。ホームページ制作やネットショップ運営代行などwebに関するご相談・お見積は、お気軽にお問い合わせください。MAX】2018年10月19日10今話題のLINEのオープンチャットとは?実際に参加してみた2019年09月11。