【CSS】HTML要素に連番を振る方法

CSSの counter-increment プロパティを使うと、HTML要素に簡単に連番を振ることができます。これは特にブログやリストの項目などで便利です。以下に、このプロパティを使用して要素に連番を振る方法を紹介します。

CSS

counter-increment プロパティは、CSSで要素に連番を振るために使用されます。以下は、基本的な使用例です。

/* スタイルを適用する要素に対して counter-reset を使ってカウンターを初期化 */
.container {
  counter-reset: my-counter;
}

/* 要素内の特定の場所でカウンターをインクリメント */
.item::before {
  counter-increment: my-counter; /* カウンターを1増やす */
  content: counter(my-counter); /* カウンターの値を表示 */
}

この例では、.container クラスが付いた要素内で my-counter という名前のカウンターが初期化され、.item 要素の前に疑似要素 (::before) を使用して、その前にカウンターの値を表示しています。

各 .item 要素が表示されるたびに、カウンターが1ずつ増加します。連番が必要な場所にこのスタイルを適用してください。

HTML

例えば、ブログの記事内で各項目に連番を振りたい場合、以下のようにHTMLを記述します。

<div class="container">
  <div class="item">最初の項目</div>
  <div class="item">次の項目</div>
  <div class="item">さらなる項目</div>
</div>

これにより、各 .item 要素が表示されるたびに、その前に1から順に増加する連番が表示されます。

まとめ

連番を振りたい要素に対して上記のCSSスタイルを適用することで、見栄えの良い連番が簡単に実現できます。 CSSの counter-increment プロパティを上手に利用して、ブログやリストの項目などで情報を整理しやすくしましょう。