タイムライン形式ニュース一覧

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

このパーツは、お知らせを発生順に縦ラインで結ぶタイムライン形式のニュース一覧です。<ul> の左側に border で縦線を引き、各項目の ::before で丸い点を打つことで、時系列で並んでいることを視覚的に示します。日付・カテゴリのバッジ・タイトルリンクを一行に並べ、新着や実績などをバッジの色で区別できます。

向いている場面

更新情報をこまめに発信するコーポレートサイト、実績やプレスリリースを並べたい制作会社・メーカー、イベント告知が多い店舗・スクールに向きます。日付付きで並ぶため、サイトが動いている印象を与えられます。

カスタマイズと注意点

• バッジの種類は色違いのクラスを足すだけで「新着・実績・ブログ」などに分けられます
• 日付は <time> 要素を使い、機械にも日付と分かる形にしてあります

件数が増えたら「もっと見る」や別ページへの導線を用意すると縦に伸びすぎません。リンクのテキストは内容が分かる具体的な見出しにし、スマホで日付とタイトルが詰まらないよう余白を調整してください。