横並びステップ流れ図
「ご依頼の流れ」や「ご利用の手順」を、4つのステップとして横一列に並べる流れ図です。 <ol> で番号付きリストとして意味付けし、 grid-template-columns:repeat(4,1fr) で等幅に配置しています。
このパーツの使いどころと実装ポイント
「ご依頼の流れ」や「ご利用の手順」を、4つのステップとして横一列に並べる流れ図です。<ol> で番号付きリストとして意味付けし、grid-template-columns:repeat(4,1fr) で等幅に配置しています。各ステップは丸いアイコン・番号・見出し・説明文がワンセットで、視線が左から右へ自然に流れます。
破線でつなぐ仕組み
ステップ同士をつなぐ点線の矢印は、画像ではなく ::after 疑似要素と repeating-linear-gradient で描いています。アイコンの背後を横切る一本の破線が「進む」イメージを与え、余計な装飾画像を読み込まずに済むのが利点です。アイコンはインライン SVG なので拡大しても鮮明です。
向く場面と注意
- 制作・コンサルなどサービス業の依頼フロー
- 申込みから利用開始までの手順説明
- 採用ページの選考ステップ
ステップ数を変えるときは repeat(4,1fr) の数字と破線の位置を合わせて調整します。モバイルでは横並びが窮屈になるため、2列または縦一列へ切り替える指定を必ず入れてください。SVG アイコンには aria-hidden="true" を付け、見出しテキストで内容が伝わる構造にしています。
よくある質問
ステップ数を4つから変えられますか。
変えられます。グリッドのrepeat(4,1fr)の数字をステップ数に合わせて変更し、つなぎの破線を引く左右の位置も合わせて調整してください。3ステップや5ステップにも対応できます。
ステップをつなぐ矢印は画像ですか。
画像ではありません。CSSの疑似要素とrepeating-linear-gradientで破線を描いているため、追加の画像読み込みがなく軽量です。色や破線の間隔もCSSだけで調整できます。