HTML/CSS

【コピペOK】CSSでcounterを利用して自動ナンバリングする方法

FUNA
こんにちは、リバティエンジニアのFUNA(フナ)です。現役でフリーランスのエンジニアとしてアプリケーション開発やWeb制作、SEOやブログ運営をしています。

この記事はこんな方におすすめ

  • CSSでcounterをつかってナンバリングしたい
  • counterの基本や応用を使いこなせるようになりたい

 

今回はCSSの「counter」をコピペでも簡単に実装できる方法・ソースコードをご紹介します。このcounterを利用することで、CSSだけで自動でナンバリングを実装することができます。

意外と知られていないのですが、「1 2 3 4」の基本のものや「第1章 第2章 第3章 第4章」と書き出しをつけたりすることができて、幅広く応用できます。

 

 

【PR】:  フリーランス向け求人・案件を探すならこの3サイトがおすすめ!

※上記は当サイトからの登録が多い順になっています
※上記以外のエージェントを知りたい方はIT業界エージェント・転職サイトのおすすめをご覧ください。

 

【CSS】counterの基本的な使い方

まずは基本的な使い方を見てみましょう。

See the Pen css counter by TAKUYA FUNABIKI (@takuya20180216) on CodePen.

【基本の使い方 手順①】親要素にcountercounter-resetを設定

まず、カウントしたい要素の親要素(上記コードではul)に「countercounter-reset」を設定しましょう。

/* カウンタを0にリセット */
  counter-reset: number 0; 

上記のソースコードでは「number」という名前でカウンターを作っています。numberの横の「0」は初期値です。

ここでカウントする値を初期化をしています。

 

【基本の使い方 手順②】ナンバリングしたい要素にcounter-incrementを設定

次に「counter-increment」をナンバリングする要素に設定します。

counter-increment: number 1;

これで先ほど初期化した「number」をインクリメント(増加数)を設定します。

上記の記述ではnumberを1ずつ増加させることになります。

 

【基本の使い方 手順③】

最後にナンバリングする要素に表示形式を設定します。

content: counter(number);

この記述では一番スタンダードな数字のみのナンバリングとなります。

 

【応用編】現場でもよく使うcounterの活用法

ここからは実際の現場でもよく使うことのあるcounterの活用例をご紹介します。

連番の前に文字を入れる方法(例, Chapter1.Chapter2...)

before要素にcontentを設定してcounterの前に「”(ダブルコーテーション)」で文字を入れるだけで実装可能です。

See the Pen css counter 数字前テキスト by TAKUYA FUNABIKI (@takuya20180216) on CodePen.

 

連番の後に文字を入れる方法(例, 1位.2位...)

先ほど同様、before要素にcontentを設定してcounterの後に「”(ダブルコーテーション)」で文字を入れるだけです。

See the Pen css counter after text by TAKUYA FUNABIKI (@takuya20180216) on CodePen.

 

連番の前後に文字を入れる方法(例, 第1章.第2章...)

こちらも先ほど同様、before要素にcontentを設定してcounterの前後に「”(ダブルコーテーション)」で文字を入れます。

See the Pen css counter text by TAKUYA FUNABIKI (@takuya20180216) on CodePen.

 

漢数字や五十音順などを指定する方法(例, 一.二...)

このcounterですが、ここまでは数字をインクリメントしましたが、数字以外にも漢数字やあいうえお順などでも可能です。

方法としては、「counter」に任意のプロパティを指定するだけです。

See the Pen css counter propaty by TAKUYA FUNABIKI (@takuya20180216) on CodePen.

 

アルメニア数字armenian
白丸circle
漢数字cjk-ideographic
算用数字 olデフォルト値decimal
先頭に0をつけた算用数字 (01, 02, 03, 等)decimal-leading-zero
グルジア数字georgian
ヘブライ数字hebrew
ひらがな – あいうえお順hiragana
ひらがな – いろは順hiragana-iroha
listStyleType プロパティの値は親要素から継承することを指定するinherit
カタカナ – アイウエオ順katakana
カタカナ – イロハ順katakana-iroha
小文字のアルファベット (a, b, c, d, e 等)lower-alpha
小文字のギリシャ文字lower-greek
小文字のアルファベット (a, b, c, d, e 等)lower-latin
小文字のローマ数字 (i, ii, iii, iv, v 等)lower-roman
大文字のアルファベット (A, B, C, D, E 等)upper-alpha
大文字のアルファベット (A, B, C, D, E 等)upper-latin
大文字のローマ数字 (I, II, III, IV, V 等)upper-roman

 

関連記事

【コピペOK!】ブロックの中のブロック要素を上下左右中央に揃える方法【HTML/CSS】

FUNAこんにちは、リバティエンジニアのFUNA(フナ)です。現役でフリーランスのエンジニアとしてアプリケーション開発やWeb制作、SEOやブログ運営をしています。 この記事はこんな方におすすめ ブロ ...

【CSS】たった1行のコピペで簡単!object fitで画像をトリミングする方法

CSSで画像をトリミングしたい時にたったの1行で実装できる方法を解説します。「object-fit」についてどのような時に使うのか、その使い方や応用の仕方を覚えてみてください。

【コピペOK】CSSでcounterを利用して自動ナンバリングする方法

今回はCSSの「counter」をコピペでも簡単に実装できる方法・ソースコードをご紹介します。このcounterを利用することで、CSSだけで自動でナンバリングを実装することができます。意外と知られていないのですが、「1 2 3 4」の基本のものや「第1章 第2章 第3章 第4章」と書き出しをつけたりすることができて、幅広く応用できます。

【コピペOK】CSSだけで背景を斜めに区切る方法【レスポンシブ対応】

今回は、HTML/CSSで背景を斜めに区切ってデザインする方法を、コピペでも簡単に実装する方法を解説します。ランディングページやコーポレートサイトなどの作成時に背景を斜めに区切ってレイアウトされているサイトを良く見かけますが、実装の仕方は簡単なので、ぜひ覚えておきましょう。

【コピペでOK】HTMLで直接ファイルをダウンロードできるように設定する方法

今回は、HTMLでファイルのダウンロードを設定する方法について解説します。方法としては、aタグにdownload属性を入れるだけで、ファイルをダウンロードするリンクを作成することができます。ここでは、具体的な書き方と動作を確認していこうと思います。


最近の投稿

Copyright© FUNA BLOG , 2021 All Rights Reserved.