サイト用ステップバー（HTMLとCSSのステッパー）

サイト用ステップバー（HTMLとCSSのステッパー）: 用途

今どのステップにいるかを示すバーを作成します：カート、配送、支払い、確認。情報、住所、確認。注文受付、準備中、配送中、など。1行に1ステップずつ書き、現在のステップ、向き、色を選びます。完了したステップにはチェックが付き、ステップ間の線が進行に合わせて伸びます。

コードは順序付きリストを使い、現在のステップには aria-current="step" を付け、スクリーンリーダー向けに「完了」の非表示のお知らせを入れます。横向きで画面が狭い場合は、番号と現在のステップ名だけが表示されます。JavaScriptでステップを切り替える関数 irPara(n) も付いています。

使い方

1. ステップを1行に1つずつ書きます。
2. 現在のステップ、向き、色を選びます。
3. コードをコピーするか、HTMLをダウンロードします。

使うタイミング

• ネットショップのチェックアウト。
• 複数ページの登録フォーム。
• 注文状況の確認。

よくある質問

ステップバーはアクセシブルですか？

はい。順序付きリスト（ol）なので、スクリーンリーダーがステップ数と各ステップの位置を読み上げます。現在のステップには aria-current="step" が付き、完了したステップには「完了」と書かれた非表示のテキストが付きます。

スマートフォンでも動きますか？

横向きの場合、狭い画面では、テキストが詰まらないよう、番号と現在のステップ名だけが表示されます。縦向きはどの画面でも同じように動作し、注文状況の確認に向いています。

JavaScriptで現在のステップを変えるには？

クラスを入れ替えます。前のステップには feito、現在のステップには atual と aria-current="step" を付け、後のステップにはクラスを付けません。生成されたコードには、これを行う関数 irPara(n) が含まれています。

本当に無料？

はい、100%無料です。登録不要、サブスクなし、利用制限なし。すべてのツール：Tools123は無料です。

関連ツール