シンプル縦タイムライン
会社の沿革や歴史を縦一列で見せるタイムラインです。各項目を flex で「年」と「内容」の2列に分け、左側のボーダーで縦の軸を描いています。年号は position:absolute で軸の外側へ寄せ、各項目の先頭には ::before の擬似要素で丸いドットを置いて、節目を視覚的に示しているのが構造上の特徴です。
このパーツの使いどころと実装ポイント
会社の沿革や歴史を縦一列で見せるタイムラインです。各項目をflexで「年」と「内容」の2列に分け、左側のボーダーで縦の軸を描いています。年号はposition:absoluteで軸の外側へ寄せ、各項目の先頭には::beforeの擬似要素で丸いドットを置いて、節目を視覚的に示しているのが構造上の特徴です。HTMLは年・見出し・短い説明という素直な繰り返しなので、項目の追加や削除がしやすくなっています。
向いている場面
- 会社概要ページの「沿革」や創業からの歩み
- 商品やサービスのアップデート履歴、バージョン年表
- プロジェクトの進行フェーズや導入ステップの紹介
カスタマイズの勘所
項目を増やすときはtvs__iのブロックをそのまま複製し、年・見出し・本文を書き換えるだけで済みます。ドットの色は#3b82f6で指定しているので、ブランド色に合わせて変えると統一感が出ます。年号と軸の間隔はleftの値で決まるため、4桁の西暦が窮屈なら余白を調整してください。スマートフォンでは年号が画面外にはみ出さないよう、狭い幅では年を内容の上に重ねるレイアウトへ切り替えると読みやすくなります。意味の順序が大切な内容なので、見出しにはstrong相当の太字を保つと階層が伝わります。
よくある質問
年号を「2024年4月」のように月まで入れても崩れませんか？
年号は軸の左外側に絶対配置しているため、文字数が増えると左にはみ出すことがあります。月まで入れる場合は年号の表示幅と左方向の余白を見直すか、月だけ小さめの文字で本文側に添えると安定します。
スマートフォンでも縦軸はきれいに表示されますか？
縦並びの構造自体は狭い画面でも崩れにくいですが、年号が軸の外に出る分だけ左の余白が必要です。画面が狭い場合は、年号を各項目の見出しの上に移すレイアウトに切り替えると窮屈さがなくなります。