【CSS】counter を使って Stepper コンポーネントを作る

はじめに

みなさんは CSS の counter を使うことで簡単に連番を作れることを知っていますか？
私は最近までその便利さを知りませんでした。
この記事では React で Stepper コンポネートを作る際に、counter を活用して各ステップに番号を割り当てる方法を紹介します。

counter とは

counterは擬似要素内で使用することで自動的に連番を振る仕組みです。
counter-resetを使ってカウンターを初期化し、counter-incrementで値を増やすことで、柔軟に番号を操作できます。

Stepper コンポーネントとは

Stepper コンポーネントは、ユーザーが手順を踏んで進むような UI に使われる要素です。
例えば、フォームの入力ステップや、EC サイトの購入フローなどでよく見られます。

通常、React で Stepper を実装する場合は、map() を使って index + 1 で番号を管理することが多いと思いますが、CSS の counter を使えば、JavaScript で番号を管理せずに実装できます。

React で Stepper コンポーネントを作る

それでは早速作ってみましょう。
各ステップに counter を使って番号を振り、スタイルを適用した Stepper コンポーネントを作成します。

以下の画像のようなコンポーネントを作っていきます。

Stepper コンポーネントの用意

この記事では各ステップのデータとして以下の配列を用意し、ループでリストを表示します。

const steps = [
  { id: 1, title: "ステップ 1" },
  { id: 2, title: "ステップ 2" },
  { id: 3, title: "ステップ 3" },
  { id: 4, title: "ステップ 4" },
  { id: 5, title: "ステップ 5" },
];

export default function App() {
  return (
    <div>
      <ul className="steps">
        {steps.map((item) => (
          <li key={item.id} className="step">
            {item.title}
          </li>
        ))}
      </ul>
    </div>
  );
}

CSS の実装

続いて CSS の実装です。

.steps {
  list-style: none;
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  counter-reset: step;
}

.step {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: 40px 1fr;
  place-items: center;
  text-align: center;
  width: 120px;

  /* 番号(counter) */
  &:after {
    content: counter(step);
    counter-increment: step;
    z-index: 1;
    background-color: #1e90ff;
    width: 40px;
    height: 40px;
    place-content: center;
    border-radius: 9999px;
    color: #fff;
    grid-column-start: 1;
    grid-row-start: 1;
  }

  /* (ステップ間の線) */
  &:before {
    content: "";
    height: 12px;
    width: 100%;
    grid-column-start: 1;
    grid-row-start: 1;
    background-color: #1e90ff;
    margin-inline-start: -100%;
  }
}

.step:first-child:before {
  content: none;
}

CSS 実装のポイントは 3 つです。

• counter-reset で step を初期化

CSS カウンターを利用するためにはcounter-resetで値を初期化する必要があります。
この記事の例では step という名前のカウンターを0に設定しています。

counter-reset: step; /* 任意の名前 */

• counter 値の変更

counter-increment を使うと、カウンターの値を増やしたり減らしたりできます。
counter-increment: step;は1ずつ増加（デフォルト）。counter-increment: step 2;のようにすれば2ずつ増やせます。

/* +1 */
counter-increment: step;

/* +2 */
counter-increment: step 2;

/* -1 */
counter-increment: step -1;

• counter の表示

カウンターはcounter()関数を擬似要素のcontentで使用することで表示することができます。
counter()の前後にテキストを入れることも可能です。

.step:before {
  content: counter(step);
}

.step:before {
  content: "テキスト" counter(step) "テキスト";
}

さいごに

この記事では、CSS のcounterを活用して連番を付ける方法を紹介しました。map()のindexを使って番号を管理する方法もありますが、以下のように用途に応じた使い分けができます。

• デザインとして番号をつけたい場合→ CSS のcounterを使用
• データとして現在のステップを管理したい場合など→ React(JavaScript) で管理

用途に応じて適切な方法を選択し効率的な実装を目指しましょう。

参考記事

MDN:CSS カウンターの使用 What are counters in CSS