お知らせを作ろう

日付とタイトルを持つお知らせ一覧を作ります。見た目だけでなく、日付やリンクの意味が伝わるHTMLを使います。

このLessonのゴール

ulとliを使ってお知らせを一覧として構造化できる
time要素へ機械が読める日付を設定できる
各項目全体を操作できるリンクとして整えられる

1. HTMLを追加する

<section id="news" class="news">
  <div class="container news-layout">
    <div>
      <p class="eyebrow">News</p>
      <h2 class="section-title">お知らせ</h2>
    </div>

    <ul class="news-list">
      <li>
        <a href="#">
          <time datetime="2026-08-20">2026.08.20</time>
          <span>秋の新作メニューのお知らせ
          →

.news {
  padding: 112px 0;
}

.news-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 80px;
}

.news-list {
  margin: 0;
  padding: 0;
  border-top: 1px solid #dcd5c9;
  list-style: none;
}

.news-list a {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  gap: 24px;
  padding: 25px 0;
  border-bottom: 1px solid #dcd5c9;
  align-items: center;
}