既存サイトのトレース｜家具のECサイト

今回トレースするサイトは非常にシンプルで今時な感じがする全画面を使ったグリッドデザインで出来たサイトです。

f:id:yachin29:20201112151202j:plain

www.bloomingville.com

今回のレイアウトのポイント

最大幅を指定したグリッドレイアウト
cssはモバイルサイズから指定（モバイルファースト）
ドミナントカラーを使ったデザイン
可変のブロックに固定値のマージン
ある程度スクロールするとグローバルナビがページ上部に固定
スマホ時にはハンバーガーメニュー

などです。

ドミナントカラー

ドミナントとは「支配」するという意味です。色相を統一した多色配色をドミナントカラー配色といいます。
色相は同一色相で、トーンは自由に選択できる配色です。ただし必ず同一色相にしなければならないわけではなく、色相に統一感がある場合は隣接・類似色相から選択しても構いません。色と色との明度差を小さくすることでより統一感が生まれ、色によるイメージの支配を強く図ることができます。

f:id:yachin29:20190930214255j:plain

blog.iroko.jp

ベースカラー

#f0ede7

メインカラー

#e4dfd6

テキストカラー

#4A4645

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>ロゴ</h1>
<p id="ham"><span></span></p>
</header>
<nav id="g-nav">
<ul>
    <li class="current"><a href="#">Home</a></li>
    <li><a href="#">Shop</a></li>
    <li><a href="#">Collections</a></li>
    <li><a href="#">Bloomingville</a></li>
    <li><a href="#">MINI</a></li>
    <li><a href="#">Creative Collection</a></li>
    <li><a href="#">ILLUME x Bloomingville</a></li>
    <li><a href="#">Press</a></li>
</ul>
</nav>
<div class="container">
<main>
<div class="main-content">
    <div class="main-wrapper">
        <div class="main-txt">
            <h2>Christmas 2020</h2>
            <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut </p>
            <p class="main-btn btn"><a href="#">Check out Christmas 2020</a></p>
        </div>
        <div class="main-photo">
            <img src="img/main01.jpg" alt="">
        </div>
    </div><!-- /.main-wrapper -->
    <div class="main-wrapper">
        <div class="main-txt">
            <h2>Anniversary donation 2020</h2>
            <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut</p>
            <p class="more"><a href="#">see more</a></p>
        </div>
    </div><!-- /.main-wrapper -->
    <div class="main-wrapper">
        <div class="main-txt">
            <h2>AW20 Anniversary collection</h2>
            <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut </p>
            <p class="main-btn btn"><a href="#">Explore collection</a></p>
        </div>
        <div class="main-photo">
            <img src="img/main02.jpg" alt="">
        </div>
    </div><!-- /.main-wrapper -->
    <div class="main-wrapper">
        <div class="main-txt">
            <h2>ILLUME x Bloomingville</h2>
            <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut </p>
            <p class="main-btn btn"><a href="#">Check out ILLUME x Bloomingville</a></p>
        </div>
        <div class="main-photo">
            <img src="img/main03.jpg" alt="">
        </div>
    </div><!-- /.main-wrapper -->
</div><!-- /.main-content -->

<div class="col-wrapper">
<div class="col-box">
    <div class="col-photo">
        <img src="img/col-photo01.jpg" alt="">
    </div>
    <div class="col-txt">
        <h3>Shop Bloomingville in<br class="sp">stores or online</h3>
        <p class="col-icon">アイコンアイコンアイコンアイコン</p>
        <p class="main-btn btn"><a href="#">Find store</a></p>
    </div>
</div><!-- /.col-box -->
<div class="col-box">
    <div class="col-photo">
        <img src="img/col-photo02.jpg" alt="">
    </div>
    <div class="col-txt">
        <h3>SWant to become a Retailer?</h3>
        <p class="col-icon"></p>
        <p class="main-btn btn"><a href="#">Apply now</a></p>
    </div>
</div><!-- /.col-box -->
<div class="col-box">
    <div class="col-photo">
        <img src="img/col-photo03.jpg" alt="">
    </div>
    <div class="col-txt">
        <h3>Meet us at the season's tradeshows</h3>
        <p class="col-icon"></p>
        <p class="main-btn btn"><a href="#">See upcoming tradeshows</a></p>
    </div>
</div><!-- /.col-box -->
</div><!-- /.col-wrapper -->
</main>
<footer></footer>
</div><!-- /.container -->
</body>
</html>

style.scss

@charset "utf-8";
@import "_reset.scss";
@import "_color.scss";
@import "_mixin.scss";

/* spレイアウト */
body{
background-color: $base;
font-size: 14px;
color: $text;
}
img{
max-width: 100%;
}
header{
width: 100%;
height: 60px;
background-color: $main;
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
align-items: center;
padding: 0 10px;
@include tab{
height: 160px;
}

h1{
width: 150px;
height: 36px;
background: url(../img/logo.svg)no-repeat center center/contain;
white-space: nowrap;
text-indent: 100%;
overflow: hidden;
@include tab{
    width: 440px;
    height: 102px;
    margin: 0 auto;
}
}
}
#ham{
width: 44px;
height: 44px;
position: relative;
@include tab{
    display: none;
}
span{
display: block;
width: 20px;
height: 2px;
background-color: $text;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
&::before{
display: block;
content: "";
width: 20px;
height: 2px;
background-color: $text;
position: absolute;
top: -14px;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
&::after{
display: block;
content: "";
width: 20px;
height: 2px;
background-color: $text;
position: absolute;
top: 0;
right: 0;
bottom: -14px;
left: 0;
margin: auto;
}
}
}

#g-nav{
width: 100%;
height: calc(100vh - 60px);
background-color: $accent;
display: none;
@include tab{
    display: block;
    height: 56px;
    position: sticky;
    top: 0;/* 指定した位置に来たら固定になる */
    z-index: 100;
}
ul{
background-color: $base;
@include tab{
    display: flex;
    padding-left: 10px;
    li{
        height: 56px;
        margin: 0 12px;
    @include pc{
        margin: 0 20px;
    }
        a{
            font-size: 13px;
            color: $text;
            line-height: 56px;
            @include pc{
                font-size: 14px;
            }
        }
    }
}
@include pc{
    justify-content: center;
}
}  
}



/* main-content部分 */
.container{
max-width: 1366px;
margin: 0 auto;
@include tab{
padding: 0 10px 10px;
}
}
.main-wrapper{
display: flex;
flex-direction: column;
margin-bottom: 10px;

&:nth-of-type(2)>.main-txt{
background-color: #afa891;
height: 80vh;
@include tab{
width: 100%;
}
}
@include tab{
flex-direction: row;
justify-content: space-between;

&:nth-of-type(4){
flex-direction: row-reverse;
}
}
}

.main-photo{
height: 250px;
order: 1;
img{
object-fit: cover;
width: 100%;
height: 100%;
}
@include tab{
width: calc(60% - 10px);
height: 80vh;
}
}

.main-txt{
background-color: #FFF;
order: 2;
text-align: center;
@include tab{
width: 40%;
}
}


/* カラム部分 */
.col-wrapper{
@include pc{
display: flex;
justify-content: space-between;
}
.col-box{
@include tab{
    display: flex;
    .col-photo,.col-txt{
        width: 50%;
        @include pc{
        width: 100%;
        }
    }
}
@include pc{
    display: block;
    width: calc((100% - 20px) / 3);
}

.col-photo{
height: 220px;
@include tab{
    height: auto;
    padding-bottom: 10px;
}
img{
object-fit: cover;
width: 100%;
height: 100%;
}
}
.col-txt{
background-color: $main;
margin-bottom: 10px;
text-align: center;
h3{
font-size: 24px;
font-weight: normal;
padding: 40px 0;
}
.col-icon{
width: 86px;
height: 86px;
margin: 40px auto;
border-radius: 50%;
background:$base url(../img/map-icon.svg)no-repeat center center/40px;
white-space: nowrap;
text-indent: 100%;
overflow: hidden;
}
@include pc{
    height: 480px;
}
}
&:nth-of-type(2) .col-icon{
background:$base url(../img/col-icon.svg)no-repeat center center/40px;
}
}
}
footer{
width: 100%;
height: 100vh;
background-color: $accent;
}

/* ボタン用スタイル */
.main-btn>a{
display: inline-block;
padding: 16px 20px;
background-color: $base;
margin: 40px auto;
color: $text;
&::after{
display: inline-block;
content: "";
width: 10px;
height: 10px;
border-top: 1px solid $text;
border-right: 1px solid $text;
transform: rotate(45deg);
margin-left: 16px;
}
}
.btn>a{
transition: 0.2s;
&:hover{
transform: translate(10px,0);
}
&:hover::after{
transform: translate(4px,0) rotate(45deg);
}
}

WEBサイト制作の勉強

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