縦タイムライン形式の流れ
縦に伸びる 1 本の線でステップをつなぐ、工程説明向けのタイムラインです。マークアップは順序のある工程なので ol を使い、各 li を display:flex で「番号 + 内容ブロック」の横並びにしています。
このパーツの使いどころと実装ポイント
縦に伸びる 1 本の線でステップをつなぐ、工程説明向けのタイムラインです。マークアップは順序のある工程なので ol を使い、各 li を display:flex で「番号 + 内容ブロック」の横並びにしています。背骨となる縦線は ::before の擬似要素を position:absolute で固定し、番号の円の裏側を通すことで「線で結ばれた流れ」を表現しています。
向いている場面
制作の進め方、導入までのステップ、サービス利用フローなど、順番が意味を持つ説明に向きます。Web 制作会社の「相談→提案→デザイン→公開」、士業の「ご相談→お見積り→契約→対応」、サブスク型サービスのオンボーディング案内などが典型です。各ステップに所要日数や担当を添えると、依頼後のイメージが具体的になります。
カスタマイズの勘所
- ステップは 3〜5 個が読みやすい上限です。多い場合は大きな段階でまとめ直します。
- 各
liの見出しはh3、補足はpにして見出し階層を崩さないようにします。 - 番号の円のサイズと縦線の
left位置を揃えないと、線が円の中心からずれて見えます。
スマートフォンでは番号と本文を縦積みにせず、番号を小さくして横並びを保つほうが「タイムライン感」が残ります。色覚に配慮し、線と背景のコントラストは明確に取ってください。
よくある質問
番号付きリストは ol と ul のどちらで作るべきですか。
工程には順序があるため ol が適切です。olを使うと、CSSでデザインを外しても番号と順番の意味が伝わり、スクリーンリーダーでも何番目のステップかが正しく読み上げられます。
ステップが6個以上ある場合はどうすればよいですか。
細かい作業を大きな段階にまとめ直すのがおすすめです。たとえば「採寸」「設計」「材料発注」を「準備フェーズ」とまとめると、全体像が一目で伝わり離脱を防げます。詳細は各ステップの本文で補足してください。