2013/10/12
CCSだけで見出しに自動で連番を記入する方法
当ブログでは「◯◯100」といった感じの記事をよく書かせていただいています。
こうしたとき、以前まででしたら、見出し1つ1つに連番をつけていたのですが、10でも結構面倒なのに、100なんてあった日には、とてもではありませんが、つける気にもならず、ついつい省略していました。
でも、よくよく考えてみると、自動で連番をつける方法がありました。
CSSのcontent:counterプロパティを利用する方法です。
contentプロパティを利用する
利用するのはcontentプロパティです。
contentプロパティは、挿入したいコンテンツを指定でき、::beforeまたは::afterセレクタで挿入先を指定することが可能です。
contentプロパティには、文字列、画像、引用符、そして、この記事で紹介する「カウンタ」を挿入することが可能です。
content:counterを利用して見出しに自動で連番をふる
当ブログではh2で、連番をつけるようにしています。
連番をつけるには、content:counterを利用します。
具体的には以下の様な方法で連番をフルことが可能。
|
1 2 3 4 5 6 7 |
h2::before { content: counter(mycount); margin-right: 10px; /*数字のあとにアキを挿入*/ } h2 { counter-increment: mycount; } |
mycountというカウンター名をつけて、counter-incrementプロパティで、h2部分に連番をふるようにしています。
さまざまな種類のカウンターを挿入できる
挿入できるのは数字だけではありません。
アルファベット大文字だったら以下のようになります。
|
1 |
content: counter(mycount, upper-alpha); |
アルファベット小文字だったら以下のようになります。
|
1 |
content: counter(mycount, lower-alpha); |
ローマ数字大文字(I,II..)だったら以下のようになります。
|
1 |
content: counter(mycount, upper-roman); |
ローマ数字小文字(i,ii…)だったら以下のようになります。
|
1 |
content: counter(mycount, lower-roman); |
記事を書くときに、少しでも楽になれば幸いです。
Sponsored by
お役に立てましたら、以下どれでも結構のですので、ポチリと……。
Amazonアソシエイト・プログラム規約による記載
当サイトはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。
この記事を読んだ人はこんな記事も読んでいます
-
-
背景に使いたい!美しくカラフルなトライアングルメッシュ画像をSVGとして作成できるjsライブラリー「Trianglify」
最近よく見かける背景画像といえば、美しいボケ味の効いた画像やカラフルなピクセルパターンですが、美しく
-
-
無料で使えるフラットデザインUIキット40
フラットデザインのUIキットをご紹介します。 さまざまなサイトで取り入れられているフラットデザイン
-
-
売上手数料なし!簡単・便利なWixStoresでネットショップを開業する方法
「知識ゼロだけど自分でネットショップを作りたい」「業者に頼む余裕も予算もない」そんな方にオススメなの
-
-
スタイリッシュなポップアップ/モーダルウインドウ用jQuery無料プラグイン25
jQueryで実装できるスタイリッシュなポップアップ/モーダルウインドウ用プラグインをご紹介します。
-
-
CSSアニメーションを使ったエフェクトライブラリー9
CSSアニメーションを使ったエフェクトは、プログラムを苦手とするWEBデザイナーや一般の方々に新しい
-
-
セキュリティー/プライバシーにすぐれたブラウザ6選
IE、Chrome、Safari、Firefoxといったメジャーブラウザ以外にもたくさんのブラウザが
-
-
通信量無制限!? 隣近所のWiFiをシェアして利用し放題にする注目のサービス「シェアWiFi」
隣近所のWiFiをシェアして利用し放題にする注目のサービス「シェアWiFi」がリリースされました。
-
-
もはやアート?ブラウザの閲覧履歴をファビコンで一覧表示する「Iconic History」
ブラウザの閲覧履歴をファビコンで一覧表示するChromeの機能拡張「Iconic History」を
-
-
CSS3だけで映画のエンドロール風エフェクトを表現した「Movie Credits」
CSS3って、とっつきやすいうえに、表現力も豊かで、実装するのが楽しくなってしまいます。 表現力豊
-
-
JSを使わずにCSSだけで簡単にシンプルなパララックス効果をつける方法
JSを使わずにCSSだけで簡単にシンプルなパララックス効果をつけられる方法をご紹介します。 パララ
