横型タイムライン
年表を横方向に並べた沿革タイムラインです。 .th__r を display:flex で横並びにし、各項目（ .th__i ）を flex:1 で等分配置しています。背景の横線は ::before 疑似要素で 1 本引き、その上に年（ span ）のバッジと出来事の説明を載せる構成です。
このパーツの使いどころと実装ポイント
年表を横方向に並べた沿革タイムラインです。.th__r を display:flex で横並びにし、各項目（.th__i）を flex:1 で等分配置しています。背景の横線は ::before 疑似要素で 1 本引き、その上に年（span）のバッジと出来事の説明を載せる構成です。親に overflow-x:auto と min-width を指定しているため、項目が増えると横スクロールで続きを見せられます。
向いている場面
会社の沿革、ブランドの歩み、プロジェクトの進行履歴を時系列で見せたい場面に向きます。たとえば創業からの節目を並べる会社案内、サービスのバージョン履歴、店舗の成長ストーリーなどです。縦型の年表より省スペースで、数年分を一画面に収めたいときに効果的です。
カスタマイズの勘所
- 年バッジ（
span）は濃色で強調されているので、ブランドカラーに変えると馴染みます。 - 項目は
flex:1で等分されるため、説明文の長さがばらつくと高さが揃わない点に注意してください。 - 節目が多い場合は
min-widthを広げ、横スクロールで読ませる設計が自然です。
横スクロール領域はマウスだけだと気づかれにくいことがあるため、スクロールできることを示すヒントを添えると親切です。SP では各項目の幅が狭くなりすぎないよう min-width の調整を検討してください。
よくある質問
沿革の項目を増やすと横にはみ出しませんか？
親要素に横スクロールが設定されているため、項目が増えて画面幅を超えると横スクロールで続きを見せられます。項目数が多いときは全体の最小幅を広げると各項目が潰れず、年と出来事が読みやすい間隔を保てます。
横スクロールに気づいてもらうにはどうすればいいですか？
マウス利用者には横スクロールが気づかれにくいため、右端をうっすらフェードさせて続きがある気配を出したり、矢印や「左右にスクロール」の小さな案内を添えると親切です。スマホでは指でのスワイプが自然なので、項目の幅を詰めすぎないことが大切です。