店舗情報とお問い合わせを作ろう

店舗写真と住所・営業時間を2列で配置し、その下へお問い合わせの導線を作ります。

このLessonのゴール

• 店舗写真と店舗情報をCSS Gridで2列に配置できる
• addressを使って住所を意味に合ったHTMLで記述できる
• 地図とメールへのリンクを使って利用者の導線を作れる

1. 店舗情報を追加する

<section id="shop" class="shop">
  <div class="shop-layout">
    <div class="shop-photo">
      <img src="images/with-cafe-hero.jpg" alt="自然光が入るWith Caféの店内" />
    </div>
    <div class="shop-content">
      <p class="eyebrow">Shop information</p>
      <h2 class="section-title">店舗情報</h2>
      <address class="shop-address">
        〒150-0001<br />
        東京都渋谷区神宮前 1-2-3
        明治神宮前駅より徒歩5分
      
      OPEN　8:00–18:00CLOSED　毎週火曜日
      Google Mapで見る