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

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

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

フルスクリーンレイアウトのレスポンシブデザイン

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>フルスクリーンレイアウトの演習</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/style.css">
</head>

<body>
<div id="container">
<div class="top topL">
<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>
</div>

<div class="top topR">
<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>
</div>

<div class="bottom btmL">
<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>
</div>

<div class="bottom btmC">
<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>
</div>

<div class="bottom btmR">
<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>
</div>

</div>
</body>
</html>
@charset "utf-8";
/* CSS Document */

html,body,h1,h2,p,ul,li {
  margin:0;
  padding:0;
  line-height:0;
  font-family:"Hiragino Kaku Gothic Pro", Meiryo, sans-serif;
}
ul {
  list-style:none;
}
a {
  text-decoration:none;
}
img {
  border:none;
  vertical-align:bottom;
}

#container {
  width:100%;
}

.top {
  width:50%;
  height:50vh;
  float:left;
  overflow:hidden;
}
.bottom {
  width:33.33%;
  height:50vh;
  float:left;
  overflow:hidden;
}
.topL {
  background:url(../img/L1.png) no-repeat center/cover;
}
.topR {
  background:url(../img/L2.png) no-repeat center/cover;
}
.btmL {
  background:url(../img/S1.png) no-repeat center/cover;
}
.btmC {
  background:url(../img/S2.png) no-repeat center/cover;
}
.btmR {
  background:url(../img/S3.png) no-repeat center/cover;
}

/*cap
-----------------------------------------------*/
h2, .description {
  text-align:center;
  color:#FFF;
}
h2 {
  margin-bottom:6vh;
}
.description {
  line-height:1.7;
  font-size:14px;
  margin-bottom:60px;
}
.more {
  width:150px;
  margin:0 auto;
  padding:10px;
  border-top:1px solid #C9B274;
  border-bottom:1px solid #C9B274;
  text-align:center;
}
.more a {
  display:block;
  padding: 10px;
  color: #FFFFFF;
}
.cap {
  width:100%;
  height:100%;
  padding-top:200px;
  background:rgba(245,44,67,0);
  cursor:pointer;
  transition:0.3s;
  padding-bottom:14%;
}
.cap:hover {
  background:rgba(245,44,67,1);
  padding-top:80px;
}

@media screen and (max-width:767px) {
.top, .bottom {
  width:100%;
  height:50vh;
  float:none;
  margin-bottom:280px;
  position:relative;
  overflow:visible;
}
.cap {
  position:absolute;
  top:100%;
  height:280px;
  padding-top:50px;
  transition:none;
}
h2, .description {
  color:#000;
}
.more a {
  color: #000;
}
.cap:hover {
  background:rgba(255,255,255,1);
  padding-top:50px;
}

}