横並び番号付きフロー
4 つのステップを横一列に並べ、番号付きの円で順序を示す導入フローです。各ステップは display:flex と justify-content:space-between で等間隔に配置し、背景には ::before 擬似要素で 1 本の横線を引いて、円どうしがつながって見えるよう工夫されています。
このパーツの使いどころと実装ポイント
4 つのステップを横一列に並べ、番号付きの円で順序を示す導入フローです。各ステップは display:flex と justify-content:space-between で等間隔に配置し、背景には ::before 擬似要素で 1 本の横線を引いて、円どうしがつながって見えるよう工夫されています。番号の円（48px）は濃紺で、その下に短い説明を添えるシンプルな構造です。
向いている場面
- 問い合わせから制作開始までの流れ説明
- 申し込み・審査・利用開始といったサービス導入手順
- 採用フローや見積もりの進め方の案内
横線は left:10%; right:10% で両端の円を避けて引かれているため、ステップ数を変えても線の見た目が破綻しにくいのが利点です。
実装上の注意
横並びはステップが 5〜6 個になると狭い画面で文字が詰まります。一定幅以下では縦並びに切り替え、番号の円を左、説明を右に置く配置にすると読みやすくなります。順序を持つ情報なので、見た目だけでなく ol と li でマークアップすると意味が正しく伝わり、読み上げ環境でも順番が理解できます。番号は装飾ではなく内容の一部として扱うのが望ましいです。
よくある質問
ステップ数は4つから変えられますか。
変えられます。ステップ要素を追加・削除するだけで自動的に等間隔に並びます。ただし横並びは6個程度が限界で、それ以上は文字が詰まるため、数が多い場合は縦並びへの切り替えや2段組を検討してください。
背景の横線がうまくつながりません。
横線は::before擬似要素でleftとrightを10%ずつ空けて引いています。ステップ数や円のサイズを大きく変えると端の余白がずれることがあるので、円の中心に合うよう左右の値を調整すると整います。