Simple HTMLHTMLリファレンス

Main Menu

おすすめリンク

Site Info.

HTMLリファレンス

CSSリファレンス

その他の記事

CSSリファレンス インデックス

スポンサーリンク

CSSリファレンス

CSSの値TOPCSSValues

  1. 整数値と実数値<Integer> & <Number>
  2. 長さと単位(Length値)<Length>
  3. パーセンテージ<Percentage>
  4. アドレス<URI>
  5. カウンタ<Counter>
  6. 色の種類と値<Color>
  7. キーワードと文字列<Keyword> & <String>

カウンタCounters<Counter>

カウンタの値<Counter>は、アルファベット文字列で構成されたカウンタ識別子(変数)の中に格納されており、識別子には指定した要素が現れる毎に増減値が加算されます。カウンタ識別子の大文字と小文字は区別され、生成する値には数値以外の文字列(list-style-typeプロパティで指定する値と同じ)を指定することも可能です。

カウンタの使い方

Step-1カウンタの初期値と増減

次のHTMLソースを例にカウンタの使い方を説明します。
CSSの中で、<h1>タグにchapter、<h2>タグにsectionをカウンタ識別子として指定し、<div>や<h1>の出現毎にカウンタ値をリセットするよう指定します。

			"chapter" counter	|"section" counter	
<div>			 {chapter=0	|			
  <h1>果物について</h1>	  chapter++ (=1)	| {section=0		
    <h2>みかん</h2>				|  section++ (=1)	
    <h2>りんご</h2>				|  section++ (=2)	
  <h1>野菜について</h1>	  chapter++ (=2)	|}{ section=0		
</div>						| }			
div	{counter-reset:chapter}		<div>タグの出現毎にchapterをリセット
h1	{counter-reset:section}		<h1>タグの出現毎にsectionをリセット
Step-2カウンタの増減値

カウンタの増減値の初期値は1ですが、任意の値を指定することもできます。

div	{counter-reset:chapter}
h1	{counter-increment:chapter 1}	<h1>タグの出現毎にchapterに1を加算
h1	{counter-reset:section}
h2	{counter-increment:section 1}	<h2>タグの出現毎にsectionに1を加算
Step-3カウンタの出力値の挿入

カウンタの出力には、擬似要素を使用します。下の例では、<h1>および<h2>タグに擬似要素を指定し、contentプロパティを用いて章番号や項番号など、要素の先頭に付加するカウンタの内容(カウンタ識別子)を指定しています。

div	{counter-reset:chapter}
h1	{counter-increment:chapter 1}

	<h1>タグに擬似要素を指定し、要素の前にカウンタ値を出力
h1:before	{content:counter(chapter)}

h1	{counter-reset:section}
h2	{counter-increment:section 1}

	<h2>タグに擬似要素を指定し、要素の前にカウンタ値を出力
h2:before	{content:counter(section)}

果物について

みかん

りんご

野菜について

トマト

レタス

Step-4カウンタ値と文字列の組み合わせ

カウンタの出力には、識別子の値に加えて、任意の文字列を組み合わせた値を出力することが可能です。例えば<h1>や<h2>タタグの先頭に『第.○章 △項』といった形式で自動的に付番することができるので、大変便利です。

div	{counter-reset:chapter}
h1	{counter-increment:chapter 1}

	<h1>タグに擬似要素を指定し、カウンタ値を『第○章』の形式で出力
h1:before	{content:"第 " counter(chapter) " 章 "}

h1	{counter-reset:section}
h2	{counter-increment:section 1}

	<h2>タグに擬似要素を指定し、カウンタ値を『第○章 ○項』の形式で出力
h2:before	{content:"第 " counter(chapter) " 章 " counter(section) " 項 "}

果物について

みかん

りんご

野菜について

トマト

レタス

スポンサーリンク
Copyright (C) 2010 Simple HTML. All Rights Reserved.