プロセス 4 ステップ横並び
「ご依頼から納品まで」のような流れを 4 つのステップで横並びに見せる手順セクションです。順序のある内容なので ol でマークアップされ、各ステップが li ひとつに対応します。並べ方は grid-template-columns:repeat(auto-fit,minmax(180px,1fr)) で、画面幅に応…
解説
「ご依頼から納品まで」のような流れを 4 つのステップで横並びに見せる手順セクションです。順序のある内容なので ol でマークアップされ、各ステップが li ひとつに対応します。並べ方は grid-template-columns:repeat(auto-fit,minmax(180px,1fr)) で、画面幅に応じて 4 列から 2 列・1 列へ折り返します。番号は border-radius:50% の丸バッジに inline-flex で中央寄せして配置し、等幅フォントで桁を揃えています。各カードは影と角丸の控えめな装飾だけで、JavaScript は使わず CSS のみで成立します。
使う場面
- サービス LP の「ご利用の流れ」
- 申し込みから開始までの手順紹介
- 制作・サポートのプロセス説明
ステップを増減するときは li を足し引きするだけで、グリッドが幅を均してくれます。番号バッジの色やサイズ、見出しの大きさを変えると印象が変わります。視覚的には横並びですが、内容は番号付きの順序なので、ol のままにしておくことが読み上げ環境への配慮になります。各ステップの説明は 1 行程度に絞ると、流れ全体を一目で把握しやすくなります。背景色を変えれば暗い配色のサイトにも移植できます。
使用例・適したシーン
- コーポレートサイト構築
- サービス LP
- 採用ページ
- 事業紹介資料 Web 版
よくある質問
ステップ数を 4 から 3 や 5 に変えられますか？
はい。HTML の li を足し引きするだけで構いません。auto-fit のグリッドが残りのステップを均等幅に並べ直すため、CSS の列指定を書き換える必要はありません。番号は手動で振り直してください。
スマホでは横並びが崩れませんか？
minmax(180px,1fr) の指定により、横幅が足りなくなると自動で 2 列・1 列へ折り返します。狭い画面でも各ステップが潰れず縦に積まれるため、特別な調整なしでスマホ表示に対応します。