カード型タイムライン
左右に交互へ並ぶカード型の年表です。 ol.tlc の ::before で中央に縦線を1本引き、各 li を幅50%にして奇数を左寄せ・偶数を右寄せに配置することで、1本の軸の両側にカードが振り分けられる見た目を作っています。
解説
左右に交互へ並ぶカード型の年表です。ol.tlc の ::before で中央に縦線を1本引き、各 li を幅50%にして奇数を左寄せ・偶数を右寄せに配置することで、1本の軸の両側にカードが振り分けられる見た目を作っています。年号は .tlc__y、内容は .tlc__c という白いカードに分かれ、見出しと短い説明をまとめて出来事のまとまりを示します。表組みではなく順序リスト ol を使っているため、時系列の意味が構造にも残るのが利点です。
使う場面と調整のコツ
会社沿革、プロダクトの開発履歴、プロジェクトの節目紹介などに向きます。出来事を増やす場合は li を追加するだけで自動的に左右へ振り分けられます。注意したいのは画面幅で、左右交互の50%配置はスマホだと窮屈になりがちです。狭い幅では縦線を左端へ寄せ、全カードを右側1列に揃えるレスポンシブ指定を足すと読みやすくなります。アクセントの #667eea をブランド色へ変えれば、年号や軸の色を一括で雰囲気に合わせられます。
使用例・適したシーン
- コーポレートサイト構築
- サービス LP
- 採用ページ
- 事業紹介資料 Web 版
よくある質問
スマホで左右交互だと読みにくいです。
狭い画面ではメディアクエリで li の width を100%にし、縦線を左端へ寄せて全カードを右1列に揃えると読みやすくなります。交互配置はタブレット以上に限定するのがおすすめです。
年表の項目を増やすには。
ol の中に li を追加し、年号と見出し・説明を書くだけです。奇数・偶数の判定で自動的に左右へ振り分けられるので、並び順を変えたいときは li の順序を入れ替えてください。