6月2日　授業内容(レスポンシブウェブデザイン(最初固定値でbreakポイント以下で%によりサイズ調整))

全画面
f:id:paris1204:20160602230223p:plain

900px以下
f:id:paris1204:20160602230233p:plain

※今回作成したものはmainの場所が真ん中にあるので、main,sub、thirdと並べてフロートをかけるだけではうまくいきません。
その問題を解消するのに以下の手順でコーディングしていきます。
①div#containerを作り、その中にheader,div#wrapper,footerを順に入れます。
　この段階で一旦スタイルシートでこの3つの色,幅、高さを指定し#containerにmargin:0 auto;をかけて中心になっているか確認してください。
②次に#wrapperの中に#wrapper_innerというdivを作成しその中に.main,.subの順番でdivを入力し、幅と高さを加えます。#wrapperと#wrapper_innerの中にも.thirdをdivで加えて幅・高さを加えます。
③次に#wrapper_innerをfloat:left;、.thirdをfloat:right;、#wrapper_innerの中の.subにfloat:left;を設定し、それぞれに色を加えてきちんと配置できているか確かめる

④次にメディアクエリを記述し%表示で幅を指定していく。
計算についてはコード横のコメントを参照してください。

html

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>レスポンシブデザイン</title>

</head>

<body>
<div id="container">
<header>header</header>
<div id="wrapper">
<div id="wrapper_inner">
<div class="main">main</div>
<div class="sub">sub</div>
</div><!--#wrapper_inner-->
<div class="third">third</div>
</div><!--#wrapper-->
<footer>footer</footer>
</div><!--#container-->
</body>
</html>

css

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

#container{width:900px;
margin:0 auto;
height:600px;
}
header,footer,div{font-size:30px;
color:white;
text-align:center;}
header{height:100px;
line-height:100px;
background:blue;
}
div{line-height:400px;}

#wrapper{width:900px;
height:400px;
overflow:hidden;
}

#wrapper_inner{width:700px;
height:400px;
overflow:hidden;
float:left;}
.main{width:500px;
height:400px;
float:right;
background:olive;}
.sub{width:200px;
height:400px;
background:aqua;}
.third{width:200px;
height:400px;
float:right;
background:black;
}

footer{background:gray;
height:100px;
line-height:100px;}


@media screen and (max-width : 900px){
	#container{width:100%;
}

header{width:100%;
}

#wrapper{width:100%;
}

#wrapper_inner{width:77.77%;/*wrapper_innerの幅700px÷wrapperの幅900px*/
height:400px;
overflow:hidden;
float:left;}
.main{width:71.42%;/*.mainの幅500px÷wrapper_innerの幅700px*/
height:400px;
float:right;
background:olive;}
.sub{width:28.57%;/*.subの幅200px÷wrapper_innerの幅700px*/
height:400px;
background:aqua;}
.third{width:22.22%;/*.thirdの幅700px÷wrapperの幅900px*/
height:400px;
float:right;
background:black;
}


	
	}