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

求職者支援訓練webサイト制作科授業資料

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

全画面レイアウトのRWDサイト

f:id:yachin29:20161026201426p:plain


スマホレイアウト

f:id:yachin29:20161027204011p:plain


今までの授業ではカラムレイアウトを中心にレスポンシブデザインサイトの制作をして来ましたが、今回は既存のサイトをモデルにした全面レイアウトでのレスポンシブサイトを作っていきましょう。

全面レイアウトの場合、そのような考えで画像をサイズを決めなければいけないか、しっかりと理解しましょう。ホバーに関してはモデルとなっている既存サイトの動きを確認し、CSS3のtransitionを使って動かしてみましょう。


今まで授業で習った事を上手く組み合わせれば、今回のようなレイアウトのRWDサイトも問題無く制作出来るので、自分なりに色々と工夫をしてみましょう。
それと同時に、今まで習った基礎的な部分をしっかりと復習し必ず理解しておきましょう。

今回はスクリーンのサイズを幅1800px・高さ900pxを想定して背景画像を用意しましょう。



参考サイト
www.vogue.co.jp

http://mosaic-theme-active.myshopify.com/


<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>全画面レイアウトのRWDサイト</title>
<link rel="stylesheet" href="style2.css">
</head>
<body>
<h1><img src="img/logo2.svg"><a href="#">vogueの模擬サイト</a></h1>
<div class="top tL">
<div class="cap">
<h2>From Our Archives</h2>
<p class="description">モードのハイライトをプレイバック!<br>VOGUE JAPAN撮りおろしのアーカイブビジュアル集。</p>
<p class="more"><a href="#">view more ></a></p>
</div><!-- /.cap -->
</div>

<div class="top tR">
<div class="cap">
<h2>From Our Archives</h2>
<p class="description">モードのハイライトをプレイバック!<br>VOGUE JAPAN撮りおろしのアーカイブビジュアル集。</p>
<p class="more"><a href="#">view more ></a></p>
</div><!-- /.cap -->
</div>

<div class="bottom bL">
<div class="cap">
<h2>From Our Archives</h2>
<p class="description">モードのハイライトをプレイバック!<br>VOGUE JAPAN撮りおろしのアーカイブビジュアル集。</p>
<p class="more"><a href="#">view more ></a></p>
</div><!-- /.cap -->
</div>

<div class="bottom bC">
<div class="cap">
<h2>From Our Archives</h2>
<p class="description">モードのハイライトをプレイバック!<br>VOGUE JAPAN撮りおろしのアーカイブビジュアル集。</p>
<p class="more"><a href="#">view more ></a></p>
</div><!-- /.cap -->
</div>

<div class="bottom bR">
<div class="cap">
<h2>From Our Archives</h2>
<p class="description">モードのハイライトをプレイバック!<br>VOGUE JAPAN撮りおろしのアーカイブビジュアル集。</p>
<p class="more"><a href="#">view more ></a></p>
</div><!-- /.cap -->
</div>
</body>
</html>


PC時のレイアウト

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

html,body,h1,p,h2 {
  margin:0;
  padding:0;
  line-height:1.0;
  font-family:"Hiragino Kaku Gothic Pro", Meiryo, sans-serif;
}
a {
  text-align:center;
  text-decoration:none;
  color:#C9B274;
}
img {
  vertical-align:bottom;
}

/*PCレイアウト部分*/

h1 {
  width:168px;
  height:168px;
  background:#FFFFFF;
  position:absolute;
  top:10px;
  right:10px;
  bottom:10px;
  left:10px;
  margin:auto;
}
h1 a {
  display:block;
  white-space:nowrap;
  text-indent:100%;
  overflow:hidden;
}

.top {
  width:50%;
  height:50vh;
  float:left;
  overflow:hidden;
}
.bottom {
  width:33.33%;
  height:50vh;
  float:left;
  overflow:hidden;
}
.tL {
  background: url(img/L1.png) no-repeat center center/cover;
}
.tR {
  background: url(img/L2.png) no-repeat center center/cover;
}
.bL {
  background: url(img/S1.png) no-repeat center center/cover;
}
.bC {
  background: url(img/S2.png) no-repeat center center/cover;
  width:33.34%;
}
.bR {
  background: url(img/S3.png) no-repeat center center/cover;
}


/*ホバーアクション部分*/
.cap {
  width:100%;
  padding-top:30vh;
  padding-bottom:5vh;
  background: rgba(245,44,67,0);
  cursor:pointer;
  transition: ease 0.2s;
}
.cap:hover {
  padding-top:17vh;
  background: rgba(245,44,67,1);
}
h2, .description {
  text-align:center;
  color:#FFF;
}
h2 {
  margin-bottom:6vh;
}
.description {
  line-height:1.7;
  font-size:14px;
  margin-bottom:7vh;
}
.more {
  width:150px;
  margin:0 auto;
  padding:10px;
  border-top:1px solid #C9B274;
  border-bottom:1px solid #C9B274;
  text-align:center;
}