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 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="#about" class="current">ABOUT</a></li>
<li><a href="#menu">MENU</a></li>
<li><a href="#access">ACCESS</a></li>
<li><a href="contact/index.html">CONTACT</a></li>
</ul>
</nav>
</div>
</header>
<p class="key-visual"><img src="img/key-image.jpg" alt=""></p>
<main class="main-conent">
<div class="container">
<section class="about">
<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>
</section>
</div>
<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>
<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>
</div>
</div>
</section>
<div class="container">
<section class="access">
<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>東京都千代田区千代田１−１</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>
</div>
</section>
</div>
</main>
<footer class="footer">
<div class="container">
<p><small>Copyright © 2019 MIMIPEN Café</small></p>
</div>
<p id="pageTop" class="page-top"><i class="fa-solid fa-angle-up"></i></p>
</footer>
</body>
</html>
