「ご利用の流れ」ステップ表示セクション（HTML・CSS）

「ご利用の流れ」ステップ表示セクション（HTML・CSS）: 用途

3つか4つのステップのセクションがあれば、申し込み、注文、予約の方法が数秒で伝わり、訪問者が離脱する原因となる疑問を解消できます。1行に1ステップを書き、配置を選びます。番号を点線でつないだ横並び、線を横に置いた縦並び、またはカード形式です。

コードは順序付きリスト（ol）と番号用のCSSカウンターを使っているため、スクリーンリーダーで正しく読み上げられ、スマートフォンでは縦並びになり、LINEやWhatsAppのリンクなどの行動ボタンで締めくくれます。

使い方

1. ステップを1行に1つずつ書きます。
2. 配置、色、ボタンを選びます。
3. コードをサイトにコピーします。

使うタイミング

• サービスの申し込み方法。
• 注文の方法。
• アプリや講座の仕組み。

よくある質問

ステップはいくつがよいですか？

3つか4つが理想です。訪問者がひと目でプロセスを理解できます。ステップが多い場合は似たものをまとめ、詳細はよくある質問のページに回しましょう。

なぜコードに順序付きリストを使うのですか？

ステップには順番があり、順序付きリスト（ol）はそれをスクリーンリーダーに伝え、「3項目のリスト」と各項目の番号を読み上げます。大きな数字はCSSのカウンターで描画するため、テキストに番号を重ねて書く必要はありません。

最後にボタンを置けますか？

できますし、おすすめです。流れを説明したら、次の行動を促しましょう。ボタンのテキストとリンクを入力すると、ステップの下に表示されます。

本当に無料？

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

関連ツール