店舗一覧ページの作成

店舗一覧ページも、カード型レイアウトの応用です。

店舗カード

1件の店舗は、写真・店名・住所・営業時間などで構成します。

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

メニューページと同じく、1件分を先に完成させてから増やします。

スタイリングのポイント

• 画像サイズを揃える（aspect-ratio / object-fit）
• テキスト情報は行間を確保して読みやすくする
• ページ下部は c-instagram を共通配置

店舗ごとに地図リンクを置く場合も、見た目のボタンは共通コンポーネントを使うと統一感が出ます。