モバイルファーストでの既存サイトのトレース

2020.01.08

レスポンシブデザインwebサイト制作

今回トレースするサイトは非常にシンプルで今時な感じがする全画面を使ったグリッドデザインで出来たサイトです。
今の段階で細かい部分の作りをするのは少し難しいので、まずはワイヤーフレームのようにレイアウトのみにしぼって作っていきましょう。

f:id:yachin29:20170105130714p:plain

www.bloomingville.com

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

などです。

1月8日作業分

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>海外家具ECサイトのトレース</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="js/script.js"></script>

<link rel="apple-touch-icon" sizes="192x192" href="touch-icon.png">

</head>
<body>
<header>
<h1>海外家具ECサイト</h1>
<p class="hamburger hamburger--emphatic" id="ham-btn">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</p>
</header>
<nav class="g-nav" id="g-nav-sp">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Shop</a></li>
<li><a href="#">Collections</a></li>
<li><a href="#">Design philosophy</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Creative Collection</a></li>
<li><a href="#">Press</a></li>
</ul>
</nav>
<nav class="g-nav-pc">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Shop</a></li>
<li><a href="#">Collections</a></li>
<li><a href="#">Design philosophy</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Creative Collection</a></li>
<li><a href="#">Press</a></li>
</ul>
</nav>
<div class="container">
<div class="main">
<div class="main-inner">
<div class="main-photo">
<img src="img/main-01.jpg" alt="">
</div>
<div class="main-txt">
<h2 class="main-title">Spring Summer 20</h2>
<p class="main-copy">Spring Summer 20 is finally here! We are dying to introduce you to the trending news ready to revive your home with pure minimalist, comfy and nostalgic interior news with something on its mind, whether your inner interior fashionista swears to clean Nordic lines, cozy oases or feminine romances. Dive in!</p>
<p class="main-btn"><a href="#">Explore collection</a></p>
</div>

</div>
<div class="main-inner">
<div class="main-photo">
<img src="img/main-02.jpg" alt="">
</div>
<div class="main-txt">
<h2 class="main-title">MINI Spring Summer 20</h2>
</div>
</div>
<div class="main-inner">
<div class="main-photo">
<img src="img/main-03.jpg" alt="">
</div>
<div class="main-txt">
<h2 class="main-title">Creative Collection<br> Spring/Summer 2020</h2>
</div>
</div>
</div><!--/.main-->
<div class="philosophy">
<h2>Bringing<br>happiness<br>through<br> change</h2>
<p class="top-txt">The Bloomingville design philosophy can be conveyed in just four words. Not only because we love natural simplicity, but also because we’re deeply inspired by everyday designers – by how they, with great passion, keep their homes ever changing as a way to feel happy and alive.</p>
<p class="bottom-txt">Click to learn more about our design philosophy, to meet the Founder and to connect on social media.
</p>
</div>
<div class="col-outer">
<div class="col-inner">
<div class="col-photo">
<img src="img/col01.jpg" alt="">
</div>
<div class="col-txt">
<h2>Shop Bloomingville in stores or online</h2>
<p class="icon"></p>
<p class="col-btn"><a href="#">Find store</a></p>
</div>
</div>
<div class="col-inner">
<div class="col-photo">
<img src="img/col02.jpg" alt="">
</div>
<div class="col-txt"></div>
</div>
<div class="col-inner">
<div class="col-photo">
<img src="img/col03.jpg" alt="">
</div>
<div class="col-txt"></div>
</div>
</div><!--/.col-outer-->
<footer></footer>
</div><!--/.container-->
</body>
</html>

スタイルシート

@charset "utf-8";

html,body,h1,h2,h3,p,ul,li{
margin: 0;
padding: 0;
}
*{
box-sizing: border-box;
}
ul{
list-style: none;
}
a{
text-decoration: none;
color: #4A4645;/*テキストカラー*/
}
img{
vertical-align: bottom;
max-width: 100%;
}

/*モバイルファースト*/
body{
background:#f0ede7;/*メインカラー*/
}
header{
width: 100%;
height: 55px;
padding: 5px 0;
background:#e4dfd6;
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
}
h1{
width: 150px;
height: 36px;
background: url(../img/logo.svg)no-repeat center center/contain;
white-space:nowrap;
text-indent: 100%;
overflow: hidden;
margin-right: 10px;
}

/*ナビゲーション部分*/
.g-nav{
width: 100%;
height: calc(100vh - 55px);
background:#bed5db;
position: fixed;
top: 55px;
left: 0;
z-index: 9999;
display: none;
}
.g-nav>ul{
background:#f0ede7;
padding: 30px 0 20px 20px;
}
.g-nav li{
margin-bottom: 10px;
}
.g-nav a{
display: block;
font-size: 14px;
padding: 4px 0;
font-weight: bold;
}

/*メイン部分*/
.container{
padding-top: 65px;
max-width: 1366px;
margin: 0 auto;
}
.main-inner{
margin-bottom: 10px;
}
.main-photo{
height: 40vh;
}
.main-photo>img{
width: 100%;
height: 40vh;
object-fit: cover;
}
.main-txt{
height: 80vh;
background:#FFF;
text-align: center;
}
.main-inner:nth-of-type(2)>.main-txt{
background:#ddd1ba;
}
.main-title{
font-size: 26px;
font-weight: normal;
padding: 40px 0;
}
.main-copy{
font-size: 14px;
padding: 0 10px;
line-height: 1.8;
margin-bottom: 30px;
}
.main-btn{
display:inline-block;
}
.main-btn>a{
display: block;
text-align: center;
background:#f0ede7;
padding: 18px;
font-size: 14px;
}

/*philosophy部分*/
.philosophy{
background-color:#ada290;
text-align: center;
margin-bottom: 10px;
}
.philosophy>h2{
font-size: 36px;
font-weight:normal;
padding: 60px 0;
line-height: 2;
}
.philosophy>p{
padding: 40px;
font-size: 14px;
line-height: 1.8;
}
.philosophy>p.bottom-txt{
padding-bottom: 80px;
}

/*カラム部分*/
.col-photo{
height: 35vh;
}
.col-photo>img{
width: 100%;
height: 35vh;
object-fit: cover;
}
.col-txt{
height: 55vh;
background: #e4dfd6;
margin-bottom: 10px;
text-align: center;
}
.col-txt>h2{
padding: 50px 0;
}
.col-btn{
display:inline-block;
}
.col-btn>a{
display: block;
text-align: center;
background:#f0ede7;
padding: 18px;
font-size: 14px;
}
footer{
height: 100vh;
background: #bed5db;
}

/*ハンバーガーメニュー*/
.hamburger {
  padding: 15px 15px;
  display: inline-block;
  cursor: pointer;
  transition-property: opacity, filter;
  transition-duration: 0.15s;
  transition-timing-function: linear;
  font: inherit;
  color: inherit;
  text-transform: none;
  background-color: transparent;
  border: 0;
  margin: 0;
  overflow: visible; }
  .hamburger:hover {
    opacity: 0.7; }
  .hamburger.is-active:hover {
    opacity: 0.7; }
  .hamburger.is-active .hamburger-inner,
  .hamburger.is-active .hamburger-inner::before,
  .hamburger.is-active .hamburger-inner::after {
    background-color: #000; }

.hamburger-box {
  width: 40px;
  height: 24px;
  display: inline-block;
  position: relative; }

.hamburger-inner {
  display: block;
  top: 30%;
  margin-top: -2px; }
  .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
    width: 20px;
    height: 2px;
    background-color: #000;
    border-radius: 4px;
    position: absolute;
    transition-property: transform;
    transition-duration: 0.15s;
    transition-timing-function: ease; }
  .hamburger-inner::before, .hamburger-inner::after {
    content: "";
    display: block; }
  .hamburger-inner::before {
    top: -5px; }
  .hamburger-inner::after {
    bottom: -5px; }

/*
   * Emphatic
   */
.hamburger--emphatic {
  overflow: hidden; }
  .hamburger--emphatic .hamburger-inner {
    transition: background-color 0.125s 0.175s ease-in; }
    .hamburger--emphatic .hamburger-inner::before {
      left: 0;
      transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, left 0.125s 0.175s ease-in; }
    .hamburger--emphatic .hamburger-inner::after {
      top: 5px;
      right: 0;
      transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, right 0.125s 0.175s ease-in; }
  .hamburger--emphatic.is-active .hamburger-inner {
    transition-delay: 0s;
    transition-timing-function: ease-out;
    background-color: transparent !important; }
    .hamburger--emphatic.is-active .hamburger-inner::before {
      left: -80px;
      top: -80px;
      transform: translate3d(80px, 80px, 0) rotate(45deg);
      transition: left 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); }
    .hamburger--emphatic.is-active .hamburger-inner::after {
      right: -80px;
      top: -80px;
      transform: translate3d(-80px, 80px, 0) rotate(-45deg);
      transition: right 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); }


.g-nav-pc{
display: none;
}
@media (min-width:768px){
/*タブレット用CSS*/
header{
width: 100%;
height:auto;
padding: 20px 0;
background:#e4dfd6;
display: flex;
flex-direction: row-reverse;
justify-content:center;
position:static;
}
h1{
width: 440px;
height: 102px;
}
/*sp用なび*/
.g-nav{
display: none;
}
.hamburger{
display: none;
}
/*pc用なび*/
.g-nav-pc{
display: block;
width: 100%;
height: 56px;
position:sticky;
top: 0;
left: 0;
background:#f0ede7;
}
.g-nav-pc>ul{
display: flex;
justify-content: flex-start;
}
.g-nav-pc li{
margin: 0 16px;
}
.g-nav-pc a{
display: block;
line-height: 56px;
text-align: center;
font-size: 14px;
}
.container{
padding: 0 10px 10px;
}
/*メイン部分*/
.main-inner{
display: flex;
justify-content: space-between;
}
.main-inner:nth-of-type(2){
flex-direction: row-reverse;
}
.main-photo{
width: 60%;
height:calc(100vh - 56px);
}
.main-photo>img{
width: 100%;
height: calc(100vh - 56px);
}
.main-txt{
width:calc(40% - 10px);
height: calc(100vh - 56px);
}


/*カラム部分*/
.col-inner{
display: flex;
height: 400px;
margin-bottom: 10px;
}
.col-photo{
height: 400px;
width: 50%;
}
.col-photo>img{
width: 100%;
height: 400px;
object-fit: cover;
}
.col-txt{
width: 50%;
height: 400px;
background: #e4dfd6;
margin-bottom: 10px;
text-align: center;
}
.col-txt>h2{
padding: 50px 20px;
}
}

@media (min-width:901px){

.title-logo>h1{
width: 140px;
height: 20px;
position: fixed;
top: 18px;
left: 10px;
z-index: 9999;
}
/*pc用なび*/
.g-nav-pc>ul{
display: flex;
justify-content:center;
}

/*ホバーアニメーション*/
.g-nav-pc a{
position: relative;
z-index: 1;
}
.g-nav-pc a::after{
display: block;
content: "";
width: 100%;
height: 0;
background-color: #E1D4E3;
position: absolute;
top: 6px;
right: 0;
bottom: 0;
left: 0;
margin: auto;
z-index: -1;
transition: 0.2s;
}
.g-nav-pc a:hover::after{
height: 8px;
z-index: -1;
}




/*カラム部分*/
.col-outer{
display: flex;
justify-content: space-between;
}
.col-inner{
width: calc((100% - 20px) / 3);
display: block;
height: 600px;
}
.col-photo{
height: 200px;
width: 100%;
}
.col-photo>img{
width: 100%;
height: 200px;
object-fit: cover;
}
.col-txt{
width: 100%;
height: 400px;
background: #e4dfd6;
margin-bottom: 10px;
text-align: center;
}
}

jquery

$(function(){

//ハンバーガーボタンの設定
$('#ham-btn').on('click',function(){
//「.is-active」をtoggleする
$(this).toggleClass('is-active');
//#g-nav-spをslideToggle
$('#g-nav-sp').slideToggle(200);
});

//スクロールイベントの設定
//header要素のouterHeightを取得し変数hに代入
var h=$('header').outerHeight();
console.log(h);
//変数h以上スクロールしたら、header要素に「.title-logo」をaddClassする
$(window).scroll(function(){
if($(window).scrollTop()>h){
$('header').addClass('title-logo');
}else{
$('header').removeClass('title-logo');
}
});

});

コメント

タイトルとURLをコピーしました