ステッパー進行状況
フォームや申し込みの進み具合を「1.基本情報 → 2.確認 → 3.完了」のように見せるステッパーです。各ステップは丸い stepper__icon とラベルで構成され、状態は3つ。完了は stepper__step--done で緑＋チェックマーク、現在地は stepper__step--active で青、未到…
解説
フォームや申し込みの進み具合を「1.基本情報 → 2.確認 → 3.完了」のように見せるステッパーです。各ステップは丸い stepper__icon とラベルで構成され、状態は3つ。完了は stepper__step--done で緑＋チェックマーク、現在地は stepper__step--active で青、未到達は薄いグレーの枠線で表します。ステップ同士をつなぐ横線は ::before の擬似要素で引いており、余計なHTMLを増やしていないのが工夫です。render() が現在位置 cur を基準に各クラスを付け替え、「次へ」「戻る」ボタンの有効・無効も切り替えます。
使う場面
- 会員登録や購入手続きなど複数段階のウィザード
- アンケートやオンボーディングの進捗表示
- 設定画面のセットアップフロー
ステップ数は HTML の stepper__step を増減するだけで変えられ、JavaScript 側は自動で本数に追従します。最後のステップでは「次へ」が「完了」に変わります。色は done と active の背景色を差し替えればテーマに合わせられます。現在ステップを aria-current="step" で示すと、読み上げ環境でも今どこにいるかが伝わります。
よくある質問
ステップ数を増やすには？
HTMLでstepper__stepのブロックを必要な数だけ追加するだけです。JavaScriptは要素数を自動で数えて動くため、本数を変えても最後のステップで完了表示に切り替わる挙動はそのまま保たれます。
クリックで任意のステップに飛べますか？
標準は次へと戻るで1段ずつ進む作りです。各ステップのアイコンにクリックイベントを足し、cur変数にそのステップ番号を代入してrenderを呼べば、好きな段階へジャンプさせることもできます。