カテゴリタブ付き お知らせ一覧
このパーツは、上部のカテゴリタブと、その下に並ぶ最新お知らせ一覧を組み合わせたコーポレート向けのニュースセクションです。タブは input type="radio" と label の組み合わせで作られ、JavaScript を使わず CSS だけで選択状態を表現しています。
このパーツの使いどころと実装ポイント
このパーツは、上部のカテゴリタブと、その下に並ぶ最新お知らせ一覧を組み合わせたコーポレート向けのニュースセクションです。タブは input type="radio" と label の組み合わせで作られ、JavaScript を使わず CSS だけで選択状態を表現しています。チェックされたタブには input:checked+label で下線が付き、アクティブ表示になります。一覧の各行は display:flex で日付・カテゴリバッジ・タイトルを横並びにし、日付には等幅フォント、カテゴリには色分けしたバッジ（IR・PRESS・EVENT）を割り当てています。
向いている場面
企業サイトの TOP に置くお知らせ欄、IR・プレスリリース・イベント告知を分類して見せたい広報ページ、製品アップデート情報の掲載などに向きます。1 つのセクションで複数カテゴリを扱えるため、ニュースが増えても整理して見せられます。
カスタマイズの勘所
- カテゴリを増やすときは
inputとlabelのペアを追加し、バッジ用の色クラス（ntc__cat--pなど）を新たに定義します。 - タブの選択でリストを実際に絞り込むには別途 JavaScript が必要です。このパーツは見た目のタブ切り替えのみで、各行の表示制御は含みません。
アクセシビリティ面では、radio と label が for 属性で結び付いているためキーボード操作に対応します。各お知らせの a には実際のリンク先 URL を入れて運用してください。
よくある質問
タブを押すと記事が実際に絞り込まれますか。
このパーツ単体では絞り込まれません。タブの見た目の切り替えは CSS だけで動きますが、カテゴリごとに記事を出し分けるには JavaScript を追加する必要があります。サーバー側でカテゴリ別ページを用意してリンクさせる運用でも実現できます。
カテゴリの色や種類を変えられますか。
変えられます。バッジの色は ntc__cat--p などのクラスで背景色と文字色を指定しているので、ここを編集します。新しいカテゴリを足すときは、ラジオボタンとラベルのペアを追加し、対応する色クラスを新たに作ってバッジに付けてください。