シンプル ニュースリスト

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

日付とタイトルを 1 行に並べた、最小構成のお知らせ一覧です。各項目は li 内で display:flex を使い、左に time 要素の日付、右にリンクテキストを配置しています。日付列は flex:0 0 90px で幅を固定し、下線（border-bottom）で行を区切るため、件数が増えても縦に整然と並びます。最大幅 600px の読みやすい 1 カラム設計です。

向いている場面

更新頻度がそれほど高くないコーポレートサイトのお知らせ、店舗の営業案内、個人ブログの新着履歴などに向きます。画像を使わず文字だけで構成されているため軽量で、トップページの一区画に「最新3件だけ」を出すような使い方とも相性が良いです。

カスタマイズの勘所

• 日付に time 要素を使っているので、datetime 属性（例 2026-05-18）を付けると機械可読になります。
• カテゴリのバッジを足したい場合は、time と a の間に span を挟むと既存の flex に自然に乗ります。
• 件数が多い一覧では、ホバー時の色変化や訪問済みリンクの判別を加えると読みやすくなります。

SP では日付列の固定幅 90px が窮屈に見えることがあるので、必要なら日付とタイトルを縦積みにする調整を検討してください。