12月20日の作業データ（家具屋のECサイト）

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>家具屋のECサイトの作成</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<h1>Furniture-store</h1>
</header>
<nav id="g-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="g-nav-sp">
<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>

<main>
<div class="content-wrapper">
  <div class="content-box">
    <div class="content-txt">
      <h2>Lorem, ipsum dolor.</h2>
      <p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti, unde.</p>
      <p class="more-btn"><a href="#">view more</a></p>
    </div><!-- /.content-txt -->
    <div class="content-img">
      <img src="img/main01.jpg" alt="">
    </div><!-- /.content-img -->
  </div><!-- /.content-box -->
  <div class="content-box">
<div class="content-txt">
<h2>Lorem, ipsum dolor.</h2>
<p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti, unde.</p>
<p class="more-btn"><a href="#">view more</a></p>
</div><!-- /.content-txt -->
<div class="content-img">
<img src="img/main02.jpg" alt="">
</div><!-- /.content-img -->
  </div><!-- /.content-box -->
  <div class="content-box">
<div class="content-txt">
<h2>Lorem, ipsum dolor.</h2>
<p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti, unde.</p>
<p class="more-btn"><a href="#">view more</a></p>
</div><!-- /.content-txt -->
<div class="content-img">
<img src="img/main03.jpg" alt="">
</div><!-- /.content-img -->
  </div><!-- /.content-box -->
</div><!-- /.content-wrapper -->

<div class="col-1">
<h2>Lorem ipsum dolor<br>sit amet consectetur</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet perferendis deserunt voluptatem vero quidem.</p>
</div><!-- /.col-1 -->

<div class="col-3-wrapper">

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

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

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

<footer>
<p><small>&copy; 2022 Furniture-store</small></p>
<ul class="sns">
<li><a href="#">tw</a></li>
<li><a href="#">インスタ</a></li>
<li><a href="#">mail</a></li>
</ul>
</footer>
</body>
</html>

style.css

@charset "utf-8";

/* 変数の設定 */
:root{
--color_1:#eeeed1;
--color_2:#d1eed7;
--color_3:#eed9d1;
--color_4:#efd9f2;
--color_5:#ddeed1;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
a{
text-decoration: none;
}
ul{
list-style: none;
}
img{
vertical-align: bottom;
}

/* PCレイアウト */
header{
height: 100px;
background-color: var(--color_1);
text-align: center;
}
h1{
line-height: 100px;
}
#g-nav{
height: 50px;
background-color: var(--color_2);
}
#g-nav>ul{
display: flex;
justify-content: center;
align-items: center;
height: 50px;
max-width: 960px;
margin: 0 auto;
}
#g-nav li{
margin: 0 20px;
}
#g-nav a{
color: #222;
padding: 10px 14px;
}
#g-nav a:hover{
text-decoration: underline 4px #ee96eb;
text-underline-offset: 5px;
}
/* sp用のナビは非表示にする */
#g-nav-sp{
display: none;
}

/* メイン部分のレイアウト */
main{
padding: 10px;
max-width: 1366px;
margin: 0 auto 10px;
}
.content-box{
display: flex;
justify-content: space-between;
height: 600px;
margin-bottom: 10px;
}
.content-box:nth-of-type(odd){
flex-direction: row-reverse;
}
.content-txt{
width: calc((100% - 20px) / 3);
background-color: var(--color_3);
padding: 40px;
}
.content-txt>h2{
margin-bottom: 40px;
}
.text{
font-size: 18px;
line-height: 2;
margin-bottom: 60px;
}
.more-btn{
width: 80%;
margin: 0 auto;
height: 50px;
background-color: #f9fcde;
}
.more-btn>a{
display: block;
line-height: 50px;
text-align: center;
color: #222;
}
.more-btn>a::after{
display: inline-block;
content: "";
width: 10px;
height: 10px;
border-top: 1px solid #222;
border-right: 1px solid #222;
transform: rotate(45deg);
margin-left: 16px;
}

.content-img{
width: calc((100% - 20px) / 3 * 2 + 10px);
height: 600px;
}
.content-img>img{
object-fit: cover;
width: 100%;
height: 100%;
}
.content-box:nth-of-type(2)>.content-txt{
background-color: var(--color_4);
}
.content-box:nth-of-type(3)>.content-txt{
background-color: var(--color_5);
}

WEBサイト制作の勉強

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

12月20日の作業データ（家具屋のECサイト）