ニュース・お知らせカードリスト
このパーツは、日付・カテゴリバッジ・タイトルを持つお知らせカードをグリッドで並べるレイアウトです。 grid-template-columns に repeat(auto-fill,minmax(280px,1fr)) を指定しているため、画面幅に応じてカードの列数が自動で増減します。
このパーツの使いどころと実装ポイント
このパーツは、日付・カテゴリバッジ・タイトルを持つお知らせカードをグリッドで並べるレイアウトです。grid-template-columns に repeat(auto-fill,minmax(280px,1fr)) を指定しているため、画面幅に応じてカードの列数が自動で増減します。各カードはホバーすると影が濃くなり、少し浮き上がる動きで、クリックできることが直感的に伝わります。
向いている場面
更新情報をこまめに発信するコーポレートサイトやサービスサイトに向きます。たとえばプレスリリースが多い企業、キャンペーン告知の多いECサイト、イベント情報を出す教室や店舗などで使いやすい構成です。
カスタマイズの勘所
バッジは news__badge--info のように修飾クラスで色分けされているので、「お知らせ」「プレスリリース」などカテゴリごとに色を足せます。time 要素の datetime 属性に正しい日付を入れると、検索エンジンが日付を理解しやすくなります。
- カードの最小幅
280pxを変えると、1行に並ぶ枚数の感覚を調整できます - 各カードはリンク全体を
aで囲んでいるため、どこを押しても遷移できます
よくある質問
カードの列数はどうやって決まりますか？
列数は固定ではなく、画面幅に合わせて自動で決まります。カードの最小幅を280pxに設定しているため、幅が広い画面では3列や4列、スマホでは1列という具合に並び直します。手動で列数を指定したい場合はCSSの調整で変更できます。
カテゴリバッジの色を増やすことはできますか？
できます。バッジは修飾クラスで色を切り替える方式なので、新しいカテゴリ用のクラスを追加して背景色を指定すれば、好きな色を増やせます。お知らせ・採用・イベントなど、種類ごとに色分けすると一覧性が高まります。