大型サムネ NEWS カード
この「大型サムネ NEWS カード」は、サムネイル画像を大きく見せたコーポレートニュースを 3 枚横並びにするパーツです。 grid-template-columns:repeat(3,1fr) の 3 列で、各カードは上部に height:180px のサムネ枠、下に日付（ <time> ）・カテゴリ…
このパーツの使いどころと実装ポイント
この「大型サムネ NEWS カード」は、サムネイル画像を大きく見せたコーポレートニュースを 3 枚横並びにするパーツです。grid-template-columns:repeat(3,1fr) の 3 列で、各カードは上部に height:180px のサムネ枠、下に日付（<time>）・カテゴリラベル・タイトルを配置。カード全体が <a> リンクで、ホバーで translateY(-4px) 浮き上がる動きが付いた、リッチで現代的な見た目です。
向いている場面
プレスリリースやイベント、メディア掲載などを画像つきで魅せたい企業サイトのトップやニュース一覧に向きます。SaaS の更新情報、ブランドのお知らせ、採用サイトのトピックスなど、視覚的なインパクトで最新情報への興味を引きたい場面に適します。カテゴリ別に色違いラベルを持てるのも特徴です。
カスタマイズと注意点
- サムネは初期状態がグラデーション塗りなので、実写画像に差し替えるのが前提です。背景画像にするか
<img>を入れる場合はaltを必ず付けます。 - 日付は
<time datetime="...">形式にすると機械可読になり、ニュースの構造化に役立ちます。 - カード全体がリンクなので、
hrefに各記事の実 URL を必ず入れてください。 - スマホでは 3 列が折り返します。タイトルが長いとカード高さがずれるため、行数や文字数の上限を意識すると整います。
よくある質問
サムネ画像はどう差し替えますか？
初期はグラデーションの塗りでサムネ枠を表しています。実際に使う際は、その枠に背景画像を指定するか img タグを入れて実写画像に差し替えてください。画像を入れる場合は内容を説明する alt 属性を付けると、アクセシビリティと SEO の両面で有利です。
カードは 3 枚固定ですか？
固定ではありません。3 列グリッドなので、カードを足したり減らしたりできます。3 の倍数にすると各行がきれいに埋まります。タイトルの長さがばらつくとカードの高さがそろわないため、文字数の上限を意識すると見た目が整います。