3 ステップ進捗インジケータ

解説

このスニペットは、入力・確認・完了といったフォームの進み具合を示す 3 段階のステップインジケータです。マークアップは nav の中の ol で意味づけし、各 li に番号の丸とラベルを置いています。完了した段階には is-done、現在の段階には is-act というクラスを付けるだけで色が切り替わる設計で、ステップをつなぐ横線は ol::before の疑似要素で引いています。

使う場面

• 会員登録や購入手続きなど、複数画面にまたがるフォーム
• 申し込みウィザードで、今どこにいるかを示したいとき
• オンボーディングの進行表示

状態の切り替えはクラスの付け外しだけなので、サーバー側でも JavaScript でも制御できます。ステップ数を増やすときは li を足し、横線の left と right の余白値を見直してください。アクセシビリティ面では、nav に aria-label を付けてあり、現在地を明確にするため aria-current を現在のステップに追加するとさらに読み上げに親切です。色は丸の背景色を変えるだけでブランドに合わせられます。