CSSで数字を数えよう

2023/10/26

エンジニアインターン

みなさん、こんにちは！京都事業所受託プロダクトチームインターン生の肖かえいです😆
今日はcssで数字を数える方法を書いていこうと思います。
これは「counter」という機能で実装することができます。
これを使用することで連番などの自動ナンバリングができるようになります。
基本的な使い方としては「countercounter-reset」プロパティと「counter-increment」プロパティを使い設定を行います。
countercounter-resetでカウントする数を初期化します。その後counter-incrementでカウントの増加数をセットするという形になります。

＜例＞
body {
counter-reset: number 0;
}

h1:before {
counter-increment: number 1;
content: counter(number) " "; /* 表示形式を指定 */

}

このコードはH１要素の前に自動で数えて連番を付けていくコードになります。
他にも目次を作成するときに使えそうですね！！

---------------------------------------------------------------------------------------------
インターン募集ページ: https://guardian.jpn.com/recruit/intern/
メンバー紹介ページ：https://guardian.jpn.com/member/Xiao_Kaei/
---------------------------------------------------------------------------------------------