日付付きニュース/お知らせ一覧

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

このパーツは、日付・カテゴリバッジ・タイトルを1行ずつ縦に積んだお知らせ一覧です。リストはulとliのセマンティックな構造で、日付はtime要素にdatetime属性を持たせているため、機械にも日付として正しく伝わります。各行はdisplay:flexで日付・カテゴリ・見出しを横並びにし、狭い画面では折り返して縦に積み替わります。

向いている場面

• コーポレートサイトの新着情報・プレスリリース欄
• 店舗の営業案内やキャンペーン告知
• スクールや教室のスケジュール・お知らせ

カテゴリバッジの使い分け

バッジはnews-item__cat--serviceのように修飾クラスで色分けされています。サービス・実績・お知らせなどの種類を視覚的に区別でき、種類を増やすときは同じ命名で新しい修飾クラスとCSSを足すだけで拡張できます。色はカテゴリの意味と対応づけ、数を絞ると一覧が読みやすくなります。

実装上の注意

日付表示（2026.05.20）とdatetimeの値（2026-05-20）は別物なので、片方だけ直して食い違わないよう両方そろえてください。「もっと見る」ボタンは件数が多いときに一覧ページへ誘導する導線です。数値の桁ぞろえにはtabular-numsが効いており、日付の縦のラインがきれいに揃います。