横タイムライン沿革
創業からの歩みを横並びのカードで示す沿革タイムラインです。 ol を grid-auto-flow:column で横方向に並べ、各ノードの上に円形のアイコン、その下に年・節目名・説明文を配置しています。
このパーツの使いどころと実装ポイント
創業からの歩みを横並びのカードで示す沿革タイムラインです。ol を grid-auto-flow:column で横方向に並べ、各ノードの上に円形のアイコン、その下に年・節目名・説明文を配置しています。グリッド上端に ::before でグラデーションの横ラインを引き、円形アイコンを margin-top のマイナス値でライン上に乗せることで「年表の線に節目が刺さっている」見た目を作っています。親に overflow-x:auto を付けているので、項目が画面幅を超えると横スクロールで読めます。
向いている場面
会社概要やAboutページの沿革、サービスの進化の歴史、プロジェクトの工程紹介などに向きます。創業から現在までを4〜6段階で見せたい中小企業のコーポレートサイトや、ブランドのストーリーを時系列で語りたい場面に適しています。
カスタマイズと注意
- ノードは
li.hht__nodeを増減して追加できます。各カードは最小幅が決まっているため、数が増えるほど横スクロール量が増えます。 - アイコンは Material Symbols の別パスに差し替えると、各節目の意味（創業・拡大・新サービス等）を象徴できます。
- 768px以下では1枚が画面の約80%幅になり、スワイプで1つずつ送る見せ方になります。横スクロールできることが分かるよう、右端のカードを少し見切れさせると親切です。
- 順序のある内容なので、見た目だけでなく
ol（順序付きリスト）で組むのが構造的に正しい選択です。
よくある質問
節目が多くて横スクロールが長くなりすぎる場合は。
ノードの最小幅を少し狭めるか、説明文を短くして1枚あたりの幅を抑えると総スクロール量を減らせます。それでも多い場合は、重要な節目だけを抜粋して表示し、詳細は別ページや折りたたみに逃がす方法もあります。年表は読み飛ばされやすいので、見せる数を絞るほど伝わりやすくなります。
スマホで横スクロールに気づいてもらえますか。
768px以下では1枚が画面幅の約8割になり、隣のカードが少し見切れることで「横に続きがある」と伝わりやすくなっています。さらに確実にするなら、スクロールを促す小さな矢印やヒント表示を足す、最初だけ軽くアニメーションで右に動かすなどの補助を加えると親切です。