カテゴリタブ付きニュース一覧

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

このパーツは、「すべて / お知らせ / メディア / イベント」のタブでニュース一覧を切り替えられるお知らせセクションです。一覧は ul と li で組み、各行を grid-template-columns:auto auto 1fr の 3 カラムにして、日付・カテゴリラベル・見出しを横一列に揃えています。タブの button は is-act クラスで現在の選択状態を黒背景に反転させる仕組みです。

向いている場面

• コーポレートサイトのお知らせ・プレスリリース一覧
• メディア掲載やイベント告知を種類別に整理したいとき
• 記事数が増えてきて、種類でフィルタしたいニュースページ

カスタマイズと注意点

カテゴリの色は ne-tb__c--ev（イベント）や ne-tb__c--md（メディア）のような修飾クラスで切り替えており、種類を増やすときは同じ要領でクラスと配色を足します。タブによる絞り込みは JavaScript で各 li の表示・非表示を切り替えて実装します。サンプルはタブの見た目だけなので、data-category 属性を li に持たせてフィルタすると管理しやすくなります。タブが多くて折り返す場合は flex-wrap が効くようにしてあり、狭い画面でもボタンが収まります。日付には time 要素を使っているので、検索エンジンに公開日が伝わりやすい構造です。