レスポンシブな段組み
レスポンシブな段組み
PCで下のように表示するのが目標。
２番目のBOXを真ん中にする事がここでの学びのポイント。
↓PC、タブレットでの表示目標
↓スマホでの表示目標
以下、段組みの手順。
①まず4つ BOX用意
BoxAで2~4を囲う
BoxAの中でBoxBを用意し２~3を囲う
②boxBとbox4を横並びにする
③boxBの中身を左右に振り分ける。
メディアクエリで囲う
出来上がり！
以下、コード。
<!DOCTYPE html>
<html jang="ja">
<head>
<meta charset="utf-8">
<title>BOX Practice</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="box1">
BOX1 BOX1 BOX1 BOX1 BOX1 BOX1 BOX1 BOX1 BOX1 BOX1
BOX1 BOX1 BOX1 BOX1 BOX1 BOX1 BOX1 BOX1 BOX1 BOX1
BOX1 BOX1 BOX1 BOX1 BOX1 BOX1 BOX1 BOX1 BOX1 BOX1
</div>
<div class="boxA">
<div class="boxB">
<div class="box2">
BOX2 BOX2 BOX2 BOX2 BOX2 BOX2 BOX2 BOX2 BOX2 BOX2
BOX2 BOX2 BOX2 BOX2 BOX2 BOX2 BOX2 BOX2 BOX2 BOX2
BOX2 BOX2 BOX2 BOX2 BOX2 BOX2 BOX2 BOX2 BOX2 BOX2
BOX2 BOX2 BOX2 BOX2 BOX2 BOX2 BOX2 BOX2 BOX2 BOX2
BOX2 BOX2 BOX2 BOX2 BOX2 BOX2 BOX2 BOX2 BOX2 BOX2
BOX2 BOX2 BOX2 BOX2 BOX2 BOX2 BOX2 BOX2 BOX2 BOX2
BOX2 BOX2 BOX2 BOX2 BOX2 BOX2 BOX2 BOX2 BOX2 BOX2
BOX2 BOX2 BOX2 BOX2 BOX2 BOX2 BOX2 BOX2 BOX2 BOX2
BOX2 BOX2 BOX2 BOX2 BOX2 BOX2 BOX2 BOX2 BOX2 BOX2
</div>
<div class="box3">
BOX3 BOX3 BOX3 BOX3 BOX3 BOX3 BOX3 BOX3 BOX3 BOX3
BOX3 BOX3 BOX3 BOX3 BOX3 BOX3 BOX3 BOX3 BOX3 BOX3
BOX3 BOX3 BOX3 BOX3 BOX3 BOX3 BOX3 BOX3 BOX3 BOX3
</div>
</div>
<div class="box4">
BOX4 BOX4 BOX4 BOX4 BOX4 BOX4 BOX4 BOX4 BOX4 BOX4
BOX4 BOX4 BOX4 BOX4 BOX4 BOX4 BOX4 BOX4 BOX4 BOX4
BOX4 BOX4 BOX4 BOX4 BOX4 BOX4 BOX4 BOX4 BOX4 BOX4
</div>
</div>
</body>
</html>
/*ここからCSS*/
@charset "UTF-8";
body{
margin: 0;
}
.box1, .box2, .box3,.box4{
border: solid 5px crimson;
box-sizing: border-box;
}
.box1{
background: lightpink;
}
.box2{
background: lightyellow;
}
.box3{
background: lightblue;
}
.box4{
background: lightgreen;
}
@media(min-width: 768px){
.boxA:after{
content: "";
display: block;
clear: both;
}
.boxB{
float: left;
width: 80%;
}
.box4{
float: right;
width: 20%;
}
.boxB:after{
content: "";
display: block;
clear: both;
}
.box2{
float: right;
width: 75%;
}
.box3{
float: left;
width: 25%;
}
}
