WEBサイト制作の勉強

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

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

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

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="pc-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>


<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(){
//#ham-btnをon.clickしたら
$('#ham-btn').on('click',function(){
//thisに「is-active」をtoggleClassする
$(this).toggleClass('is-active');
});
});
</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;
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: #d13434;
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;
}
}