５月２６日　授業内容（レスポンシブ制作（応用編））

レスポンシブ制作（応用編）

yachin29.hatenablog.com

f:id:paris1204:20160526203000p:plain

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>無題ドキュメント</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<style>

/*reset*/
html,body,div{font-family:"Hiragino Kaku Gothic proN",
Meiryo,
sans-serif;
margin:0;
padding:0;
line:height;}

ul,li{list-style:none;}

a{text-decoration:none;}

img{border:0;
vertical-align:none;}

html,body{height:100%;}


.top{width:50%;
height:50%;}

.bottom{width:33.33%;
height:50%;}

div{float:left;}

.one{background:url(img/01.png) no-repeat;
background-size:cover;}

.two{background:url(img/02.png) no-repeat;
background-size:cover;}

.three{background:url(img/03.png) no-repeat;
background-size:cover;}

.four{background:url(img/04.png) no-repeat;
background-size:cover;}

.five{background:url(img/05.png) no-repeat;
background-size:cover;}

p.logo{position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
height:160px;
width:160px;
	}


</style>
</head>

<body>
<div class="top one"></div>
<div class="top two"></div>
<div class="bottom three"></div>
<div class="bottom four"></div>
<div class="bottom five"></div>
<p class="logo"><img src="img/province.png" alt="#"></p>


</body>
</html>

PC用（header付き）

f:id:paris1204:20160526205613p:plain

f:id:paris1204:20160526205629p:plain

スマホ用（header付き）

f:id:paris1204:20160526205739p:plain

f:id:paris1204:20160526205749p:plain

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="css/style.css">
</head>

<body>
<header>

</header>
<div id="container">
<div class="top one">
<a href="#"><!--div全体を選択できるようにする-->
<div class="cap">
<h3>ページタイトル</h3>
<p class="text">ページの説明、テキストテキストテキスト</p>
<p class="view">view&nbsp;more</p>
</div><!--.cap-->
</a>
</div><!--.top .one-->



<div class="top two">
<a href="#">
<div class="cap">
<h3>ページタイトル</h3>
<p class="text">ページの説明、テキストテキストテキスト</p>
<p class="view">view&nbsp;more</p>
</div><!--.cap-->
</a>
</div>


<div class="bottom three">
<a href="#">
<div class="cap">
<h3>ページタイトル</h3>
<p class="text">ページの説明、テキストテキストテキスト</p>
<p class="view">view&nbsp;more</p>
</div><!--.cap-->
</a>

</div>




<div class="bottom four">

<a href="#">
<div class="cap">
<h3>ページタイトル</h3>
<p class="text">ページの説明、テキストテキストテキスト</p>
<p class="view">view&nbsp;more</p>
</div><!--.cap-->
</a>

</div>




<div class="bottom five">

<a href="#">
<div class="cap">
<h3>ページタイトル</h3>
<p class="text">ページの説明、テキストテキストテキスト</p>
<p class="view">view&nbsp;more</p>
</div><!--.cap-->
</a>

</div>
<p class="logo"><img src="img/province.png" alt="#"></p><!--真ん中に配置しているロゴ画像-->






<div class="top one">
<a href="#">
<div class="cap">
<h3>ページタイトル</h3>
<p class="text">ページの説明、テキストテキストテキスト</p>
<p class="view">view&nbsp;more</p>
</div><!--.cap-->
</a>
</div><!--.top .one-->



<div class="top two">
<a href="#">
<div class="cap">
<h3>ページタイトル</h3>
<p class="text">ページの説明、テキストテキストテキスト</p>
<p class="view">view&nbsp;more</p>
</div><!--.cap-->
</a>
</div>


<div class="bottom three">
<a href="#">
<div class="cap">
<h3>ページタイトル</h3>
<p class="text">ページの説明、テキストテキストテキスト</p>
<p class="view">view&nbsp;more</p>
</div><!--.cap-->
</a>

</div>




<div class="bottom four">

<a href="#">
<div class="cap">
<h3>ページタイトル</h3>
<p class="text">ページの説明、テキストテキストテキスト</p>
<p class="view">view&nbsp;more</p>
</div><!--.cap-->
</a>

</div>




<div class="bottom five">

<a href="#">
<div class="cap">
<h3>ページタイトル</h3>
<p class="text">ページの説明、テキストテキストテキスト</p>
<p class="view">view&nbsp;more</p>
</div><!--.cap-->
</a>

</div>
<p class="logo"><img src="img/province.png" alt="#"></p>



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

/*reset*/
html,body,div,h3,p,header{font-family:"Hiragino Kaku Gothic proN",
Meiryo,
sans-serif;
margin:0;
padding:0;
line:height;}

ul,li{list-style:none;}

a{text-decoration:none;}

img{border:0;
vertical-align:none;}

html,body{height:100%;}

#container{width:80%;/*headerスペースを左側に確保するため80%*/
height:100%;
position:relative;/*#containerの中のdivに対しての設定*/
float:right;}

header{width:20%;
height:100%;
background:olive;
position:fixed;/*bodyの左上を基準に固定値*/
top:0;
left:0;
}

.top{width:50%;/*上部の画像の大きさを#containerの大きさに対して半分にする*/
height:50%;
overflow:hidden;
position:relative;/*内側にある.capに対してposition設定するためにかけている*/
float:left;
box-sizing: border-box;/*ボーダーをかけても幅、高さを固定する*/
border:2px black solid;
}

.bottom{width:33.33%;/*下部の画像の大きさを#containerの大きさに対して三分の一にする*/
height:50%;
overflow:hidden;
position:relative;/*内側にある.capに対してposition設定するためにかけている*/
float:left;
box-sizing: border-box;/*ボーダーをかけても幅、高さを固定する*/
border:2px white solid;}


.one{background:url(../img/01.png) no-repeat;
background-size:cover;}/*指定している範囲を全て覆う*/

.two{background:url(../img/02.png) no-repeat;
background-size:cover;}

.three{background:url(../img/03.png) no-repeat;
background-size:cover;}

.four{background:url(../img/04.png) no-repeat;
background-size:cover;}

.five{background:url(../img/05.png) no-repeat;
background-size:cover;}

p.logo{position: absolute;/*ロゴ画像を#containerの中心に配置する記述*/
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index:1000;
margin: auto;
height:160px;
width:160px;
	}

/*ホバーアクション*/

/*top*/
.top a{display:block;/*全体を押せるようにする*/
width:100%;
height:100%;}



.cap{padding-top:280px;/*文字の位置を下ろしてview moreを隠す*/
width:100%;
height:100%;
position:absollute;
top:0;
left:0;
text-align:center;
z-index:10;/*画像より手前に表示されるようにする設定*/
background:rgba(245,44,67,0);
cursor:pointer;/*カーソルをポインター表示する*/
transition:ease-in 0.5s;}/*スライド及びスライド完了までの時間の設定
*/
.cap:hover{
padding-top:30%;/*/hoverした際に動く距離/*/
left:0;
background:rgba(245,44,67,1);	
	
	}
	
a{color:white;}

a p.view{border:1px solid white;
width:100px;
margin:0 auto;}


@media screen and (max-width : 767px){
	
	.top,.bottom{width:100%;
	float:none;
	margin-bottom:180px;/*画像下に.capが表示される位置を確保する*/
	overflow:inherit;/*overflow:hidden;を初期値に戻す*/
	box-sizing:none;
	border:none;
}

.top a,.bottom a{cursor:default;}/*カーソルを通常タイプにする*/



p.logo{position:fixed;/*fixedの基準点はheadの左上*/
top:10px;
left: 10px;
margin:0;
height:60px;
width:60px;
border:1px solid black;
	}
	
	p.logo img{max-width:100%;}/*見た目を変えずに画像の大きさを変更する*/


.cap{padding-top:20%;/*記述を中心に寄せる*/
width:100%;
height:60%;/*縦幅を60%に設定する*/
position:absolute;
top:100%;/*画像の下に表示されるようにする*/
left:0;
cursor:default;
background:rgba(245,44,67,1);
transition:none;}

.cap:hover{padding-top:20%;
	position:absolute;
top:100%;
left:0;
}


header{height:80px;
width:100%;
float:none;
position:fixed;
top:0;
left:0;
z-index:100;
background:olive;}

#container{
	margin-top:80px;/*写真の上に来るので重なっている分のマージンを空ける*/
	width:100%;
height:100%;
position:relative;
float:none;}


	
	}