沿革タイムラインセクション
創業から現在までの歩みを縦に並べる沿革セクションです。並び順を持つ内容なので ol （順序付きリスト）でマークアップされており、各年の出来事が li ひとつに対応します。左に縦の線を引くのは ::before 疑似要素で、リスト全体に position:relative 、線に position:absolute…
解説
創業から現在までの歩みを縦に並べる沿革セクションです。並び順を持つ内容なので ol（順序付きリスト）でマークアップされており、各年の出来事が li ひとつに対応します。左に縦の線を引くのは ::before 疑似要素で、リスト全体に position:relative、線に position:absolute を当てて実現しています。各項目の丸い点も ::before で描き、年と本文は grid-template-columns:80px 1fr で 2 列に揃えています。画像も JavaScript も使わず、CSS だけで縦のタイムラインを描きます。
使う場面
- 会社概要ページの沿革・歴史
- プロジェクトやサービスのアップデート年表
- 創業ストーリーをステップで語る紹介ページ
項目を増やすときは li を足すだけで線と点が自動で伸びます。縦線の位置（left:80px）は年の列幅と揃えているので、年の桁数を変えたら列幅と線の位置を一緒に調整してください。点と背景の縁取りの色を変えるとブランドに馴染みます。年は等幅フォントで右寄せにして桁を揃えると整然と見えます。色の対比だけに頼らず、点には十分なサイズを確保しておくと見やすくなります。
使用例・適したシーン
- コーポレートサイト構築
- サービス LP
- 採用ページ
- 事業紹介資料 Web 版
よくある質問
縦線の位置がずれてしまいます。
縦線は left の固定値で位置を決めており、年（左列）の幅と揃える必要があります。年の桁数や列幅（grid-template-columns の 80px）を変えたら、線の left の値と点の left も同じだけ動かしてください。
年の表示順を新しい順に変えられますか？
HTML 内の li の並び順を入れ替えるだけで表示順が変わります。視覚は順序に従うため、新しい出来事を上に置きたい場合は li を上から新しい順に書いてください。線と点は自動で追従します。