個人的に役立ったデザイン素材やTips、WEBサービス、役立つグッズ、あれやこれやをご紹介

CCSだけで見出しに自動で連番を記入する方法

当ブログでは「◯◯100」といった感じの記事をよく書かせていただいています。
こうしたとき、以前まででしたら、見出し1つ1つに連番をつけていたのですが、10でも結構面倒なのに、100なんてあった日には、とてもではありませんが、つける気にもならず、ついつい省略していました。
でも、よくよく考えてみると、自動で連番をつける方法がありました。
CSSのcontent:counterプロパティを利用する方法です。

contentプロパティを利用する

利用するのはcontentプロパティです。
contentプロパティは、挿入したいコンテンツを指定でき、::beforeまたは::afterセレクタで挿入先を指定することが可能です。
contentプロパティには、文字列、画像、引用符、そして、この記事で紹介する「カウンタ」を挿入することが可能です。

content:counterを利用して見出しに自動で連番をふる

当ブログではh2で、連番をつけるようにしています。
連番をつけるには、content:counterを利用します。
具体的には以下の様な方法で連番をフルことが可能。

mycountというカウンター名をつけて、counter-incrementプロパティで、h2部分に連番をふるようにしています。

さまざまな種類のカウンターを挿入できる

挿入できるのは数字だけではありません。

アルファベット大文字だったら以下のようになります。

アルファベット小文字だったら以下のようになります。

ローマ数字大文字(I,II..)だったら以下のようになります。

ローマ数字小文字(i,ii…)だったら以下のようになります。

記事を書くときに、少しでも楽になれば幸いです。

お役に立てましたら、以下どれでも結構のですので、ポチリと……。

  • 0
  • 0
  • 1
  • 1

Amazonアソシエイト・プログラム規約による記載
当サイトはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。

この記事を読んだ人はこんな記事も読んでいます

波打つようなクリックエフェクトを実装できる「Waves」

今回はクリックしたときに、静かな湖面を指で触れて波打つようなエフェクトを実装できるライブラリーをご紹

記事を読む

UIのインスピレーションに最適な「UXPorn」

UIデザインのインスピレーションで溢れてる「UXPorn」

サイトやWEBサービスをつくるときにどのようなUIデザインにするかは悩むところですよね。 UIをつ

記事を読む

CSSだけでブルブル震えるエフェクトを簡単実装!CSS Shakeを使ってみた

CSSだけでブルブル震えるエフェクトを簡単実装!CSS Shakeを使ってみた

CSSだけでブルブル震えるエフェクトを簡単実装!CSS shakeを使ってみた すでにお気づき

記事を読む

背景画像をフルスクリーン&レスポンシブ対応にする方法

背景画像をスクリーンいっぱいに表示しているサイトが増えているとはいえ、いま見てもインパクトがあります

記事を読む

レスポンシブ対応のコンテンツスライダー/スライドショーベスト8

以前の記事「レスポンシブ対応などコンテンツスライダー/スライドショー用jQueryプラグイン50+」

記事を読む

CSSの手入力が不要になる便利なCSSジェネレーター「ENJOY CSS」

CSSの手入力が不要になる!複数の機能が1つになったCSSジェネレーター「ENJOY CSS」

CSS3になってから便利なジェネレーターが次々に登場していますが、今回ご紹介するジェネレーターはひと

記事を読む

twitterでのキーワードのひろがりを調べられるツール「twimp」

twitterでのキーワードのひろがりを調べられるツール「twimp」

twitterでのキーワードのひろがりを調べられるツール「twimp」をご紹介します。 作成者した

記事を読む

Sketch用の無料フリー素材1500+ 2015年04月

Sketch用の無料フリー素材1500+ 2015年04月

Sketch用の無料フリー素材を集めてみました。 Mac専用ということもあり、日本ではPhotos

記事を読む

ファイルを安全にダウンロードするために!ダウロード前にマルウェアをスキャンしてくれるChrome機能拡張「Metascan Online」

ファイルを安全にダウンロード!ダウロード前にマルウェアをスキャンしてくれるChrome機能拡張「Metascan Online」

ファイルを安全にダウンロードするため、ダウロード前にウイルスやスパイウエア、トロイの木馬などのマルウ

記事を読む

CSSグラデーションを簡単につくれる「Colorful CSS Gradient Background Generator」

背景画像をサッとつくれる便利ツール20選

背景画像をサッとつくれる便利ツールやサイトをご紹介します。 背景にちょっと手を加えるだけで、見た目

記事を読む