こんにちは。すずきです。
この記事では、CSSのcounterを2桁で表示する方法について解説します。
昨日、以下のような投稿をしました。
CSSのcounter、これまで
— すずき | 田舎でwebデザイナー (@ksuzuki3533) August 7, 2023
h2:before {
content: “0” counter(counter);
}
と記述してきたけど、案件で10個目出てきて詰んだ。
と思ったら、2桁設定があることを知りました。
これで99までは対応できそう
デモはこちら👇https://t.co/EEdYRTT8nR#CSS
CSSのcounterは自動的に番号を出力してくれる機能です。
コンテンツの数が変わったりした時も自動で変更してくれるので便利ですよね。
自分もよく使っているプロパティです。
便利なプロパティですが、デザインの中では「0」が先頭についているデザインも多いですよね？
「01」「02」「03」…といったものです。
実はこの「0」も自動でつけることができます。
自動でつけることができるので、「10」以上の番号も自動で出力されます。
もう「010」にならなくて済みます！
CSSのcounterを使って番号を表示する方法を知っているが、常に2桁で表示する方法がわからない
それでは早速、方法を紹介していきます。
CSS counterの基本
counterの使用方法を一応おさらいしておきます。
不要な人は2桁のcounterの作成までジャンプして下さい。
実装の例は以下になります。
body {
counter-reset: counter;
}
h2:before {
counter-increment: counter;
content: counter(counter) "";
}counterを使用するには、まずcounter-resetプロパティを使用してカウンターを作成します。
このプロパティは、カウンターの名前と初期値を設定します。
次に、counter-incrementプロパティを使用してカウンターの値を増やします。
このプロパティは、カウンターの名前と増加量を指定します。
最後に、contentプロパティとcounter()関数を使用してカウンターの値を表示します。counter()関数の引数には、表示したいカウンターの名前を指定します。
2桁のcounterの作成
counter()プロパティはデフォルトでは値をそのまま表示するため、1桁の値には先頭に0が付きません。
2桁で表示するためには、値が10未満の場合に先頭に0を追加する設定を追加します。
counter()の中にdecimal-leading-zeroを追加することで、0を追加することができます。
以下が実装のデモになります。
See the Pen CSS「counter」を2桁で表示する by すずき (@k-suzuki3533) on CodePen.
よくある質問
- CSSでcounterを0から始める方法は？
-
CSSの
counterはデフォルトで0から始まります。しかし、異なる値から始めたい場合は、counter-resetプロパティを使用して初期値を設定できます。例えば、counter-reset: myCounter 10;とすると、myCounterは10から始まります。 - CSSでcounterを作る方法は？
-
CSSの
counterを作るには、counter-resetプロパティを使用します。例えば、counter-reset: myCounter;とすると、myCounterという名前のcounterが作成され、その初期値は0に設定されます。 - CSSのcounterとは何ですか？
-
CSSの
counterは、ウェブページ上の要素に自動的に番号を割り当てるための機能です。これは、見出しやリスト項目に番号をつける場合などに便利です。 - CSSのcounterの初期値は何ですか？
-
CSSの
counterの初期値は0です。しかし、counter-resetプロパティを使用して異なる値を設定することも可能です。
まとめ
CSSのcounterを2桁で表示する方法について解説しました。
また、counterの実装方法についても紹介しました。
これらを活用することで、見出しやリストに番号をつける際の柔軟性と表現力が大幅に向上します。
CSSのcounterについては、以下に詳しい内容が記載されています。
