WEBサイト制作の勉強

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

8月17日の作業データ（Furniture-store）

制作ポイント

・PC時は横並びのナビゲーションで、sp時はハンガーガーメニューに切り替える、その際にmatchMediaを使用する
・モバイルファーストでのサイト制作
・トーンを合わせたカラーマネジメント
・ハンガーガーボタンをプラグインを使わずに自作
・ローディングアニメーションにsvgのドローイングアニメーションを使用
・Sassを使ってのサイト制作
- @useを使ってパーシャルファイルを呼び出す
- @mixinを使ってメディアクエリを関数化する

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>インテリアショップのECサイト</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<h1>Furniture-store</h1>
<button id="ham-btn"><span></span></button>
</header>

<nav id="sp-nav">
<ul>
<li><a href="#">Brands</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Stores</a></li>
<li><a href="#">Catalogs</a></li>
<li><a href="#">Styling tips</a></li>
<li><a href="#">Partners & Press</a></li>
</ul>
</nav>

<div class="container">
<main>
<div class="content-wrapper">
<div class="content-box">
<div class="content-txt">
<h2>Lorem, ipsum</h2>
<p class="text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Numquam doloribus inventore eum cum magni?</p>
<p class="more-btn"><a href="#">view more</a></p>
</div>
<div class="content-img">
<img src="img/main-1.jpg" alt="">
</div>
</div><!-- /.content-box -->

<div class="content-box">
<div class="content-txt">
<h2>Lorem, ipsum</h2>
<p class="text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Numquam doloribus inventore eum cum magni?</p>
<p class="more-btn"><a href="#">view more</a></p>
</div>
<div class="content-img">
<img src="img/main-2.jpg" alt="">
</div>
</div><!-- /.content-box -->

<div class="content-box">
<div class="content-txt">
<h2>Lorem, ipsum</h2>
<p class="text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Numquam doloribus inventore eum cum magni?</p>
<p class="more-btn"><a href="#">view more</a></p>
</div>
<div class="content-img">
<img src="img/main-3.jpg" alt="">
</div>
</div><!-- /.content-box -->
</div><!-- /.content-wrapper -->



<div class="col-1">
<h2>Lorem ipsum dolor sit, amet consectetur adipisicing elit.<br>
Totam accusantium impedit necessitatibus? Ipsa, ipsum.</h2>
<p class="lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus labore laborum hic rem nulla commodi. Sequi mollitia voluptate accusamus recusandae assumenda minus? Ex autem sint omnis a maxime qui repellendus!</p>
</div><!-- /.col-1 -->
<div class="col-3-wrapper">
<div class="col-3-box">
<div class="col-3-txt">
<h2>Lorem, ipsum</h2>
<p class="icon"><img src="img/icon-1.svg" alt=""></p>
</div>
<div class="col-3-img">
<img src="img/col-3-1.jpg" alt="">
</div>
</div><!-- /.col-3-box -->

<div class="col-3-box">
<div class="col-3-txt">
<h2>Lorem, ipsum</h2>
<p class="icon"><img src="img/icon-2.svg" alt=""></p>
</div>
<div class="col-3-img">
<img src="img/col-3-2.jpg" alt="">
</div>
</div><!-- /.col-3-box -->

<div class="col-3-box">
<div class="col-3-txt">
<h2>Lorem, ipsum</h2>
<p class="icon"><img src="img/icon-3.svg" alt=""></p>
</div>
<div class="col-3-img">
<img src="img/col-3-3.jpg" alt="">
</div>
</div><!-- /.col-3-box -->
</div><!-- /.col-3-wrapper -->
</main>
<footer>
<p><small>&copy; 2023 Furniture-store</small></p>
<ul class="sns">
<li><a href="#"><img src="img/x-twitter.svg" alt=""></a></li>
<li><a href="#"><img src="img/instagram.svg" alt=""></a></li>
<li><a href="#"><img src="img/tiktok.svg" alt=""></a></li>
</ul>
</footer>
</div><!-- /.container -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(function(){
//bodyの幅を取得
let windowWidth = $(window).innerWidth();
console.log(windowWidth);

//resizeの設定
$(window).resize(function(){
//リサイズした時の幅
let currentWidth = $(window).innerWidth();
console.log(currentWidth);

if(currentWidth ==  windowWidth){
//幅が変わっていない時(高さが変わった時)は何もしない
return;
}else{
//幅が変わった時
if(window.matchMedia('(min-width:900px)').matches){
//bodyの幅が900px以上の時はnavを表示
$('#sp-nav').css('display','block');
$('#ham-btn').removeClass('is-active');
}else{
//bodyの幅が899px以下の時はnavを非表示
$('#sp-nav').css('display','none');
}
}



});

//#ham-btnをon.clickしたら
$('#ham-btn').on('click',function(){
//thisに「is-active」をtoggleClassする
$(this).toggleClass('is-active');
$('#sp-nav').slideToggle(200);
});
});
</script>

</body>
</html>

style.scss

//パーシャルファイルを呼び出す
@use "reset";
@use "color";


//ブレイクポイントをローカル変数で登録
$sp-point:620px;
$tab-point:900px;
$pc-point:1366px;

//メディアクエリをmixin関数で登録する
@mixin sp{
@media (min-width:$sp-point){
@content;
}
}
@mixin tab{
@media (min-width:$tab-point){
@content;
}
}
@mixin pc{
@media (min-width:$pc-point){
@content;
}
}


//spレイアウト

header{
background-color: var(--color_1);
width: 100%;
height: 70px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 15px;
position: fixed;
top: 0;
left: 0;
z-index: 10;
h1{
font-size: 26px;
}
#ham-btn{
display: block;
width: 40px;
height: 40px;
background-color: #FFF;
position: relative;
span{
display: block;
width: 24px;
height: 3px;
background-color: #000;
position: absolute;
top: -14px;
right: 0;
bottom: 0;
left: 0;
margin: auto;
transition: 0.2s;
&::after{
content: "";
display: block;
width: 24px;
height: 3px;
background-color: #000;
position: absolute;
top: 14px;
right: 0;
bottom: 0;
left: 0;
margin: auto;
transition: 0.2s;
}
}
}
}//headerの閉じ


#ham-btn.is-active{
border-radius: 50%;
}

#ham-btn.is-active>span{
top: 0;
rotate: 45deg;
&::after{
top: 0;
rotate: 450deg;
}
}

//ナビゲーション
#sp-nav{
position: fixed;
top: 70px;
left: 0;
width: 100%;
height: calc(100vh - 70px);
background-color: var(--color_2);
padding: 30px;
li{
margin-bottom: 16px;
a{
display: block;
color: #111;
padding: 8px;
border-bottom: 1px solid #111;
}
}
display: none;


@include tab(){
display: block;
width: 100%;
height: 50px;
}
}

.container{
padding:80px 10px 10px;
}
//メインビジュアル部分
.content-wrapper{

.content-box{
display: flex;
flex-direction: column-reverse;

.content-txt{
background-color: var(--color_3);
padding: 40px;
margin: 10px 0;
h2{
text-align: center;
margin-bottom: 20px;
}
.text{
line-height: 1.7;
margin-bottom: 40px;
}
.more-btn{
width: 240px;
background-color: #FFF;
text-align: center;
margin: 0 auto;
a{
display: block;
padding: 16px 0;
color: #111;
font-weight: bold;
position: relative;
transition: 0.2s;
&::after{
content: "";
display: inline-block;
width: 12px;
height: 12px;
border-top: 2px solid #111;
border-right: 2px solid #111;
/* rotate: 45deg; */
position: absolute;
right: 30px;
}
&:hover{
text-indent: 20px;
}
}
}
}
&:nth-of-type(2)>.content-txt{
background-color: var(--color_4);
}
&:nth-of-type(3)>.content-txt{
background-color: var(--color_1);
}

.content-img{
width: 100%;
height: 50vh;
img{
object-fit: cover;
width: 100%;
height: 100%;
}
}
}
}

//1カラム部分
.col-1{
background-color: var(--color_2);
padding: 40px;
text-align: center;
margin-bottom: 10px;
h2{
margin-bottom: 40px;
}
.lead{
line-height: 1.7;
}
}

//3カラム部分
.col-3-wrapper{

.col-3-box{
display: flex;
flex-direction: column-reverse;
.col-3-txt{
background-color: var(--color_5);
margin: 10px 0;
padding: 40px;
h2{
text-align: center;
margin-bottom: 30px;
}
.icon{
width: 80px;
height: 80px;
background-color: #FFF;
margin: 0 auto;
border-radius: 50%;
padding: 16px;
position: relative;
img{
display: block;
position: absolute;
width: 50px;
height: 50px;
inset: auto;
left: 10px;
}
}
}

.col-3-img{
width: 100%;
height: 40vh;
img{
object-fit: cover;
width: 100%;
height: 100%;
}
}
}
}

//フッター部分
footer{
width: 100%;
padding: 40px 20px;
background-color: var(--color_4);
p{
text-align: center;
margin-bottom: 30px;
}
.sns{
display: flex;
justify-content: center;
li{
width: 44px;
height: 44px;
margin-right: 20px;
a{
display: block;
}
&:nth-of-type(3){
width: 38px;
}
}
}
}