webサイト制作の勉強|2018月2月クラスブログ

webサイト制作の勉強に関する解説ブログです。

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

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

f:id:yachin29:20170105130714p:plain

www.bloomingville.com

今回のレイアウトのポイント
  • フルスクリーンでのグリッドレイアウト
  • ドミナントカラーを使ったデザイン
  • 可変のブロックに固定値のマージン
  • ある程度スクロールするとグローバルナビがページ上部に固定

などです。



作例
http://yachin29.webcrow.jp/bloom/


http://yoshi1004.webcrow.jp/content/kirin/




生徒の作例
http://yoshi1004.webcrow.jp/content/kaguya/

Bloomingville(既存サイトのトレース)


index.html

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>モバイルファーストサイトのトレース</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-2.2.4.min.js"></script>
<script>
$(function(){
	$('#btn').on('touchend',function(){
		$(this).toggleClass('hum');
		$('#g_nav').slideToggle(300);
	});
});
</script>
</head>

<body>
<header>
<h1>ロゴ</h1>
<p id="btn"><span></span></p>
</header>


<nav id="g_nav">
<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="#">Press</a></li>
<li><a href="#">About</a></li>
</ul>
<div class="retaliers">
<p class="to_retaliers">retaliers</p>
</div>
</nav>
<div class="wrapper">
<div class="img_box top"></div>
<div class="txt_box top_txt"></div>
</div>
<div class="wrapper">
<div class="img_box bottom"></div>
<div class="txt_box bottom_txt"></div>
</div>
<div class="content_inner">
<div class="philosophy"></div>
<div class="col-3_wrapper">
<div class="col-3">
<div class="col-3_img left"></div>
<div class="cap">
<h3>カラムタイトル</h3>
<p>タイトルの説明文タイトルの説明文</p>
</div>
</div>
<div class="col-3">
<div class="col-3_img center"></div>
</div>
<div class="col-3">
<div class="col-3_img right"></div>
</div>
</div><!--/.col-3_wrapper-->
<footer></footer>
</div><!--/.content_inner-->
</body>
</html>

スタイルシート

body {
  background:#F0EDE7;
}
/*スマホレイアウト*/
header {
  width:100%;
  height:55px;
  background:#e4dfd6;
  overflow:hidden;
  padding:5px 0;
  margin-bottom:10px;
}
h1 {
  width:150px;
  height:45px;
  background:url(../img/logo-small.svg) no-repeat center center/contain;
  float:right;
  white-space:nowrap;
  text-indent:100%;
  overflow:hidden;
  margin-right:20px;
}
#g_nav {
  width:100%;
  height:calc(100vh - 55px);
  background:#f0ede7;
  position:absolute;
  top:55px;
  left:0;
  z-index:9999;
  display:none;
}
#g_nav ul {
  margin-top:20px;
  height:calc(50vh - 55px);
}
#g_nav li {
  margin: 0 0 20px 20px;
}
#g_nav li a {
  display:block;
  text-decoration:none;
  color:#222;
  font-size:14px;
}
.retaliers {
  height:50vh;
  background:#bed5db;
}


.wrapper {
  margin-bottom:10px;
}
.img_box {
  width:100%;
  height:30vh;
}
.img_box.top {
  background:url(../img/frontpage1.jpg) no-repeat center center/cover;
}
.img_box.bottom {
  background:url(../img/frontpage2.jpg) no-repeat center center/cover;
}
.txt_box {
  width:100%;
  height:70vh;
}
.txt_box.top_txt {
  background:#DEE6F0;
}
.txt_box.bottom_txt {
  background:#DDD4CD;
}

.philosophy {
  width:100%;
  height:100vh;
  background:#EADCD1;
  margin-bottom:10px;
}
.col-3 {
  width:100%;
  height:100vh;
  background:#e4dfd6;
  margin-bottom:10px;
}
.col-3_img {
  width:100%;
  height:30vh;
}
.col-3_img.left {
  background:url(../img/col-3_1.jpg) no-repeat center center/cover;
}
.col-3_img.center {
  background:url(../img/col-3_2.jpg) no-repeat center center/cover;
}
.col-3_img.right {
  background:url(../img/col-3_3.jpg) no-repeat center center/cover;
}
.col-3 h3 {
  text-align:center;
  padding-top:50px;
}
footer {
  width:100%;
  height:100vh;
  background:#bed5db;
}

/*ハンバーガー*/
p#btn {
  width:45px;
  height:45px;
  margin-left:5px;
  position:relative;
}
p#btn span {
  display:block;
  width:20px;
  height:2px;
  background:#000000;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  margin:auto;
  transition:0.2s;
}
p#btn span:before {
  display:block;
  content:"";/*before・after要素には必ず入れる*/
  width:20px;
  height:2px;
  background:#000000;
  position:absolute;
  top:-12px;
  right:0;
  bottom:0;
  left:0;
  margin:auto;
  transition:0.2s;
}
p#btn span:after {
  display:block;
  content:"";/*before・after要素には必ず入れる*/
  width:20px;
  height:2px;
  background:#000000;
  position:absolute;
  top:0;
  right:0;
  bottom:-12px;
  left:0;
  margin:auto;
  transition:0.2s;
}
p#btn.hum span {
  background:transparent;
}
p#btn.hum span:before {
  transform:rotate(45deg);
  top:0;
}
p#btn.hum span:after {
  transform:rotate(135deg);
  bottom:0;
}

@media screen and (min-width:768px){
/*768~900までのレイアウト*/
header {
  height:auto;
  margin-bottom:0;
}
h1 {
  width:440px;
  height:102px;
  float:none;
  margin:20px auto 0;
}

/*ナビゲーション*/
p#btn {
  display:none;
}
#g_nav {
  display:block;
  width:100%;
  height:55px;
  position:static;
}
#g_nav ul {
  width:80%;
  float:left;
  margin-top:0;
  height:55px;
  display:flex;
    background:#CC3333;
}
#g_nav li a {
  line-height:55px;
}
.retaliers {
  width:10%;
  float:right;
  height:55px;
 /* background:transparent;*/
}
.to_retaliers {
  line-height:55px;
  text-align:right;
  margin-right:20px;
  font-weight:bold;
}
.wrapper {
  overflow:hidden;
  padding:0 10px;
}
.img_box {
  width:calc(66.66% - 5px);
  height:100vh;
}
.txt_box {
  width:calc(33.33% - 5px);
  height:100vh;
}
.img_box.top {
  float:left;
}
.img_box.bottom {
 float:right;
}
.txt_box.top_txt {
 float:right;
}
.txt_box.bottom_txt {
  float:left;
}


.content_inner {
  padding: 0 10px 10px;
}
/*3カラム部分*/
.col-3 {
  height:70vh;
  overflow:hidden;
}
.col-3_img {
  width:50%;
  height:70vh;
  float:left;
}
.cap {
  width:50%;
  height:70vh;
  float:right;
}
}
@media screen and (min-width:901px){
  /*901~1366pxまでのレイアウト*/

#g_nav ul {
  width:80%;
  float:left;
  margin-left:10%;
  justify-content: center;
}
.col-3_wrapper {
  overflow:hidden;
}
.col-3 {
  width:calc((100% - 20px) / 3);
  float:left;
  margin-right:10px;
  height:calc(100vh - 55px);
}
.col-3:last-child {
  margin-right:0;
}
.col-3_img {
  width:100%;
  height:30vh;
  float:none;
}
.cap {
  width:100%;
  height:calc(70vh - 55px);
  float:none;
}
}
@media screen and (min-width:1367px){
  /*1367px以上のPC用レイアウト*/
.wrapper,.content_inner {
  width:1366px;
  margin:0 auto;
}
}