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

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

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

f:id:yachin29:20161026201426p:plain


スマホレイアウト

f:id:yachin29:20161027204011p:plain


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

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


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




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

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



作成
http://yachin29.webcrow.jp/vogue0710/



<!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 class="container">
<header>
<h1><img src="img/logo.svg" alt="ロゴ"></h1>
<nav>
<ul>
<li><a href="#">ホーム</a></li>
<li><a href="#">ボタン2</a></li>
<li><a href="#">ボタン3</a></li>
<li><a href="#">ボタン4</a></li>
</ul>
</nav>
</header>
<div class="wrapper">
<div class="top topL">
<a href="#">
<div class="cap">
<h2>タイトル</h2>
<p class="txt">ページの説明文</p>
<p class="more">view more</p>
</div><!--/.cap-->
</a>
</div>
<div class="top topR">
<a href="#">
<div class="cap">
<h2>タイトル</h2>
<p class="txt">ページの説明文</p>
<p class="more">view more</p>
</div><!--/.cap-->
</a>
</div>
<div class="btm btmL">
<a href="#">
<div class="cap">
<h2>タイトル</h2>
<p class="txt">ページの説明文</p>
<p class="more">view more</p>
</div><!--/.cap-->
</a>
</div>
<div class="btm btmC">
<a href="#">
<div class="cap">
<h2>タイトル</h2>
<p class="txt">ページの説明文</p>
<p class="more">view more</p>
</div><!--/.cap-->
</a>
</div>
<div class="btm btmR">
<a href="#">
<div class="cap">
<h2>タイトル</h2>
<p class="txt">ページの説明文</p>
<p class="more">view more</p>
</div><!--/.cap-->
</a>
</div>
</div><!--/.wrapper-->
</div><!--/.container-->
<footer><p><small>&copy; 1999 - <span id="thisYear"></span> Felica Japan</small></p></footer>
<script>
var date = new Date();
myYear = date.getFullYear();
document.getElementById('thisYear').textContent = myYear;
</script>
</body>
</html>

スタイルシート

@charset "utf-8";
/* CSS Document */
html,body,h1,h2,h3,p,ul,li,small {
  margin:0;
  padding:0;
  line-height:1.0;
}
ul {
  list-style:none;
}
a {
  text-decoration:none;
  color:#222;
}
img {
  vertical-align:bottom;
}
.container {
  overflow:hidden;
  position:relative;
}
header {
  width:120px;
  height:100vh;
  background:#666;
  float:left;
}
nav {
  margin-top:300px;
}
nav li {
  height: calc((100vh - 300px) / 4);
}
nav li a {
  display:block;
  text-align:center;
  height: calc((100vh - 300px) / 4);
  background:#FFFFFF;
  border-bottom:1px solid #222;
  box-sizing:border-box;
  padding-top:10px;
  position:relative;
}
nav li a:after {
  content:"";
  display:block;
  width:34px;
  height:34px;
  background:url(../img/icon1.svg) no-repeat center center/contain;
  position:absolute;
  top:16px;
  right:0;
  bottom:0;
  left:0;
  margin:auto;
}
nav li:nth-child(2) a:after {
  background:url(../img/icon2.svg) no-repeat center center/contain;
}
nav li:nth-child(3) a:after {
  background:url(../img/icon3.svg) no-repeat center center/contain;
}
nav li:nth-child(4) a:after {
  background:url(../img/icon4.svg) no-repeat center center/contain;
}
nav li:last-child a {
   border-bottom:none;
}
nav li a:hover {
  background:#EDEDED;
}
.wrapper {
  width:calc(100% - 120px);/*演算子の両サイドにスペースが必須*/
  float:right;
}
h1 {
  width:160px;
  height:160px;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:120px;
  margin:auto;
}
.top {
  width:50%;
  height:50vh;
  float:left;
}
.btm {
  width:33.33%;
  height:50vh;
  float:left;
}
.topL {
  background:url(../img/L1.png) no-repeat center center/cover;
}
.topR {
  background:url(../img/L2.png) no-repeat center center/cover;
}
.btmL {
  background:url(../img/S1.png) no-repeat center center/cover;
}
.btmC {
  background:url(../img/S2.png) no-repeat center center/cover;
}
.btmR {
  background:url(../img/S3.png) no-repeat center top/cover;
}
footer {
  width:100%;
  height:20vh;
  background:#ccbb8e;
  text-align:center;
}
footer p {
  line-height:20vh;
}
/*ホバーアクション*/
.cap {
  width:100%;
  height:50vh;
  background:rgba(245,45,67,0);
  text-align:center;
  color:#FFF;
  transition:0.3s;
  padding-top:100px;
}
.cap:hover {
  background:rgba(245,45,67,1);
  padding-top:0;
}
h2 {
  font-size:22px;
  padding-top:80px;
  margin-bottom:60px;
}
p.txt {
  margin-bottom:60px;
}
p.more {
  width:40%;
  color:#C9B274;
  padding: 10px 0;
  margin: 0 auto;
  border-top: 1px solid #C9B274;
  border-bottom: 1px solid #C9B274;
}
@media screen and (max-width:767px){
.container {
  overflow:visible;
  position:relative;/*h1の基準点*/
}
header {
  width:100%;
  height:60px;
  background:#FFF;
  float:none;
}
h1 {
  width:50px;
  height:50px;
  position:absolute;
  top:5px;
  right:0;
  bottom:0;
  left:10px;
  margin:0;
}
nav {
  margin-top:0;
  margin-left:calc(100% / 5);
}
nav ul {
  overflow:hidden;
}
nav li {
  width:25%;
  height:60px;
  float:left;
  box-sizing:border-box;
  padding:4px 0;
}
nav li a {
  font-size:12px;
  display:block;
  text-align:center;
  height:52px;
  background:#FFFFFF;
  border-bottom:none;
  border-right:1px solid #444;
  box-sizing:border-box;
  padding-top:4px;
  position:relative;
}
nav li a:after {
  content:"";
  display:block;
  width:24px;
  height:24px;
  background:url(../img/icon1.svg) no-repeat center center/contain;
  position:absolute;
  top:16px;
  right:0;
  bottom:0;
  left:0;
  margin:auto;
}
nav li:nth-child(2) a:after {
  background:url(../img/icon2.svg) no-repeat center center/contain;
}
nav li:nth-child(3) a:after {
  background:url(../img/icon3.svg) no-repeat center center/contain;
}
nav li:nth-child(4) a:after {
  background:url(../img/icon4.svg) no-repeat center center/contain;
}
nav li:last-child a {
   border-right:none;
}
nav li a:hover {
  background:#EDEDED;
}
.wrapper {
  width:100%;
  float:none;
}
.top {
  width:100%;
  height:40vh;
  float:none;
  margin-bottom:30vh;
  position:relative;/*.capの基準点*/
}
.btm {
  width:100%;
  height:40vh;
  float:none;
  margin-bottom:30vh;
  position:relative;/*.capの基準点*/
}
.btmL {
  background:url(../img/S1.png) no-repeat center top/cover;
}
.cap {
  width:100%;
  height:30vh;
  background:rgba(255,255,255,1);
  text-align:center;
  color:#222;
  transition:none;
  padding-top:0;
  position:absolute;
  top:100%;
}
.cap:hover {
  background:rgba(255,255,255,1);
  padding-top:0;
}
h2 {
  font-size:22px;
  padding-top:20px;
  margin-bottom:20px;
}
p.txt {
  margin-bottom:20px;
}
p.more {
  width:40%;
  color:#C9B274;
  padding: 10px 0;
  margin: 0 auto;
  border-top: 1px solid #C9B274;
  border-bottom: 1px solid #C9B274;
}
}