日付付きニュースリスト

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

これは、日付・カテゴリバッジ・タイトルの3要素で並べるシンプルなお知らせ一覧です。リストは ul／li で組み、各行を display:flex; align-items:center で横並びにします。日付には time 要素と datetime 属性を使い、機械が読み取れる正しい日付情報を持たせているのが実装上のポイントです。カテゴリは __badge の修飾子（new／info／media など）で色分けし、一覧の中で情報の種類を一目で区別できます。「もっと見る」ボタンで初期表示件数を絞り、JavaScript で残りを展開する想定です。

向いている場面

• コーポレートサイトの「お知らせ」「ニュースリリース」
• 店舗の営業時間変更・キャンペーン告知の一覧
• 採用ページの更新情報、メディア掲載実績のまとめ

カスタマイズと注意点

バッジの種類は修飾子クラスを足すだけで増やせ、色はそれぞれのクラスで調整します。日付は datetime 属性を 2026-05-20 のような ISO 形式で正確に入れることが重要で、これにより検索エンジンや支援技術が日付を正しく解釈できます。各行はリンクなので、リンクテキストは「新サービスの提供を開始しました」のように内容が分かる具体的な文言にし、「こちら」のような曖昧な表現は避けてください。モバイルでは flex-wrap で日付・バッジ・タイトルが折り返り、長いタイトルでも崩れません。件数が増えたら「もっと見る」で初期表示を制御すると縦長になりすぎません。