読者です 読者をやめる 読者になる 読者になる

求職者支援訓練webサイト制作科1月クラス

フェリカテクニカルアカデミー池袋の求職者支援訓練webサイト制作科1月クラスの授業解説ブログです。

既存サイトのトレース|全面レイアウトその1

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

f:id:yachin29:20170105130714p:plain

www.bloomingville.com

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

などです。



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


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

<!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">
</head>

<body>
<div id="container">
<header>
<h1>bloomingville</h1>
</header>
<nav>
<ul class="g_nav">
<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>
</nav>

<div class="inner top">
<div class="photo"></div>
<div class="txt">
<h2>一段目</h2>
</div>
</div>

<div class="inner mid">
<div class="photo"></div>
<div class="txt">
<h2>二段目</h2>
</div>
</div>

<div class="inner bottom">
<div class="photo"></div>
<div class="txt">
<h2>三段目</h2>
</div>
</div>

</div>
</body>
</html>


スタイルシート

@charset "utf-8";
/* CSS Document */

html,body,h1,h2,p,ul,li {
  margin:0;
  padding:0;
  line-height:1.0;
}
ul {
  list-style:none;
}
a {
  text-decoration:none;
  color:#222;
}
img {
  border:none;
  vertical-align:bottom;
}

body {
  background:#F0EDE7;
}

/*ディスプレイの解像度が1366px以上の時*/
#container {
  width:1348px;/*1366pxからスクロールバーの幅分を引いた数字*/
  margin:0 auto;
}
header {
  width:100%;
  height:160px;
  background:#E4DFD6;
}
h1 {
  width:440px;
  height:160px;
  margin:0 auto;
  background:url(../img/logo.svg) no-repeat center/contain;
  text-indent:100%;
  white-space:nowrap;
  overflow:hidden;
}
nav {
  width:100%;
  height:50px;
}
.g_nav {
  width:960px;
  margin:0 auto;
  overflow:hidden;
}
.g_nav li {
  width:calc(100% / 6);
  float:left;
}
.g_nav a {
  display:block;
  line-height:50px;
  text-align:center;
  font-size:14px;
}
.g_nav a:hover {
  border-bottom:1px solid #CC66FF;
}

.inner {
  overflow:hidden;
  padding:0 10px;
  box-sizing:border-box;
  margin-bottom:10px;
}
.photo {
  width:calc(66.66% - 5px);/*演算子の前後に必ずスペース*/
  height:80vh;
}
.txt {
  width:calc(33.33% - 5px); 
  height:80vh;
}
.top .photo {
  float:left;
  background: url(../img/collection-01.jpg) no-repeat center/cover;
}
.top .txt {
  float:right;
  background:#EADEDB;
}
.mid .photo {
  float: right;
  background: url(../img/collection-02.jpg) no-repeat center/cover;
}
.mid .txt {
  float: left;
  background:#B3A0A6;
}
.bottom .photo {
  float: left;
  background: url(../img/collection-03.jpg) no-repeat center/cover;
}
.bottom .txt {
  float: right;
  background:#D0C0B0;
}
@media screen and (max-width:1365px) {
  #container {
  width:100%;
}
}

@media screen and (max-width:959px) {
.g_nav {
  width:100%;
  padding:0 10px;
  box-sizing:border-box;
}
.g_nav li {
  width:auto;
}
.g_nav a {
  display:block;
  line-height:50px;
  text-align:center;
  font-size:14px;
  margin-right:40px;
}
}
@media screen and (max-width:767px) {
.photo {
  width:100%;
  height:40vh;
  float:none;
}
.txt {
  width:100%; 
  height:60vh;
  float:none;
}
}