メニューページの作成

次はメニューページです。商品カードを並べる練習にちょうど良い題材です。

メニューカード

1件のメニューは、画像・名前・説明・価格で構成します。

<section class="menu-item">
    <div class="menu-item-img">...</div>
    <div class="menu-item-info">...</div>
</section>

1件分を先に完成させてから増やします。

グリッド

一覧は CSS Grid で組みます。SPでは縦積み、PCでは画像と情報の2カラムでも、カード自体を複数列にしても構いません。サンプルの並びを見ながら、余白を整えてください。

画像は aspect-ratio と object-fit: cover を使うと、サイズが揃って見た目が安定します。

ページ下部には共通の c-instagram を置きます。