縦型タイムラインフロー
このパーツは、サービス利用の流れをステップ番号付きの縦タイムラインで示すセクションです。各ステップは ol （番号付きリスト）で並び、リスト全体の左側に ::before で縦のラインを引いています。PCでは中央線を軸に左右交互の配置になり、スマホでは左側に1列で積み上がる、レスポンシブな構成です。
このパーツの使いどころと実装ポイント
このパーツは、サービス利用の流れをステップ番号付きの縦タイムラインで示すセクションです。各ステップは ol（番号付きリスト）で並び、リスト全体の左側に ::before で縦のラインを引いています。PCでは中央線を軸に左右交互の配置になり、スマホでは左側に1列で積み上がる、レスポンシブな構成です。
向いている場面
問い合わせから納品までの手順を説明したいサービスサイトに向きます。たとえば「相談→見積もり→契約→制作→納品」と進むWeb制作や士業、来店予約から施術までの流れを見せたいサロン、入会手続きの案内が必要な教室などで使えます。
カスタマイズの勘所
ステップを増減するには li を追加・削除し、番号（01・02…）を順に振り直します。番号の数字を大きく見せたり、各ステップにアイコンを足したりすると、視線の流れが作りやすくなります。
- 順序が意味を持つ内容なので
olを使うのが適切です - 左右交互レイアウトは説明文が長いと左右で高さがずれやすいため、文章量はそろえると整います
よくある質問
ステップの数は増やせますか？
増やせます。各ステップはリストの項目として独立しているので、項目を追加してステップ番号を振り直すだけで対応できます。3ステップでも6ステップでも、縦のラインが自動で伸びて全体がつながって見えます。
PCの左右交互レイアウトをやめて1列にできますか？
できます。左右交互は画面が広いときだけの表示で、CSSのメディアクエリで切り替えています。常に1列の縦並びにしたい場合は、その切り替え部分を外せば、PCでもスマホと同じ左寄せの1列レイアウトになります。