ジグザグ年表タイムライン

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

このパーツは、出来事を中央線の左右へ交互に振り分けて見せるジグザグ型の沿革タイムラインです。ol の各 li を display:flex にし、偶数番目だけ :nth-child(even) で flex-direction:row-reverse に反転させることでジグザグを作ります。中央の縦線は擬似要素 ::before を position:absolute で left:50% に立て、linear-gradient で上から色を抜くグラデーションにしています。

向いている場面

会社の沿革、ブランドやプロダクトの歴史、プロジェクトの進行履歴など、時系列を物語として読ませたい場面に向きます。年号（time 要素）と見出し・本文の組で1件を表すため、コーポレートサイトの About や採用ページの成長ストーリーに馴染みます。

カスタマイズと注意点

• 年号には意味的に正しい <time> が使われています。datetime 属性を足すと機械可読性が上がります。
• 項目を増やすときは li を順に足すだけで左右が自動で交互になります。並び順を変えると左右配置も入れ替わる点に注意します。
• スマホでは左右振り分けが窮屈になりがちです。狭い画面では中央線を左端へ寄せ、全項目を右側に揃える片側レイアウトへ切り替えると読みやすくなります。