注目記事＋リスト
注目記事＋リストは、左に大きな 注目記事カード 、右に 新着ニュースの一覧 を並べた複合レイアウトです。このパーツはCSS Gridの grid-template-columns:1.4fr 1fr で左右の幅に強弱を付け、最新トピックを目立たせつつ過去のお知らせも一覧できるようにしています。
このパーツの使いどころと実装ポイント
注目記事＋リストは、左に大きな注目記事カード、右に新着ニュースの一覧を並べた複合レイアウトです。このパーツはCSS Gridのgrid-template-columns:1.4fr 1frで左右の幅に強弱を付け、最新トピックを目立たせつつ過去のお知らせも一覧できるようにしています。日付には等幅フォントを当てて視線の基準を揃えています。
向いている場面
お知らせ・プレスリリース・ブログ一覧を持つコーポレートサイトやメディアに向きます。新着が頻繁に出る業種や、最新の一本を特に読ませたいときに有効です。
カスタマイズと注意点
左カードのサムネはグラデーションのプレースホルダなので、公開時は実際の記事画像に差し替え、imgへaltとwidth/heightを付けてください。右リストはliを増減するだけで件数調整ができます。time要素は機械可読なdatetime属性を添えると検索エンジンに日付が伝わります。狭い画面では二段組みが窮屈になるため、メディアクエリで一列に積み替えると読みやすくなります。
よくある質問
左右の幅が違うのはなぜですか
注目記事を一覧より目立たせるためです。Gridで左を1.4、右を1の比率にし、最新の一本に視線が向かうよう意図的に強弱を付けています。比率を変えれば見せ方を調整できます。
ニュースの件数を増やしたいときはどうしますか
右側のリスト内のliを必要な数だけ追加・削除するだけで対応できます。件数が多くなる場合は、リスト下に一覧ページへのリンクを置くと回遊しやすくなります。