ジグザグ 5 ステップフロー

このパーツの使いどころと実装ポイント

このパーツは、工程を 01〜05 の番号付きで縦に並べ、奇数と偶数のステップを左右交互（ジグザグ）に配置するフローです。flex-direction:row-reverse を :nth-child(even) に当てることで左右を入れ替え、中央には ::before 疑似要素でグラデーションの縦ラインを通して「つながり」を視覚化しています。番号の丸はダークネイビーに黄色の数字で、各工程の見出しと説明文を白いカードに収めた構成です。

向いている場面

• 制作会社やコンサルの「ご依頼から納品までの流れ」
• 申込みから利用開始までの手順が多めのサービス紹介
• 採用ページの選考フローや、施工・修理の工程説明

カスタマイズと実装の注意

ステップ数は fl-zz__s ブロックを増減させるだけで変わり、番号は手入力なので追加時に連番を振り直します。各工程に所要時間や担当を p に足すと具体性が出ます。左右交互のレイアウトは横幅が狭いと窮屈になるため、スマホでは中央ラインを左端へ寄せ、すべて同じ向きの縦並びへ切り替えると読みやすくなります。番号の span はあくまで装飾なので、見出しは h3 として正しく階層化し、検索エンジンや読み上げに工程名が伝わるようにしてください。