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

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

CSS
HTML
よくある質問（FAQ）
まとめ

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から順に増加する連番が表示されます。

よくある質問（FAQ）

Q. CSSで要素を振動させるアニメーションを作るには？

A. @keyframesとanimation: shake 0.5s;を使い、translateXで左右に動かします。例：0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)}のようなフレームを定義します。

Q. 入力エラー時に要素を揺らす演出はどう実装しますか？

A. エラー時にJavaScriptでshakeクラスを追加し、animationが完了したらanimationendイベントで削除します。classList.remove()をanimationendで呼ぶことで次回も動作します。

Q. 振動アニメーションをprefers-reduced-motionで制御するには？

A. @media (prefers-reduced-motion: reduce)内でanimationをnoneに設定します。前庭障害等の方がモーション削減設定をしている場合に配慮が必要です。