サムネ付きお知らせリスト

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

このパーツは、日付・カテゴリ・実写サムネを横並びにしたお知らせや記事の一覧セクションです。各行は display:flex でサムネ・メタ情報・矢印アイコンを並べ、border-top で区切り線を引いて行を仕切ります。見出しはホバーで下線が付き、リンクであることが伝わります。右上には「一覧を見る」リンクがあり、矢印がホバーで右に動く小さな演出が入っています。

向いている場面

• コーポレートサイトのNewsで、休業案内やプレスを時系列に並べたいとき
• ブログやメディアの最新記事リストとして
• 店舗サイトのイベント・キャンペーン告知一覧に

差し替えどころは、各行のサムネ・日付・カテゴリ・見出し・リンク先です。カテゴリは「お知らせ」「ブログ」などで分類し、必要なら色分けすると一覧性が上がります。見出しは長すぎると改行で崩れやすいので、要点を絞った長さに調整してください。

実装上の注意

サムネの alt には記事内容が伝わる説明を入れ、装飾の矢印アイコンには aria-hidden を付けます。日付は time 要素で表現しているため、datetime 属性を併記すると検索エンジンや支援技術に正確な日付が伝わります。スマートフォンではサムネと文字が窮屈になりやすいので、サムネを小さくするか縦積みにする調整を検討してください。