お知らせ 3 件リスト
日付・カテゴリ・タイトルの3列を横並びにした、お知らせの最新3件リストです。各行は display:grid と grid-template-columns:auto auto 1fr で組まれ、日付とカテゴリのバッジは内容に合わせた幅、タイトルが残りの幅いっぱいに伸びます。
このパーツの使いどころと実装ポイント
日付・カテゴリ・タイトルの3列を横並びにした、お知らせの最新3件リストです。各行はdisplay:gridとgrid-template-columns:auto auto 1frで組まれ、日付とカテゴリのバッジは内容に合わせた幅、タイトルが残りの幅いっぱいに伸びます。見出しの右に「一覧へ」リンクを置き、白いカードを角丸で囲んで一覧らしさを出しています。
向いている場面
コーポレートサイトのトップで最新ニュースを3件だけ見せる導線、IR・プレスリリースの抜粋、店舗やスクールの更新情報などに向きます。カテゴリのバッジは色違いのクラスで種類を区別できるので、プレスリリース・イベント・メディア掲載のように内容を一目で分けたいときに便利です。
カスタマイズと注意点
- カテゴリの色は
ne-3__cat--evやne-3__cat--bzのように修飾クラスで切り替えます。種類を増やすときは同じ要領でクラスを足してください。 - 件数を増やすときは
liをコピーするだけです。日付はtime要素なので、機械にも日付として伝わります。 - 画面幅720px以下では3列が1列の縦積みに切り替わり、スマホでも行が潰れません。タイトルが長い場合も折り返して読めます。
よくある質問
カテゴリのバッジの色を増やすには？
標準クラスのne-3__catに加え、ne-3__cat--evのような修飾クラスで色を上書きしています。新しい種類が必要なら同じ命名でクラスを追加し、背景色だけ指定すれば増やせます。
スマホでは表示が崩れませんか？
崩れません。画面幅720px以下では3列が縦1列に切り替わる指定が入っているため、日付・カテゴリ・タイトルが縦に積まれて読みやすくなります。