コニファ・ロゴ

ツール集:CSS contentプロパティのcounterを使って、cssのみで作る通し番号

連番をふるケースで、次のサンプル1のようにol要素が複数存在し、かつ通し番号にしたいときは、li要素にvalueで値を指定して、連番を引き継ぐことができます。

サンプル1

小見出し1

  1. sample1-1
  2. sample1-2

小見出し2

  1. sample2-1
  2. sample2-2

サンプル1のhtmlソース

<p>小見出し1</p>
<ol>
	<li>sample1-1</li>	
	<li>sample1-2</li>
</ol>
<p>小見出し2</p>
<ol>
	<li value="3">sample2-1</li>	
	<li>sample2-2</li>
</ol>

 

しかし、ol要素の数や連番をふる総数が多くなると、手作業での対応は難しくなります。そのようなときは、次のサンプル2のようなcontentプロパティのcounterを使った自動連番が役に立ちます。

サンプル2

小見出し1

  1. sample1-1
  2. sample1-2
  3. sample1-3

小見出し2

  1. sample2-1
  2. sample2-2

小見出し3

  1. sample3-1

小見出し4

  1. sample4-1
  2. sample4-2
  3. sample4-3

サンプル2のhtmlソース

<p>小見出し1</p>	
<ol class="count">
	<li>sample1-1</li>	
	<li>sample1-2</li>
	<li>sample1-3</li>
</ol>
<p>小見出し2</p>
<ol class="count">
	<li>sample2-1</li>	
	<li>sample2-2</li>
</ol>
<p>小見出し3</p>
<ol class="count">
	<li>sample3-1</li>	
</ol>
<p>小見出し4</p>
<ol class="count">
	<li>sample4-1</li>	
	<li>sample4-2</li>
	<li>sample4-3</li>
</ol>

サンプル2のCSSソース

body {
	counter-reset: renban;
	}
.count {
	padding-left:20px;
	}
.count li {
	list-style-type: none;
	}
.count li::before {
	content : counter(renban) ". ";
	counter-increment: renban;
	padding-right: 5px;
	color:#333;
	}

 

サンプル2はサンプル1との比較のため、ol要素を使っていますが、ul要素でもかまいません。また、他のp要素やdiv要素などをリスト状に並べたものでは、さらに簡単な構造でcontentプロパティのcounterを使った自動連番が利用できます。

サンプル3

小見出し1

sample1-1

sample1-2

sample1-3

小見出し2

sample2-1

sample2-2

小見出し3

sample3-1

小見出し4

sample4-1

sample4-2

sample4-3

サンプル3のhtmlソース

<div class="box count2">
	<h4>小見出し1</h4>	
	<p>sample1-1</p>
	<p>sample1-2</p>
	<p>sample1-3</p>
	<h4>小見出し2</h4>
	<p>sample2-1</p>
	<p>sample2-2</p>
	<h4>小見出し3</h4>
	<p>sample3-1</p>
	<h4>小見出し4</h4>
	<p>sample4-1</p>
	<p>sample4-2</p>
	<p>sample4-3</p>
</div>

サンプル3のCSSソース

.count2 p {
	margin: 0 0 3px 20px;
	counter-increment: renban2;
	}
.count2 p:before {
	content : counter(renban2) ". ";
	padding-right: 5px;
	color: #333;
	}

 

 

 

 

戻るボタン