HTML / CSS / jQuery コーディング

【CSS】hタグを使って自動で番号を付与する方法


リストタグを使わず、hタグで自動で番号を付与していく方法です。

途中でカウンタを0にセットすると、新たに1番から付与する事ができます。

◆html

<div class="autoNumber">
<h2>見出し・タイトル</h2>
<p>テキストテキストテキストテキスト</p>
<h2>見出し・タイトル</h2>
<p>テキストテキストテキストテキスト</p>
<h2>見出し・タイトル</h2>
<p>テキストテキストテキストテキスト</p>
</div>

◆css

.autoNumber {
counter-reset: h2; /* h2 のカウンタを 0 にセット */
margin: 50px 0;
}

h2:before {
counter-increment: h2; /* h2 カウンタを増加 */
content: counter(h2) ". "; /* カウンタを表示 */
}

⇒ サンプルページはこちら

-HTML / CSS / jQuery コーディング
-

© 2026 Web担当屋 ブログ