画像メインではなく、CSSメインのサイトでコーディングをしている時は特にCSSの可能性を知りたいというか何というか、ココは画像でいくのか、CSSでいくのか迷います。
見出しだけど、ナンバリングすべき箇所はどうするべきか？？
静的ページで「◯◯◯の手順」というページをコーディングしてる時にそういう考えに至りました。
そんな訳で、今回CSSのみで見出しに番号をつけてみたので、備忘録代わりにメモ。

counter-incrementプロパテイを使います。

今回は見出しに番号をつける仮定ですが、ounter-incrementプロパティは、要素の連番の値を進める際に使用するプロパティなので、他の要素にも使えます。

クイックリファレンスには以下の説明があります。

counter-incrementプロパティは、要素の連番（カウンタ）の値を進める際に使用します。
counter-incrementプロパティを要素に適用してカウンタ名を定義すると、ウェブページ内にその要素が現われるたびに、定義したカウンタの値が進められます。負の値を指定してカウンタを戻すことも可能です。
counter-incrementプロパティを適用する要素に:before擬似要素、:after擬似要素を付けて、contentプロパティでカウンタ名を指定してやることで、要素の直前または直後にカウンタの値を挿入することができます。
クイックリファレンスより引用

【HTML】

<h3>見出し一つ目</h3>
<h3>見出し二つ目</h3>
<h3>見出し三つ目</h3>

まずは、番号を付けたい要素に以下の設定

h3 {
 counter-increment: numeber; /*numberの所は任意**/
}

そして、擬似要素として以下の設定をつけます。

h3.midashi01:before {
 content: counter(numeber)"."; /*ダブルクォーテーションの中は数字とテキストの間に入れたい文字**/
}

これで、見出しの前に番号がふられます。

DEMO

同一ページに複数の番号をつける場合

counter()の中の値を変える方法

見出しにclassをつけて、別々に設定しても、番号は引き継がれます。なので、counter()の値を別の名前にしてあげる必要があります。

【CSS】

h3 {
 counter-increment: numeber;
}

h3:before{
 content: counter(numeber)".";
}


h3.midashi2 {
 counter-increment: numeber2;
}

h3.midashi2:before{
 content: counter(numeber2)".";
}

【HTML】

<h3>見出し一つ目</h3>

<h3>見出し二つ目</h3>
<h3>見出し三つ目</h3>
<h3 class="midashi2">見出し一つ目</h3>
<h3 class="midashi2">見出し二つ目</h3>
<h3 class="midashi2">見出し三つ目</h3>

DEMO

＜div＞などのBOX要素で連番毎に囲ってあげる

コレのためだけに、＜div＞でBox要素で囲うのもどうかと思いますが、一応下記のやり方でも連番をリセットできます。

【HTML】※CSSは上記と同じ

<div>
<h3>見出し一つ目</h3>
<h3>見出し二つ目</h3>
<h3>見出し三つ目</h3>
</div>

<div>
<h3>見出し一つ目</h3>
<h3>見出し二つ目</h3>
<h3>見出し三つ目</h3>
</div>

CSSで装飾してみる

単に番号をふるだけなのも芸がないんで、せっかくなんでCSSの機能を使って、装飾してみます。

DEMO

DEMOでは「:before」に連番部分の装飾の値を書いてますが、テキストの最初の文字なので「:first-letter」に記述するのもありですね。

【応用】見出し番号に「1-1」とかふる場合

真面目なレポートや階層の深いTIPSとかでたまに見かける連番パターンですね。

【HTML】

<h3>タイトル</h3>
<h4>最初の見出し</h4>
<h4>次の見出し</h4>
<h5>その中の見出し</h5>
<h5>その中の次の見出し</h5>
<h4>最後の見出し</h4>
<h5>最後のなかの見出し</h5>

【CSS】

body {
  counter-reset: number01;
  counter-reset: number02;
}

h3 {
  counter-reset: number01;
}
h4:before {
  content: counter(number01) ". ";
  counter-increment: number01;
}
h4 {
  counter-reset: number02;
}

h5:before {
  content: counter(number01) "." counter(number02) ". ";
  counter-increment: number02;
}

まとめ

CSSで連番ふっても、文書構文が正しいかといえば、疑問なので何にでも連番はコレでOKではない気がします。
連番リストはやはり＜ol＞で記述するべきでしょうから、＜dl＞定義の時とか、今回みたいな見出しとか、あくまでユーザーへの伝えやすさの装飾として使用するのがいいかもです。この辺ちょっと曖昧なんでツッコミがあったら大歓迎です(・∀・)
今回は以上ですm(_ _)m