縦型ステップフロー
これは、導入や問い合わせから提案までの流れを、番号付きで縦に並べて見せるステップフローです。各ステップを display:flex で番号と説明の横並びにし、左側に border-left でつながる縦線を引いて時系列を表現します。
このパーツの使いどころと実装ポイント
これは、導入や問い合わせから提案までの流れを、番号付きで縦に並べて見せるステップフローです。各ステップを display:flex で番号と説明の横並びにし、左側に border-left でつながる縦線を引いて時系列を表現します。番号の丸は position:absolute で線の上に重ね、border-radius:50% の円バッジにしています。最後のステップだけ border-color:transparent で線を消し、終端をきれいに見せています。
向いている場面
申し込みから納品までの手順を説明するサービスサイト、来店・予約の流れを案内する店舗、オンボーディングを示す SaaS など、順序のある工程を分かりやすく伝えたい場面に向きます。番号と縦線で「次に何が起きるか」が直感的に伝わります。
カスタマイズと注意
- ステップ数は
vf__sを増減するだけで調整できます。各ステップの説明は 1〜2 文に抑えると読みやすいです - 縦線の色や番号バッジの背景色を変えるとブランドに合わせられます
- 番号バッジは
position:absoluteで配置しているため、左の余白（margin-left）とバッジ幅の関係が崩れると重なります。値はセットで調整してください - 意味的には順序リスト（
ol）で組むと、構造がより明確になります
よくある質問
ステップの数は 3 つから増やせますか
増やせます。ステップのブロックを追加すれば縦線も自動で伸びます。最後のステップだけ縦線を消す指定があるため、追加した最終ステップにその設定を移すと、終端がきれいに収まります。
番号の丸が縦線とずれてしまうのですが
番号バッジは絶対配置で左の縦線に重ねているため、左の余白とバッジの幅・位置の値がかみ合っていないとずれます。バッジの left 値とコンテナの margin-left をセットで見直すと、線の中央に丸が乗るよう調整できます。