Cafeコーディング - サイト設計
Cafeコーディング - サイト設計
共通モジュールの設定
- 幅「1040px」で、左右空きを均等にするために共通「.container」を設定します
記述例
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>【コーディング練習】Cafeサイト</title> <link rel="stylesheet" href="css/style.css"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"> </head> <body> <!-- .header --> <header class="header"> <div class="container"> <h1><a href="index.html"><img src="img/logo.png" alt="mimipen-cafe"></a></h1> <nav class="gnav"> <ul> <li><a href="#" class="current">ABOUT</a></li> <li><a href="#">MANU</a></li> <li><a href="#">ACCESS</a></li> <li><a href="#">CONTACT</a></li> </ul> </nav> </div><!-- /.container --> </header> <!-- /.header --> <!-- .key-visual --> <div class="container"> <p class="key-visual"><img src="img/key-image.jpg" alt=""></p> </div><!-- /.container --> <!-- /.key-visual --> <!-- .main-conent --> <main class="main-conent"> <section class="about"> <div class="container"> <h2>ABOUT<br> カフェのこだわり</h2> <p>だみーてきすとだみーてきすとだみーてきすとだみーてきすとだみーてきすと<br>だみーてきすとだみーてきすとだみーてきすとだみーてきすと</p> <ul class="recommend"> <li> <img src="img/coffee.jpg" alt="coffee"> <h3>豆からこだわりました</h3> <p>だみーてきすとだみーてきすとだみーてきすとだみーてきすとだみーてきすとだみーてきすと</p> </li> <li> <img src="img/pizza.jpg" alt="pizza"> <h3>石窯で焼いた絶品ピザも人気</h3> <p>だみーてきすとだみーてきすとだみーてきすとだみーてきすとだみーてきすとだみーてきすと</p> </li> <li> <img src="img/cake.jpg" alt="cake"> <h3>食後にデザートはいかが?</h3> <p>だみーてきすとだみーてきすとだみーてきすとだみーてきすとだみーてきすとだみーてきすと</p> </li> </ul><!-- /.recommend --> </div><!-- /.container --> </section><!-- /.about --> <section class="menu"> <div class="container"> <h2>MENU<br> メニュー</h2> <div class="menu-wrap"> <div class="drink"> <h3>DRINK / 飲み物</h3> <dl> <dt>コーヒー</dt> <dd>¥270</dd> <dt>アメリカンコーヒー</dt> <dd>¥290</dd> <dt>エスプレッソ</dt> <dd>¥290</dd> <dt>カフェラテ</dt> <dd>¥340</dd> <dt>ホットティー</dt> <dd>¥300</dd> <dt>ロイヤルミルクティー</dt> <dd>¥360</dd> <dt>ココア</dt> <dd>¥330</dd> <dt>オレンジジュース</dt> <dd>¥340</dd> </dl> </div><!-- /.drink --> <div class="food"> <h3>FOOD / 料理</h3> <dl> <dt>マルゲリーター</dt> <dd>¥780</dd> <dt>ビアンケッティ</dt> <dd>¥980</dd> <dt>カルボナーラ</dt> <dd>¥780</dd> </dl> <h3>DESSERT / デザート</h3> <dl> <dt>ショートケーキ</dt> <dd>¥400</dd> <dt>パンナコッタ</dt> <dd>¥400</dd> <dt>ティラミス</dt> <dd>¥400</dd> </dl> </div><!-- /.food --> </div><!-- /.menu-wrap --> </div><!-- /.container --> </section><!-- /.menu --> <section class="access"> <div class="container"> <h2>ACCESS<br> アクセス</h2> <div class="access-wrap"> <p class="map"><iframe class="gmap" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3239.011470008087!2d139.7117014502673!3d35.72593643503017!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188d69a1bfc623%3A0x6f829dc3047a4f7c!2z44CSMTcxLTAwMjIg5p2x5Lqs6YO96LGK5bO25Yy65Y2X5rGg6KKL77yS5LiB55uu77yR77yS4oiS77yZIO-8q--8q-ODk-ODqw!5e0!3m2!1sja!2sjp!4v1670925259051!5m2!1sja!2sjp" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe></p> <div class="info"> <h3>みみぺんカフェ</h3> <ul class="address"> <li>〒100-8111</li> <li>東京都千代田区千代田1−1</li> <li>TEL:000-0000-0000</li> </ul> <dl> <dt>営業時間:</dt><dd>10:00〜17:30</dd> <dt>定休日:</dt><dd>毎週月曜日</dd> <dt>駐車場:</dt><dd>10台</dd> </dl> <p>スタッフ一同お客様のご来店を心よりお待ちしております。お気軽お立ち寄りください。</p> <ul class="sns"> <li><a href="#"><i class="fa-brands fa-twitter"></i></a></li> <li><a href="#"><i class="fa-solid fa-envelope"></i></a></li> </ul> </div><!-- /.info --> </div><!-- /.access-wrap --> </div><!-- /.container --> </section><!-- /.access --> </main> <!-- /.main-conent --> <!-- .footer --> <footer class="footer"> <div class="container"> <p><small>画像引用元<a href="https://blog.mimipen.net/entry/2019/07/24/080000" target="_blank">【みみぺんブログ】</a></small></p> </div><!-- /.container --> </footer> <!-- /.footer --> </body> </html>