マガジン風ニュースグリッド

このパーツの使いどころと実装ポイント

左に大きな注目記事1件、右に小さな一覧3件を並べたマガジン風のニュース・お知らせセクションです。grid-template-columns:1fr 380px で左の特集を可変幅、右のリストを固定幅にし、特集側は aspect-ratio:16/9 の画像＋カテゴリタグ＋見出し＋日付、リスト側は日付・カテゴリ・タイトルを行区切りで積む構成です。各項目は time 要素に datetime 属性を付け、機械可読な日付として扱える点が地味ながら重要です。

向いている場面

更新頻度のある企業サイトのトップに置く「お知らせ」「ニュース」「ブログ新着」に向きます。1件だけ画像付きで強調できるので、最新の制作実績やキャンペーンを目立たせつつ、その他の更新を一覧で見せたい場面に適しています。カテゴリタグで実績・お知らせ・ブログを色分けすれば、情報の種類も一目で伝わります。

カスタマイズと注意

• 右のリストは li.news__item を増減できます。各項目は下線で区切られるため、件数が変わっても整います。
• 700px以下で1カラムに畳まれ、特集が上、リストが下に並びます。
• カテゴリタグの背景色を種類ごとに変えると分類性が上がります。色だけに頼らずラベル文字も残すとアクセシビリティ上安心です。
• 各記事リンクは実際の詳細ページに接続してください。datetime は実際の公開日に合わせると検索エンジンが日付を解釈しやすくなります。