3 カラム ニュースカード
サムネイル・日付・タイトルを縦に積んだカードを 3 列に並べた、お知らせ一覧向けのセクションです。グリッドは grid-template-columns:repeat(3,1fr) で 3 等分し、カードはホバー時に transform:translateY(-4px) でわずかに浮き上がります。
このパーツの使いどころと実装ポイント
サムネイル・日付・タイトルを縦に積んだカードを 3 列に並べた、お知らせ一覧向けのセクションです。グリッドは grid-template-columns:repeat(3,1fr) で 3 等分し、カードはホバー時に transform:translateY(-4px) でわずかに浮き上がります。日付は time 要素を使い等幅フォントで表示しているため、桁がそろって読みやすいのが細部のこだわりです。サムネはグラデーションのプレースホルダになっています。
向いている場面
コーポレートサイトのニュース、店舗のキャンペーン告知、メディアの新着記事の入口など、更新情報を視覚的に見せたい場面に合います。3 件をトップページに抜粋し、一覧ページへ誘導する使い方も定番です。
カスタマイズの勘所
nc3__thの背景を実写やアイキャッチ画像に差し替えると一気に本物らしくなります- カード全体がクリック領域の想定なので、
articleをリンクで包むか中の見出しをリンク化します - 件数を増やしても
1fr指定なので自動で均等に並びます
レスポンシブは max-width:680px で 1 列に切り替わり、スマートフォンでは縦一列で表示されます。実装時は time に datetime 属性を付けると、機械にも日付が正しく伝わります。サムネ画像には width と height、意味のある alt を必ず添えてください。
よくある質問
カードを4件以上に増やしても崩れませんか？
崩れません。グリッドは1frで3等分しているので、4件目以降は自動的に次の行へ折り返して並びます。行が増えても列幅は均等のまま保たれます。
日付に time 要素を使う利点は何ですか？
datetime 属性に機械可読な日付を入れられるため、検索エンジンや支援技術が正確な日付を認識できます。見た目の表記が和暦やドット区切りでも、内部では標準形式で伝えられます。