番号付きフロー ステップ
「番号付きフロー ステップ」は、依頼から納品までの流れを 01・02…と連番を振った横並びのステップ で見せるセクションです。各ステップは ol 要素のリスト項目として組まれ、CSS Grid の grid-template-columns:repeat(4,1fr) で4段を均等幅に並べています。
このパーツの使いどころと実装ポイント
「番号付きフロー ステップ」は、依頼から納品までの流れを01・02…と連番を振った横並びのステップで見せるセクションです。各ステップは ol 要素のリスト項目として組まれ、CSS Grid の grid-template-columns:repeat(4,1fr) で4段を均等幅に並べています。番号・見出し・短い説明文の3点構成なので、初見の訪問者でも「次に何が起きるか」を直感的につかめます。
向いている場面
- Web制作会社やリフォーム会社の「ご依頼の流れ」
- 士業・コンサルの相談から契約までの案内
- クリニックや教室の予約〜初回までの導線
ステップ数は4段が基準ですが、項目を増減するなら grid-template-columns の列数を中身に合わせて変えるのが勘所です。番号の色やキッカー文字（FLOW）はブランドカラーに差し替えるだけで印象が変わります。
実装上の注意
番号は装飾なので aria-hidden="true" を付け、読み上げの邪魔にならないようにしています。狭い画面では4列のままだと窮屈になるため、メディアクエリで縦積みへ切り替える設計が必須です。ステップ間をつなぐ接続ラインは position を使った擬似要素で描くことが多く、縦積み時には向きを変えるか非表示にすると崩れません。
よくある質問
ステップの数は4つから変えられますか
変えられます。リスト項目を追加・削除し、CSSの grid-template-columns の列数を実際の項目数に合わせて調整してください。3つや5つでも均等幅で並びます。モバイルでは縦積みになるので段数が増えても破綻しにくい構造です。
ステップをつなぐラインは消せますか
消せます。接続ラインは擬似要素で描いているため、その指定を外せば番号と説明だけのシンプルな表示になります。縦積み時にラインが不自然なら、モバイル幅で非表示にする方法もよく使われます。