ニュースカードグリッド
日付・カテゴリ・タイトルを持つお知らせを、カード形式の3列グリッドで並べるニュースセクションです。グリッドは repeat(auto-fit,minmax(220px,1fr)) で、画面幅に応じて1〜3列へ自動で折り返します。
このパーツの使いどころと実装ポイント
日付・カテゴリ・タイトルを持つお知らせを、カード形式の3列グリッドで並べるニュースセクションです。グリッドは repeat(auto-fit,minmax(220px,1fr)) で、画面幅に応じて1〜3列へ自動で折り返します。各カードはホバーで translateY(-4px) と影の拡大により浮き上がり、クリックできる要素であることを視覚的に示します。日付は time 要素、各記事は article 要素でマークアップされています。
向いている場面
コーポレートサイトのお知らせ一覧、店舗の新着情報、メディアの記事インデックスなど、更新情報を時系列で見せたい場面に適します。カテゴリバッジ（お知らせ・新着・ブログ）で色分けでき、種類の多い更新を整理しやすいのが利点です。
カスタマイズと注意点
- カテゴリの色は
--info--new--blogのような修飾クラスで管理されているので、種類を増やすときは新しい色クラスを足します。 - 日付は
time要素なので、datetime属性に機械可読な日付（YYYY-MM-DD）を入れておくと検索エンジンにも伝わりやすくなります。 - カードは
articleでラップされ1記事＝1ブロックとして独立しています。カード全体をリンクにする場合は見出し内のaを全面に広げると操作しやすくなります。
よくある質問
ニュースが増えたら自動で何列になりますか？
グリッドはauto-fitとminmax(220px,1fr)で組まれているため、画面幅に応じて自動で列数が変わります。広い画面では3列、タブレットで2列、スマホでは1列に折り返り、件数が増えても並びは自然に保たれます。
カテゴリの種類を追加できますか？
できます。バッジの色は--info・--new・--blogといった修飾クラスで分けられているので、新しいカテゴリ用の色クラスをCSSに追加し、該当のspanに付与すれば色分けを増やせます。