WEBサイト制作の勉強

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

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

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

2022年11月クラス

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>この文章はダミーです。<br class="sp-on">文字の大きさ、量</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.<br>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="#"><img src="img/twitter.svg" alt=""></a></li>
<li><a href="#"><img src="img/instagram.svg" alt=""></a></li>
<li><a href="#"><img src="img/envelope-regular.svg" alt=""></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{
position: sticky;/* 指定した位置まで来たらfixed */
top: 0;
width: 100%;
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;
}
.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);
}

/* col-1部分 */
.col-1{
width: 100%;
height: 400px;
background-color: var(--color_1);
margin-bottom: 10px;
text-align: center;
padding:100px 20px 20px;
}
.col-1>h2{
margin-bottom: 50px;
}
.sp-on{
display: none;
}
@media (max-width:560px){
.sp-on{
display: block;
}
}

/* col-3部分 */
.col-3-wrapper{
display: flex;
justify-content: space-between;
}
.col-3-box{
width: calc((100% - 20px) / 3);
}
.col-3-img{
width: 100%;
height: 260px;
}
.col-3-img>img{
object-fit: cover;
width: 100%;
height: 100%;
}
.col-3-txt{
background-color: var(--color_3);
padding: 50px 20px;
}
.icon{
width: 80px;
padding: 16px;
margin: 0 auto;
border-radius: 50%;/* 正方形を正円にする */
background-color: #FFF;
}
.col-3-box:nth-of-type(2)>.col-3-txt{
background-color: var(--color_4);
}
.col-3-box:nth-of-type(3)>.col-3-txt{
background-color: var(--color_5);
}
.col-3-txt>h2{
text-align: center;
margin-bottom: 40px;
}

/* footer部分 */
footer{
margin: 0 10px 10px;
background-color: var(--color_2);
padding: 20px;
}
footer>p{
text-align: center;
margin-bottom: 40px;
}
.sns{
display: flex;
justify-content: center;
}
.sns>li{
width: 44px;
margin: 0 20px;
}
.sns>li:nth-of-type(-n+2){
width: 36px;
}

yachin29 読者になる

広告を非表示にする
関連記事
  • 1月17日の作業データ完成版（Furniture-store）
    index.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"> </link></meta></meta></meta></head></html>
  • 12月20日の作業データ（家具屋のECサイト）
    index.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>…</h1></header></body></html>
  • 11月25日作業データ（Furniture-store：完成版）
    index.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>Furniture-store</title> <link rel="preconnect" href="https://fonts.googleapis.com"> </link></meta></meta></meta></head></html>
  • Furniture-storeの作業データ
    index.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>Furniture-store</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <header> <…</header></body></html>
  • 11月26日作業データ
    index.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>Furniture-Store</title> <link rel="preconnect" href="https://fonts.googleapis.com"> </link></meta></meta></meta></head></html>