文頭にナンバーを自動出力する

 

 Web技術

olタグではなく、見出しタグなどを使用して自動で番号をつけていきたい。

このようなときには「CSSカウンタ」を使用します。

CSSカウンタは自動で要素を数えて、ナンバリングする機能です。
contentプロパティの「counter()」もしくは「counters()」関数を利用して
擬似要素(::beforeなど)にナンバー出力します。

olタグで括弧付きの数字で表示する」でも使用しました。

使い方

「counter-reset」と「counter-increment」の指定

  • counter-reset:初期値を0にリセットする
  • counter-increment:カウンタを1づつ増加する

「counter-reset」の値は任意です。
複数カウンタを使用する時はそれぞれ別の値を設定します。

ナンバリングを自動出力

HTML

CSS

DEMO

HTML
文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章
CSS
文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章
JS
文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章

その他の設定

初期値・増加する値の設定

「counter-reset」と「counter-increment」の初期値を変更します
(何も設定しない場合の初期値はcounter-resetは0、counter-incrementは1となります)。

CSS「conter-reset」

「conter-reset」で初期設定する場合、一番目に表示すべき値の一つ前の値を設定します
初期値を5に変更したので「6」からのスタートになります。

DEMO

HTML
文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章
CSS
文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章
JS
文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章

CSS「counter-increment」

初期値を4に変更したので「4」からのスタートかつ+4づつ増えます。

DEMO

HTML
文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章
CSS
文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章
JS
文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章

表示方法の変更

decimal 数字(初期値:1、2、3)
decimal-leading-zero 0つき数字(01、02、03)
lower-roman ローマ数字小文字(ⅰ、ⅱ、ⅲ)
upper-roman ローマ数字大文字(Ⅰ、Ⅱ、Ⅲ)
cjk-ideographic 漢数字(一、二、三)
lower-alpha アルファベット小文字(a、b、c)
upper-alpha アルファベット大文字(A、B、C)
hiragana ひらがな(あ、い、う)
katakana カタカナ(ア、イ、ウ)
hiragana-iroha いろは順(い、ろ、は)
katakana-iroha イロハ順(イ、ロ、ハ)

DEMO

HTML
文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章
CSS
文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章
JS
文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章

▼参考にさせていただきました。ありがとうございました。

 この記事の投稿者

アバター画像

taka

Webサイト作ってます。
最近のモットー「決して無理をしないスタイル」

twitter: @taka_sbs

  • このエントリーをはてなブックマークに追加
  • 0 follow us in feedly

ページ最上部へ