記述例
index.html
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>COFFEE</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="img/favicon.ico">
<link rel="stylesheet" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js" defer></script>
<script src="js/script.js" defer></script>
</head>
<body>
<header class="header">
<h1><img src="img/logo.svg" alt="COFFEE"></h1>
<nav class="gnav">
<ul>
<li><a href="#menu">MENU</a></li>
<li><a href="#about">ABOUT</a></li>
<li><a href="#location">LOCATION</a></li>
</ul>
</nav>
</header>
<main class="main">
<section id="menu">
<div class="menu_img fixed_bg">
<h2>MENU</h2>
</div>
<div class="menu_content container">
<div class="menu_item">
<h3 class="item_title">DRINK</h3>
<dl>
<dt>ブレンドコーヒー</dt>
<dd>¥500</dd>
<dt>アメリカンコーヒー</dt>
<dd>¥500</dd>
<dt>アメリカンコーヒー</dt>
<dd>¥500</dd>
<dt>カフェラテ</dt>
<dd>¥500</dd>
<dt>カフェモカ</dt>
<dd>¥500</dd>
<dt>ウインナーコーヒー</dt>
<dd>¥500</dd>
<dt>紅茶(ストレート、ミルク、レモン)</dt>
<dd>¥500</dd>
<dt>ミルクティー(ロイヤルミルクティー等)</dt>
<dd>¥500</dd>
<dt>ココア(ホット・アイス)</dt>
<dd>¥500</dd>
<dt>炭酸飲料(ジンジャエール、コーラ等)</dt>
<dd>¥500</dd>
</dl>
</div>
<div class="menu_item">
<h3>FOOD</h3>
<dl class="food">
<dt>サンドイッチ</dt>
<dd>¥500</dd>
<dt>パンケーキ</dt>
<dd>¥500</dd>
<dt>トースト</dt>
<dd>¥500</dd>
</dl>
<h3>OTHER</h3>
<dl>
<dt>ケーキ</dt>
<dd>¥500</dd>
<dt>プリン</dt>
<dd>¥500</dd>
<dt>アイスクリーム</dt>
<dd>¥500</dd>
</dl>
</div>
</div>
</section>
<section id="about">
<div class="about_img fixed_bg">
<h2>ABOUT</h2>
</div>
<div class="about_content container">
<div class="about_item">
<h3>COFFEE</h3>
<ul>
<li>池袋の繁華街から一本路地に入った静かな場所にあるコーヒーショップです。
落ち着いた雰囲気と可愛らしい内装が特徴的で、女性のお客様に人気があります。
<li>店内は白を基調とした明るい雰囲気で、所々にピンクを取り入れた可愛らしいデザインになっています。
テーブルや椅子はアンティーク調で、壁には女性アーティストの絵画が飾られています。</li>
<li>席は、ゆったりとくつろげるソファ席や、テラス席も用意されています。</li>
<li>読書やミーティングなど、長時間の滞在にも対応しています。</li>
</ul>
<a class="btn" href="#"><span>Read More</span></a>
</div>
</div>
</section>
<section id="location">
<div class="location_img fixed_bg">
<h2>LOCATION</h2>
</div>
<div class="location_content container">
<div class="location_item">
<h3>OUR STORE</h3>
<div class="item_map">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3239.011647393562!2d139.71131521238382!3d35.72593207245827!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188d69a1bfc623%3A0x6f829dc3047a4f7c!2z44CSMTcxLTAwMjIg5p2x5Lqs6YO96LGK5bO25Yy65Y2X5rGg6KKL77yS5LiB55uu77yR77yS4oiS77yZIO-8q--8q-ODk-ODqw!5e0!3m2!1sja!2sjp!4v1715881293087!5m2!1sja!2sjp" width="100%" height="400" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
<div class="item_info">
<p>5-34-12, Minamiikebukuro, Toshima-ku, Tokyo 171-0022
東京都豊島区南池袋5-34-12</p>
<p>Open 7 days a Week
9:00am to 10:00pm</p>
<p>Tel : 03-5678-1234</p>
</div>
</div>
</div>
</section>
</main>
<footer class="footer">
<p><small>© COFFEE</small></p>
<div id="toTop">to<br>TOP</div>
</footer>
</body>
</html>
@charset "UTF-8";
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul {
list-style: none;
}
a {
color: inherit;
text-decoration: none;
}
img {
max-width: 100%;
vertical-align: bottom;
}
html {
font-size: 100%;
scroll-behavior: smooth;
}
@media screen and (max-width: 767px) {
html {
font-size: 90%;
}
}
body {
background-color: #fff;
color: #333;
font-size: 1.0rem;
font-family: "Noto Sans JP", sans-serif;
line-height: 1.0;
}
.container {
width: min(94%, 1000px);
margin: 0 auto;
padding: 50px 16px;
text-align: center;
}
h2 {
width: 100%;
color: #fff;
text-align: center;
font-size: 4.5rem;
filter: drop-shadow(0 0 8px #303030);
position: absolute;
top: 38%;
}
h3 {
display: inline-block;
margin-bottom: 70px;
padding-bottom: 10px;
border-bottom: solid 6px #e03131;
font-size: 2.5rem;
}
.fixed_bg {
height: 300px;
background-position: center;
background-size: cover;
background-attachment: fixed;
}
@media screen and (max-width: 767px) {
.container {
padding: 50px 0;
}
h1 img {
width: 64%;
}
h2 {
font-size: 2.8rem;
}
h3 {
font-size: 1.4rem;
margin-bottom: 20px;
padding-bottom: 6px;
border-bottom: solid 3px #e03131;
}
.fixed_bg {
height: 120px;
}
}
.header {
width: 100%;
min-height: 100vh;
padding: 40px;
background: url(../img/main.jpg) no-repeat top center / cover;
position: relative;
}
.header > h1 {
padding: 0 16px;
text-align: center;
position: absolute;
top: 45%;
left: 0;
right: 0;
filter: drop-shadow(0 0 8px #303030);
}
@media screen and (max-width: 767px) {
.header {
min-height: 100vh;
}
}
.footer {
font-size: 0.5rem;
padding: 10px 0 30px;
text-align: center;
}
.gnav ul {
display: grid;
grid-auto-flow: column;
place-content: end;
gap: 30px;
}
.gnav li a {
color: #fff;
font-size: 1.5rem;
font-weight: bold;
transition: all 0.3s ease;
filter: drop-shadow(0 0 6px #000);
}
.gnav li a:hover {
color: #e03131;
}
@media screen and (max-width: 767px) {
.gnav ul {
place-content: center;
}
}
.menu_img {
background-image: url(../img/menu.jpg);
position: relative;
}
.menu_content {
display: grid;
grid-template-columns: 58% 37%;
gap: 40px;
}
.menu_item {
padding-inline: 2%;
}
.menu_item:first-child {
padding-right: 50px;
border-right: solid 1px #000;
}
.menu_item dl {
display: grid;
grid-template-columns: 87% 13%;
}
.menu_item dt {
text-align: left;
border-bottom: dotted 1px #000;
margin-bottom: 25px;
padding-bottom: 10px;
}
.menu_item dd {
text-align: right;
padding-top: 8px;
}
.menu_item dl.food {
margin-bottom: 55px;
}
@media screen and (max-width: 767px) {
.menu_img {
height: 200px;
}
.menu_content {
display: block;
width: 100%;
padding-inline: 6%;
}
.menu_item:first-child {
margin-bottom: 20px;
padding-right: 2%;
border-right: 0;
}
.menu_item dl.food {
margin-bottom: 20px;
}
}
.about_img {
background-image: url(../img/about.jpg);
position: relative;
}
#about ul {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 5%;
margin-bottom: 40px;
}
#about li {
line-height: 1.7;
text-align: left;
text-align: justify;
white-space: pre-line;
}
#about .btn {
width: 160px;
height: 50px;
line-height: 3.0;
display: inline-block;
color: #000;
padding: 0;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
}
#about .btn span {
position: relative;
display: block;
width: 100%;
height: 100%;
}
#about .btn::before,
#about .btn::after {
position: absolute;
content: "";
right: 0;
bottom: 0;
background: #e03131;
transition: all 0.3s ease;
}
#about .btn span::before,
#about .btn span::after {
position: absolute;
content: "";
left: 0;
top: 0;
background: #e03131;
transition: all 0.3s ease;
}
#about .btn::before,
#about .btn span::before {
width: 2px;
height: 50%;
}
#about .btn::after,
#about .btn span::after {
width: 20%;
height: 2px;
}
#about .btn:hover::before,
#about .btn span:hover::before {
height: 100%;
}
#about .btn:hover::after,
#about .btn span:hover::after {
width: 100%;
}
@media screen and (max-width: 767px) {
.about_img {
height: 200px;
}
#about ul {
display: block;
margin-bottom: 10px;
}
}
.location_img {
background-image: url(../img/location.jpg);
position: relative;
}
.item_map {
filter: grayscale(1);
margin-bottom: 0;
}
.item_map iframe {
width: 100%;
height: 400px;
}
.item_info {
text-align: left;
line-height: 1.5;
white-space: pre-line;
}
@media screen and (max-width: 767px) {
.location_img {
height: 200px;
}
}
#toTop {
position: fixed;
right: 16px;
bottom: 16px;
display: none;
width: 60px;
height: 60px;
padding-top: 14px;
background-color: #e03131;
border-radius: 50%;
color: #fff;
font-size: 0.9rem;
font-weight: bold;
line-height: 1.0;
text-align: center;
cursor: pointer;
}
script.js
$(function(){
let toTop = $('#toTop');
toTop.on('click', function(){
$('html,body').animate({ scrollTop: 0 }, 200);
});
$(window).on('scroll', function(){
let scl = $(this).scrollTop();
if(scl > 500){
toTop.fadeIn();
}else{
toTop.fadeOut();
}
});
});
