おすすめメニューを作ろう

同じ構造を繰り返して、3件の商品カードを作ります。商品ごとに独立した画像を使い、object-fitで表示を揃えます。

このLessonのゴール

• 同じHTML構造を使って複数の商品カードを作れる
• CSS Gridで3件の商品を横並びにできる
• aspect-ratioとobject-fitで画像の表示比率を揃えられる

1. 商品カードを作る

main内、「私たちについて」の次へ記述します。最初に1件だけ作り、正しく表示できてから残り2件を追加します。

<section id="menu" class="menu-section">
  <div class="container">
    <p class="eyebrow">Our menu</p>
    <h2 class="section-title">今日のおすすめ</h2>

    <div class="menu-grid">
      <article class="menu-card">
        <div class="menu-photo">
          <img src="images/menu-croissant-v2.jpg" alt="バタークロワッサン" />
        </>
        
          BAKERY¥320
          バタークロワッサン
          国産発酵バターを折り込み、外はさくっと、中はしっとり焼き上げました。