縦ラインニュースタイムライン

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

このパーツは、左側に日付、右側にカテゴリバッジとタイトルを並べる縦ライン型のお知らせタイムラインです。各項目は ol で並び、リストの左寄りに ::before で細い縦線を引いて時系列のつながりを表現しています。日付は time 要素に datetime 属性付きで記述され、狭い画面では縦線の位置が左端へ寄ってコンパクトに収まります。

向いている場面

更新履歴を時系列で見せたいサイトに向きます。たとえば製品のアップデート情報、店舗の営業案内、サービスのお知らせ一覧など、日付の流れが大事なコンテンツに適しています。カードより情報密度が高く、多くの項目をすっきり並べられるのが利点です。

カスタマイズの勘所

項目を増やすには li を追加し、日付・バッジ・タイトルを差し替えます。バッジは修飾クラスで色を切り替えられるので、カテゴリごとに色分けできます。

• 順序のある内容なので ol を使い、新しいものを上に並べるのが自然です
• タイトルはリンクになっているため、詳細ページへの導線として使えます
• 日付の datetime は機械可読な形式（YYYY-MM-DD）で正しく入れましょう