ニュース・お知らせ一覧カード
日付・カテゴリラベル・タイトルを 1 行に横並びにした、コーポレートサイト定番のお知らせ一覧です。マークアップは ul と li のリスト構造で、各行を display:flex にして要素を水平に並べています。
解説
日付・カテゴリラベル・タイトルを 1 行に横並びにした、コーポレートサイト定番のお知らせ一覧です。マークアップは ul と li のリスト構造で、各行を display:flex にして要素を水平に並べています。日付は等幅フォントで揃え、flex-shrink:0 で折り返しを防ぎ、右側のタイトルだけが伸縮します。カテゴリラベルは「プレス」「イベント」など種類ごとに背景色を変えられる修飾クラスを持ち、CSS のみで動きます。
こんな場面で使えます
- 企業サイトトップの「お知らせ・ニュース」欄
- プレスリリースや更新履歴の一覧
- 採用ページやサポートサイトの告知リスト
カスタマイズはラベルの修飾クラスを増やすだけで分類を拡張でき、色で種類を見分けやすくなります。li 同士は下線で区切られ、最終行だけ線を消す配慮も入っています。横幅が狭い画面ではタイトルが折り返すので、必要なら日付とラベルを上段、タイトルを下段に積むと窮屈になりません。リンクには分かりやすいテキストを入れると検索・アクセシビリティの両面で有利です。
使用例・適したシーン
- サービス紹介セクション
- メンバー紹介・スタッフ一覧
- 料金プラン比較
- 実績・事例カード
よくある質問
カテゴリの種類を増やせますか。
増やせます。ラベルには種類ごとの修飾クラスが用意されているので、同じ要領で新しいクラスを足し、背景色を指定すれば お知らせ や 採用 などの分類を色分けで追加できます。
リスト構造で作るメリットは何ですか。
お知らせは項目の集まりなので、ul と li で組むと意味的に正しく、検索エンジンや読み上げソフトに一覧であることが正確に伝わります。見た目だけ div で並べるより、アクセシビリティとSEOの両面で有利です。