沿革タイムライン（縦）

このパーツの使いどころと実装ポイント

このパーツは、年号と出来事を縦に積み上げる「会社沿革タイムライン」です。意味的に順序を持つ内容なので <ol>（順序付きリスト）で組み、各項目を grid-template-columns:80px 24px 1fr の 3 カラムに分けて、年・縦線エリア・本文を整列させています。リスト全体には ::before で縦の罫線を引き、年表らしい一本線を背景に通しているのが構造上の特徴です。

向いている場面

会社の歩みや成長の節目を時系列で見せたい場面に向きます。コーポレートサイトの会社概要、創業から現在までを語る About ページ、周年記念サイトの沿革紹介などです。年ごとに見出し（<h3>）と補足（<p>）を持てるので、出来事に簡単な説明を添えられます。

カスタマイズの勘所

• <li> をコピーして年表の行を増減します。年は <time> 要素なので機械可読でもあります。
• 縦線の位置を変えたいときは ::before の left とグリッドの 1 列目の幅を合わせて調整します。

実装上の注意として、<time> 要素には可能なら datetime 属性で年月を補うと、より正確に伝わります。項目数が多くなると縦に長くなるため、スマートフォンでは年と本文の段組みが窮屈にならないよう余白を確認してください。JavaScript は使っておらず、表示は静的です。