ジグザグ配置の導入ステップ

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

このパーツは、導入や申し込みの流れを縦のタイムライン上にジグザグ配置で見せるステップ表現です。中央に ::before で 1 本の縦線を引き、奇数ステップは左、偶数ステップは右へ箱を振り分けます。左右の出し分けは nth-child(odd) に flex-direction:row、nth-child(even) に row-reverse を当てて実現しており、番号バッジは position:absolute で中央線の真上に固定されます。マークアップは ol と li を使った順序付きリストなので、意味のうえでも「手順」であることが伝わります。

向いている場面

問い合わせから納品までの流れ、サービス利用開始までの手順、採用選考のステップなど、順番が決まったプロセスを 3〜5 段階で示したいときに向きます。左右に振ることで視線が自然に下へ誘導され、単調な縦並びより読み進めやすくなります。

カスタマイズの勘所

• ステップを追加するときは li.zz__step をコピーし、番号 zz__n を振り直すだけで、左右の交互配置は自動で続きます。
• 箱と中央線の間隔は margin-right と margin-left の 60px で調整します。

レスポンシブでは 600px 以下になると中央線が左端へ寄り、全ステップが左に番号、右に箱の縦一列レイアウトへ切り替わります。スマートフォンで横振りを維持すると箱が窮屈になるため、この片寄せの切り替えが読みやすさを保ちます。