縦型タイムライン
沿革やステップを上から下へ時系列で並べる 縦型タイムライン です。左側に縦のラインを ::before 擬似要素で1本引き、各項目には丸いドットを position:absolute で重ねて、ラインの上に点が並ぶ見た目を作っています。
解説
沿革やステップを上から下へ時系列で並べる縦型タイムラインです。左側に縦のラインを ::before 擬似要素で1本引き、各項目には丸いドットを position:absolute で重ねて、ラインの上に点が並ぶ見た目を作っています。日付・タイトル・本文を持つカードを縦に積むだけのシンプルな構造で、JavaScript は不要です。縦線にはグラデーションを使い、単調にならないよう仕上げています。
こんな場面に向きます
- 会社概要ページの沿革・ヒストリー
- サービス利用の流れや申し込みステップの説明
- プロジェクトの進行状況やロードマップの提示
項目を増やすには timeline__item のブロックをコピーするだけで縦線が自動で伸びます。色はドットと縦線の値をそろえて変更すると整います。ドットや日付には意味の伝わる文言を入れ、見出しは h3 のままにして文書構造を保つと読み上げ環境でも理解しやすくなります。カード幅は max-width で調整できます。
よくある質問
項目を増やすにはどうすればいいですか
timeline__item のブロックをそのまま複製し、日付・見出し・本文を書き換えるだけです。縦のラインは項目数に応じて自動で伸びます。
左右交互に配置するレイアウトにできますか
このサンプルは左寄せの一列型ですが、各項目の左右マージンを交互に切り替えれば、中央線をはさんで左右に並べる形にも発展できます。