はじめに
cssカウンターをご存じですか？
リスト要素に注1,注2,,,と文字を含んだ連番を直接書かず管理できないかと試行錯誤してたところ、CSSカウンターを使用することで下記のようなデザインを実現できることを知りました。今回はその方法をご紹介いたします。
cssカウンターとは
要素のナンバリングや連番を自動的に管理するための機能です。
counter-resetプロパティを使用して、カウンターの初期値やリセットの方法を設定します。次に、counter-incrementプロパティを使用して、カウンターの増加方法やステップ数を指定します。これにより、要素ごとにカウンターがインクリメントされ、自動的に番号が付けられます。
cssカウンターの基本的な使い方
HTML
<ol class="ol-note">
<li>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</li>
<li>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</li>
<li>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</li>
</ol>
CSS
1.counter-resetを指定し初期化する
親要素olや親要素より上の要素（body等）にcounter-resetを指定し初期化します。
.ol-note {
counter-reset: count;/*カウンタ名を指定*/
}
2.擬似要素にカウンタ値と文字列を挿入し、カウンタをインクリメントする
counter-incrementを適用したい要素liの擬似要素にcounter()関数を使用し、カウンター値を挿入し、文字列は” ”（ダブルクォーテーション）内に挿入します。
今回は注1,注2とひとつずつ進めたいので、counter-incrementの値にカウンタ名のみを挿入します。
.ol-note li::before {
content: "注" counter(count) ". ";/* カウンタ値と文字列を挿入 */
counter-increment: count;/* カウンタをインクリメント */
}
デザインに合わせ、インデントの調整やマージンの調整すれば完成です。
.ol-note li {
margin-bottom: 1em;
text-indent: -2em;
}このようにすることで、リスト要素の前に「注1」「注2」「注3」といった連番が自動的に表示されます。
まとめ
数の多い連番のリストなど、要素が削除されても番号の修正が不要なので、CSSカウンターはこのような場面でも非常に役立ちそうです！
参考サイト
こちらのサイトを参考にさせていただきました。
