横スクロール年表

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

このパーツは、年表を縦ではなく横方向に並べ、overflow-x:auto で横スクロールさせるタイムラインです。各マイルストーンは display:flex で一列に並び、min-width:max-content によって内容の幅ぶん横に伸びます。中央には position:absolute で配置したグラデーションの横線が通り、各カードの上に点（::before）が乗って時系列のつながりを示します。

向いている場面

創業から現在までの沿革、プロダクトのバージョン進化、プロジェクトの進捗フェーズなど、出来事を順番に途切れず見せたいときに向きます。会社案内の「沿革」、採用ページの「成長ストーリー」、サービスの「これまでの歩み」といった文脈で使いやすい構成です。

カスタマイズの勘所

• time・h3・p の組を増減すれば項目数を自由に変えられる
• 各カードの min-width を変えると 1 画面に見える件数を調整できる
• 横線のグラデーション色をブランドカラーに差し替えると統一感が出る

注意点として、横スクロールは存在に気づかれにくいので、端をわずかに見切れさせたり「右にスクロール」の合図を添えると親切です。マウスを持たない環境ではスワイプ操作が前提になります。スクリーンリーダー利用者のため、年は time 要素を活かし、見出しの順序が時系列と一致するように保ってください。