5月27日　授業内容①(レスポンシブウェブデザイン)

ボックスの分割と追加
web-design-lesson.hatenablog.jp

以下の記述はbootstrapがしている内容と同じです。
techacademy.jp

f:id:paris1204:20160527161511p:plain

f:id:paris1204:20160527161519p:plain

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>レスポンシブ</title>
<link rel="stylesheet" href="css/style.css">
</head>

<body>
<div id="container">
<div class="box box1">BOX1</div>
<div class="wrapA">
<div class="box box2">BOX2</div>
<div class="box box3">BOX3</div>
</div><!--.wrapA-->
<div class="box box4">BOX4</div>
</div><!--#container-->
</body>
</html>

/*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;}

/*レスポンシブデザインを考える時は全ての横幅を%表示で指定し、box-sizing:border-box;を使ってデザインが崩れないようにすること*/
#container{width:50%;
height:auto;
}

.box{height:100px;
background:olive;
border:4px solid black;
text-align:center;
line-height:100px;}

.wrapA{overflow:hidden;}

.wrapA>.box{background:aqua;
border:4px solid yellow;
width:50%;
float:left;
box-sizing:border-box;}/*ボーダーを指定してもサイズを固定にするためデザインは壊れない
*/

f:id:paris1204:20160527161755p:plain
変更点のみ記載しています

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>レスポンシブ</title>
<link rel="stylesheet" href="css/style.css">
</head>

<body>
<div id="container">
<div class="box box1">BOX1</div>
<div class="wrapA">
<div class="box box2">BOX2</div>
<div class="box box3">BOX3</div>
<div class="box box4">BOX4</div>
</div><!--.wrapA-->
<div class="box box5">BOX5</div>
</div><!--#container-->
</body>
</html>

.wrapA>.box{background:aqua;
border:4px solid yellow;
width:33.33%;
float:left;
box-sizing:border-box;}/*ボーダーを指定してもサイズを固定にするためデザインは壊れない
*/

f:id:paris1204:20160527162540p:plain

f:id:paris1204:20160527162549p:plain

※幅の違うものを設定する場所の周りをdivで囲んで個別に%指定する

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>レスポンシブ</title>
<link rel="stylesheet" href="css/style.css">
</head>

<body>
<div id="container">
<div class="box box1">BOX1</div>
<div class="wrapA">
<div class="box box2">BOX2</div>
<div class="box box3">BOX3</div>
</div><!--.wrapA-->
<div class="wrapB">
<div class="box box4">BOX4</div>
<div class="box box5">BOX5</div>
<div class="box box6">BOX6</div>
</div><!--.wrapB-->
<div class="box box7">BOX7</div>
</div><!--#container-->
</body>
</html>

変更点のみ記載

.wrapA>.box{background:aqua;
border:4px solid yellow;
width:50%;
float:left;
box-sizing:border-box;}/*ボーダーを指定してもサイズを固定にするためデザインは壊れない
*/

.wrapB{overflow:hidden;}
.wrapB>.box{background:aqua;
border:4px solid yellow;
width:33.33%;
float:left;
box-sizing:border-box;}/*ボーダーを指定してもサイズを固定にするためデザインは壊れない
*/

スマホデザイン
f:id:paris1204:20160527163145p:plain
一つ前から追記したのはメディアクエリ（スマホ対応）のcssのみ

追加した分のみ記載します

@media screen and (max-width : 767px){
	
	
	#container{width:100%;
}
.wrapA>.box{width:100%;
float:none;
box-sizing:border-box;}/*ボーダーを指定してもサイズを固定にするためデザインは壊れない
*/
.wrapB>.box{
width:100%;
float:none;
box-sizing:border-box;}/*ボーダーを指定してもサイズを固定にするためデザインは壊れない
*/
	
}