多段ステップ進捗インジケータ
多段ステップインジケータは、申込や予約のように画面をまたぐフローで「 いま何ステップ目か 」を示す進捗バーです。この実装は <ol> の各 <li> を等幅に並べ、 counter-reset と counter-increment を使って番号を自動採番し、 ::before 擬似要素で丸…
解説
多段ステップインジケータは、申込や予約のように画面をまたぐフローで「いま何ステップ目か」を示す進捗バーです。この実装は <ol> の各 <li> を等幅に並べ、counter-reset と counter-increment を使って番号を自動採番し、::before 擬似要素で丸い番号バッジを描いています。完了済みは is-done、現在地は is-current というクラスで色を切り替えるだけなので JavaScript は要りません。
使いどころ
- 情報入力 → 内容確認 → 完了といった注文フロー
- 会員登録やアンケートのウィザード
- 長いフォームの離脱を防ぎたい場面
ステップ数を増やしたいときは <li> を足すだけで、幅とカウンターが自動で調整されます。色は完了・現在・未到達の 3 状態で変えると進行が直感的になります。注意点として、現在のステップを色だけで示すと色覚特性のある人に伝わりにくいため、aria-current="step" を付けたり太字にしたりして、色以外の手がかりも添えると親切です。
使用例・適したシーン
- お問い合わせフォーム
- ニュースレター登録
- 資料請求フォーム
- ログイン・新規登録
よくある質問
ステップ数を 3 つから増やせますか？
はい。リスト項目を追加するだけで、幅は flex で均等に再配分され、番号も CSS カウンターが自動で振り直します。HTML を足すだけで済み、番号を手書きする必要はありません。
完了したステップにチェックマークを出せますか？
is-done クラスが付いた項目の ::before の content を、番号の代わりにチェック記号や SVG に差し替えれば実現できます。完了済みと現在地で背景色も変えると、進み具合がさらに分かりやすくなります。