ブログ

意外と知らない?!CSSで文頭にナンバーを自動出力する方法

css-numbering

こんにちは、フロントエンドエンジニアのかみーゆです。久々にブログ書きます。

最近はCSS3が超便利で幸せな時代になったなと日々思っています。
とはいえ、今までのCSSだって捨てたもんじゃない。今更ですが意外と知らないCSS2のCSSカウンタが便利なのでその使い方をまとめてみました。

CSSカウンタってなんぞ?

CSSカウンタとは自動である要素を数えて、ナンバリングする機能です。contentプロパティのcounter()もしくはcounters()関数を利用して擬似要素(::beforeなど)にナンバーを出力できます。
工夫すればいろんな形式で出力できるし、デザインなどの幅も広がりとても便利です。

CSS カウンタの利用-ウェブディベロッパーガイド|MDN

CSSカウンタの使い方

counter-resetとcounter-incrementをそれぞれ指定します。

  • counter-reset 初期値を0にリセット
  • counter-increment カウンタを一個づつ増加

counter-resetに設定する値は任意で命名できます。変数みたいなものだと思ってもらえればいいと思います。
なので複数カウンタを使うときは被らないよう注意します。

見出しのナンバリングを自動出力する

CSSカウンタはプライバシーポリシーで見かけるよくありがちな見出しなどにも使えます。
以下のようなコードになります。content: counter(number)のnumberがカウントされていきます。

CSS HTML

出力イメージはこんな感じになります。リスト以外にも使えて便利ですね!

スクリーンショット-2017-06-08-15.35.21

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

counter-reset と counter-incrementの初期値はそれぞれ以下の通り。

  • counter-reset … 0
  • counter-increment … 1

変更したければ、値を追加します。

counter-reset: 5;
初期値は5なので5からスタート。

counter-increment: 3;
初期値+3かつ3こづつ増える。

数字形式の表示方法の変更

ちなみに入る数字の形式を変更することもできます。

content: counter(num, 表示形式);

設定名と種類

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

以下のように書き換えれば、簡単に先ほどのサンプルを漢数字 + “、”にすることもできます。

content: counter(num, cjk-ideographic) "、";

また以下のようにすれば、第一章〜、第二章〜というような文章も頭に付与することもできます。

content: "第" counter(num, cjk-ideographic) "章";

デザインをアレンジ

デフォルトでは味気ない順序付きリスト、olタグを装飾してみましょう。
装飾する場合はolにlist-style: none;でデフォルトのナンバリングを削除しておきます。

Webフォントに変えてみる

GoogleFontのPacificoで装飾してみました。
GoogleFont/Pacifico

  1. リスト
  2. リスト
  3. リスト

丸で囲んでみる

今回は装飾してますが、スタンダードに仕上げれば機種依存文字などと同じような丸で囲んだ数字も作れます。

  1. リスト
  2. リスト
  3. リスト

四角で囲んで見る

わずかにborder-radiusで角丸にしてみました。

  1. リスト
  2. リスト
  3. リスト

四角で囲んで見る2

四角で囲ってbox-shadowで右下にボカさない影を加えてみました。

  1. リスト
  2. リスト
  3. リスト

ご紹介したのは、ほんの一部ですがバリエーションが増えますね。

カウンター関数を使って複雑なナンバリング

カウンター関数を使って、複雑なナンバリングをします。
ページの目次などに便利ですね!

CSS HTML

  1. リスト
  2. リスト
    1. 子リスト
    2. 子リスト
  3. リスト
  4. リスト
    1. 子リスト
    2. 子リスト
      1. 孫リスト
      2. 孫リスト

まとめ

いかがでしたか?
知っておくと便利なCSSカウンタの使い方をまとめてみました。

オススメ関連記事

■この記事を書いた人 かみーゆ(フロントエンドエンジニア)

CMS concrete5の認定エバンジェリスト。コーディングからプログラミングまでフロント周りを中心にお仕事してます。広島支社でフロントエンドからサーバエンドまで幅広く触れるリベロなエンジニアを目指してます。お得意のconcrete5や技術的なTipsの記事を主にUPしてます。好きなものは肉とビール。

関連記事

  1. オープン記念のイラスト ブログ開設のごあいさつ 広島にWebを活用したビジネスを!
  2. blog_gif-01 トップページのカープ優勝バージョンで紙吹雪とともに降ってきたモノ…
  3. hpseisaku ホームページ制作を依頼する時のポイント
  4. チェックリストイラスト オフィスでコーチングのタイプ診断をしたら楽しい結果になった
  5. color-12 イラレのイラストに自然な陰影を与える配色のコツ
  6. ball-animation-Ver.2 GIFアニメで「ボヨヨン」の動きを作る
  7. css-numbering 意外と知らない?!CSSで文頭にナンバーを自動出力する方法
  8. illust-tutorial-sample Illustratorチュートリアル 遠近グリッドの使い方!

最近の記事

  1. carp5
  2. origami-01
  3. hirofuro_vol.10
  4. carp4
  5. css-numbering
PAGE TOP