WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

フェリカテクニカルアカデミー

12月22日完成データ（モバイル幅で作成するwebサイト）

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>モバイル幅で作成するwebサイト</title>
<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=Zen+Dots&display=swap" rel="stylesheet">

<link rel="stylesheet" href="css/style.css">
</head>
<body id="top">
<header>
<h1>sneakers-shop</h1>
<nav id="pc-nav">
<ul>
<li><a href="#top">トップ</a></li>
<li><a href="#item">商品紹介</a></li>
<li><a href="#question">よくある質問</a></li>
<li><a href="#shop">店舗情報</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</nav>
</header>
<div class="logo-box">
<p><img src="img/logo.svg" alt=""></p>

<div class="logo-2">
<img src="img/logo2.svg" alt="">
</div>
</div><!-- /.logo-box -->


<div class="container">

<div class="sp-header">
<h2><a href="#top">sneakers-shop</a></h2>
<p id="ham-btn"><span></span></p>
</div><!-- /.sp-header -->
<nav id="sp-nav">
<ul>
<li><a href="#top">トップ</a></li>
<li><a href="#item">商品紹介</a></li>
<li><a href="#question">よくある質問</a></li>
<li><a href="#shop">店舗情報</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</nav>

<div class="main-visual">
<img src="img/main2.jpg" alt="">
</div>

<div class="main-copy">
<h3>Lorem ipsum dolor sit.</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam, quo magnam. Quasi, dicta iste!</p>
</div>

<div id="item">
<h4>商品紹介</h4>

<input type="radio" value="all" name="item" checked id="all">

<label for="all" class="current">All</label>

<input type="radio" value="mens" name="item" id="mens">

<label for="mens">Mens</label>

<input type="radio" value="womens" name="item" id="womens">

<label for="womens">Womens</label>

<div class="grid">
<div class="photo-box" data-category="mens">
<img src="img/01.jpg" alt="" loading="lazy">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum, iusto! Et, repellat.</p>
</div><!-- /.photo-box -->

<div class="photo-box" data-category="womens">
<img src="img/02.jpg" alt="" loading="lazy">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum, iusto! Et, repellat.</p>
</div><!-- /.photo-box -->

<div class="photo-box" data-category="womens">
<img src="img/03.jpg" alt="" loading="lazy">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum, iusto! Et, repellat.</p>
</div><!-- /.photo-box -->

<div class="photo-box" data-category="mens">
<img src="img/04.jpg" alt="" loading="lazy">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum, iusto! Et, repellat.</p>
</div><!-- /.photo-box -->

<div class="photo-box" data-category="womens">
<img src="img/05.jpg" alt="" loading="lazy">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum, iusto! Et, repellat.</p>
</div><!-- /.photo-box -->

<div class="photo-box" data-category="womens">
<img src="img/06.jpg" alt="" loading="lazy">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum, iusto! Et, repellat.</p>
</div><!-- /.photo-box -->

<div class="photo-box" data-category="mens">
<img src="img/07.jpg" alt="" loading="lazy">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum, iusto! Et, repellat.</p>
</div><!-- /.photo-box -->

<div class="photo-box" data-category="mens">
<img src="img/08.jpg" alt="" loading="lazy">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum, iusto! Et, repellat.</p>
</div><!-- /.photo-box -->

<div class="photo-box" data-category="mens">
<img src="img/09.jpg" alt="" loading="lazy">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum, iusto! Et, repellat.</p>
</div><!-- /.photo-box -->

<div class="photo-box" data-category="mens">
<img src="img/10.jpg" alt="" loading="lazy">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum, iusto! Et, repellat.</p>
</div><!-- /.photo-box -->

<div class="photo-box" data-category="mens">
<img src="img/03.jpg" alt="" loading="lazy">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum, iusto! Et, repellat.</p>
</div><!-- /.photo-box -->

<div class="photo-box" data-category="womens">
<img src="img/04.jpg" alt="" loading="lazy">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum, iusto! Et, repellat.</p>
</div><!-- /.photo-box -->


</div><!-- /.grid -->
</div><!-- /.item -->



<div id="question">
<h4>よくある質問</h4>

<details open>
<summary>
<h5>返品・交換はできますか？</h5>
</summary>
<p>室内での試し履き、化粧箱があれば返品・同商品のサイズ交換対応をしております。</p>
</details>

<details>
<summary>
<h5>注文した商品はいつ届きますか。</h5>
</summary>
<p>神奈川県の配送センターより出荷し、国内であればご注文日から2、3日前後でお届けいたします。</p>
</details>

<details>
<summary>
<h5>コンビニ受け取りはできますでしょうか。</h5>
</summary>
<p>当ストアではコンビニ受け取りサービスは行っておりません。</p>
</details>

</div><!-- /.question -->



<div id="shop">
<h4>店舗情報</h4>
<dl class="shop-list">
<dt>住所</dt>
<dd>東京都豊島区南池袋</dd>
<dt>最寄り駅</dt>
<dd>JR池袋駅から徒歩5分</dd>
<dt>電話番号</dt>
<dd><a href="tel:0300001111" class="phone">03-0000-1111</a></dd>
<dt>営業時間</dt>
<dd>11:00~20:00</dd>
</dl>


<div class="map-wrapper">
<h5>Map</h5>
<iframe class="g-map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3238.9452892496847!2d139.71212651460664!3d35.72756403503821!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188d68f6cfe057%3A0xddd17dcd7ecaf745!2z6LGK5bO25Yy656uL5Y2X5rGg6KKL5YWs5ZyS!5e0!3m2!1sja!2sjp!4v1671668773279!5m2!1sja!2sjp" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div><!-- /.map-wrapper -->
</div><!-- /.shop -->
<footer>
<p><small>&copy; <span id="year"></span> sneakers-shop All rights reserved</small></p>
<ul class="sns">
<li><a href="#"><img src="img/icon1.svg" alt=""></a></li>
<li><a href="#"><img src="img/icon2.svg" alt=""></a></li>
<li><a href="#"><img src="img/icon3.svg" alt=""></a></li>
</ul>
<p class="to-top"><a href="#top">トップへ</a></p>


</footer>
</div><!-- /.container -->


<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js'></script>
<script>
$(function(){

//ハンバーガーボタン
$('#ham-btn').on('click',function(){
$(this).toggleClass('is-active');
$('#sp-nav').toggleClass('slide');
});

//spナビのコントロール
$('#sp-nav').on('click',function(){
$(this).removeClass('slide');
$('#ham-btn').removeClass('is-active');
});


//フィルタリング部分
$('label').on('click',function(){
$(this).addClass('current').siblings('label').removeClass('current');
});

//西暦の取得
let thisYear = new Date().getFullYear();
if(thisYear > 2022){
$('#year').text('2022-'+thisYear);
}else{
$('#year').text(thisYear);
}

});
</script>
</body>
</html>


style.css

@charset "utf-8";

/* PC部分のレイアウト */
body{
width: 100%;
background-repeat: repeat;
background-color: #e3d9e4;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='152' height='152' viewBox='0 0 152 152'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='temple' fill='%236f8fcf' fill-opacity='0.41'%3E%3Cpath d='M152 150v2H0v-2h28v-8H8v-20H0v-2h8V80h42v20h20v42H30v8h90v-8H80v-42h20V80h42v40h8V30h-8v40h-42V50H80V8h40V0h2v8h20v20h8V0h2v150zm-2 0v-28h-8v20h-20v8h28zM82 30v18h18V30H82zm20 18h20v20h18V30h-20V10H82v18h20v20zm0 2v18h18V50h-18zm20-22h18V10h-18v18zm-54 92v-18H50v18h18zm-20-18H28V82H10v38h20v20h38v-18H48v-20zm0-2V82H30v18h18zm-20 22H10v18h18v-18zm54 0v18h38v-20h20V82h-18v20h-20v20H82zm18-20H82v18h18v-18zm2-2h18V82h-18v18zm20 40v-18h18v18h-18zM30 0h-2v8H8v20H0v2h8v40h42V50h20V8H30V0zm20 48h18V30H50v18zm18-20H48v20H28v20H10V30h20V10h38v18zM30 50h18v18H30V50zm-2-40H10v18h18V10z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

header{
width: 100%;
height: 80px;
background-color: #f6f0d1;
position: fixed;
top: 0;
left: 0;
z-index: 10;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 50px;
}
h1{
font-family: 'Zen Dots', cursive;
font-size: 36px;
}

#pc-nav>ul{
display: flex;
}
#pc-nav li{
margin: 0 20px;
}
#pc-nav a{
padding: 20px 0;
color: #222;
position: relative;
display: block;
text-align: center;
overflow: hidden;
}
#pc-nav a::after{
display: block;
content: "";
width: 100%;
height: 5px;
background-color: #6ca1e2;
position: absolute;
transform: translateX(-100%);
transition: 0.2s;
}
#pc-nav a:hover::after{
transform: translateX(0);
}

.logo-box{
display: flex;
align-items: center;
width: 36%;
height: 400px;
background-color: #e9cae9;
position: fixed;
left: 10%;
top: 120px;
}
.logo-box>p{
width: 100%;
}
.logo-2{
position: absolute;
right: -80px;
top: -60px;
width: 180px;
height: 180px;
animation: move 20s linear infinite;
}
@keyframes move{
0%{transform: rotate(0);}
100%{transform: rotate(360deg);}
}


/* sp部分のレイアウト */
.container{
max-width: 500px;
background-color: #fef9ee;
margin: 120px 0 100px 55%;
box-shadow: 0 0 6px #bdbdbd;
}
html{
scroll-behavior: smooth;
}
#top{
scroll-margin-top: 120px;
}
#item{
scroll-margin-top: 100px;
margin-bottom: 100px;
}
#question{
scroll-margin-top: 100px;
margin-bottom: 100px;
}
#shop{
scroll-margin-top: 100px;
margin-bottom: 100px;
}
#ham-btn{
display: none;
}
.sp-header{
display: none;
}
#sp-nav{
display: none;
}
/* .containerの中身部分 */
.main-visual{
width: 100%;
height: 320px;
margin-bottom: 50px;
}
.main-visual>img{
object-fit: cover;
object-position: right center;
width: 100%;
height: 100%;
}
.main-copy{
padding: 0 20px;
font-family: 'Zen Dots', cursive;
margin-bottom: 100px;
}
.main-copy>h3{
font-size: 24px;
margin-bottom: 14px;
text-align: center;
}
.main-copy>p{
line-height: 2;
}
h4{
font-size: 26px;
padding: 10px 0 20px 10px;
}

/* 商品情報部分 */
.grid{
columns: 2;
column-gap: 20px;
padding: 0 10px;
}
.photo-box{
margin-bottom: 40px;
padding: 10px;
transition: 0.2s;
break-inside: avoid;/* 中身が途中で改行されないようにする */
}
.photo-box>p{
margin-top: 10px;
line-height: 1.6;
}
.photo-box:hover{
box-shadow: 0 0 6px #6b6b6b;
}

/* フィルタリング部分 */
[type="radio"]{
display: inline-block;
transform: scale(1.5);
margin: 20px 5px;
accent-color: #a7121c;
display: none;
}
label{
display: inline-block;
border: 1px solid #555;
padding: 10px 24px;
margin: 0 10px 20px;
cursor: pointer;
}
label.current,label:hover{
background-color: #555;
color: #FFF;
}

.box{
width: 200px;
height: 200px;
background-color: #bdbdbd;
}
#mens:checked~.grid>.photo-box:not([data-category="mens"]){
display: none;
}
#womens:checked~.grid>.photo-box:not([data-category="womens"]){
display: none;
}


/* 質問部分 */
details{
padding: 10px;
}
summary{
display: block;/* 黒い矢印を消すiOS版 */
list-style: none;/* 黒い矢印を消す */
}
summary::-webkit-details-marker{
display: none;/* 黒い矢印を消すiOS版 */
}
summary>h5{
font-size: 20px;
background-color: #e3d9e4;
padding: 10px 20px;
}
summary>h5::before{
display: inline-block;
content: "Q";
color: #e93479;
font-size: 22px;
margin-right: 10px;
}
details>p{
background-color: #f6f0d1;
padding: 10px 20px;
}
summary>h5:hover{
cursor: pointer;
background-color: #d5c6d7;
}


/* 店舗情報部分 */
.shop-list{
width: 96%;
margin: 0 auto 50px;
display: flex;
flex-wrap: wrap;
border: 1px solid #6b6b6b;
}
.shop-list>dt{
width: 30%;
background-color: #cfdef0;
padding: 20px 0 20px 10px;
border-right: 1px solid #6b6b6b;
}
.shop-list>dd{
width: 70%;
padding: 20px 0 20px 10px;
}
.shop-list>:is(dt:nth-of-type(n+2),dd:nth-of-type(n+2)){
border-top: 1px solid #6b6b6b;
}
.phone{
pointer-events: none;
color: #222;
}

.map-wrapper{
width: 96%;
margin:0 auto 50px;
}
#shop h5{
font-size: 24px;
margin-bottom: 16px;
}
.g-map{
width: 100%;
aspect-ratio: 1 / 0.8;/* 横の比率/縦の比率 */
}

/* footer部分 */
footer{
background-color: #e1ecf9;
}
footer>p{
text-align: center;
padding: 20px 0;
font-size: 18px;
}
.sns{
display: flex;
justify-content:right;
margin-bottom: 30px;
}
.sns>li{
width: 44px;
margin: 0 6px;
}
.sns img{
transition: 0.2s;
}
.sns img:hover{
filter: opacity(70%)
}
.to-top{
width: 100%;
padding: 0;
background-color: #3d3d3d;
}
.to-top>a{
display: block;
color: #FFF;
padding: 20px 0;
}

@media (max-width:1200px){
header{
padding: 0 20px;
}
.logo-box{
left: 5%;
}
.container{
margin: 120px 10px 100px 45%;
}
}

@media (max-width:900px){
header{
display: none;
}
.logo-box{
display: none;
}
.container{
margin: 0 auto;
}

/* ハンバーガーボタン */
#ham-btn{
display: block;
width: 60px;
height: 60px;
background-color: #d0eca0;
position: relative;
}
#ham-btn>span{
display: block;
width: 30px;
height: 3px;
background-color: #222;
position: absolute;
top: -16px;
right: 0;
bottom: 0;
left: 0;
margin: auto;
transition: 0.2s;
}
#ham-btn>span::after{
display: block;
content: "";
width: 30px;
height: 3px;
background-color: #222;
position: absolute;
top: 16px;
transition: 0.2s;
}
#ham-btn.is-active>span{
transform: rotate(45deg);
top: 0;
}
#ham-btn.is-active>span::after{
top: 0;
transform: rotate(90deg);
}
.sp-header{
width: 100%;
background-color: #FFF;
box-shadow: 0 4px 4px #DDD;
height: 60px;
display: flex;
justify-content: space-between;
align-items: center;
padding-left: 20px;
position: fixed;
top: 0;
right: 0;
left: 0;
margin: auto;
z-index: 100;
}
.sp-header>h2>a{
font-family: 'Zen Dots', cursive;
color: #222;
}

/* sp用ナビ */
#sp-nav{
display: block;
width: 100%;
height: calc(100vh - 60px);
background-color: #5559;
position: fixed;
top: 60px;
left: 0;
z-index: 100;
padding-left: 30%;
transform: translateX(100%);
transition: 0.2s;
}
#sp-nav.slide{
transform: translateX(0);
}
#sp-nav>ul{
background-color: #555;
height: calc(100vh - 60px);
padding: 80px 30px 0;
}
#sp-nav li{
margin-bottom: 18px;
}
#sp-nav a{
display: block;
color: #FFF;
border-bottom: 1px solid #FFF;
}

}


@media (max-width:500px){
/* 商品情報部分 */
.grid{
columns: 1;
}
label{
display: block;
width: 60%;
margin: 10px 20px;
}
}