読者です 読者をやめる 読者になる 読者になる

ボックスの分割と追加

レスポンシブWebデザイン

ボックスを分割する

  • 「%」指定をします
  • 足して「100%」になるよう指定します
<div id="container">
<div class="wrapA">
<div class="box box2">BOX2</div>
<div class="box box3">BOX3</div>
</div><!-- /.wrapA -->
</div><!-- /#container -->
.wrapA>.box {
  background: #ECF7FD;
  border: 4px solid #689DD1;
  width: 50%;
  float:left;
  box-sizing: border-box;  /*パディングとボーダーを幅と高さに含める*/
}
.wrapA {
  overflow: hidden;
}

f:id:web-design-lesson:20160527123247j:plain

ボックスを分割数を増やす

  • 「ボックスを分割を分割する」ことと「ボックスを横に並べる」ことは同じです
<div id="container">
<div class="wrapA">
<div class="box box2">BOX2</div>
<div class="box box3">BOX3</div>
<div class="box box3">BOX4</div>
</div><!-- /.wrapA -->
</div><!-- /#container -->
.wrapA>.box {
  background: #ECF7FD;
  border: 4px solid #689DD1;
  width: 33.33%;
  float:left;
  box-sizing: border-box;  /*パディングとボーダーを幅と高さに含める*/
}

f:id:web-design-lesson:20160527123948j:plain

段を増やした複雑なレイアウト
<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 boxn">BOX4</div>
<div class="box box5 boxn">BOX5</div>
<div class="box box6 boxn">BOX6</div>
</div><!-- /.wrapA -->
<div class="box box4">BOX7</div>
</div><!-- /#container -->
  • CSSの記述を追加する
.wrapA> {
  background: #F8EAF1;
  border: 4px solid #FBB6CA;
  width: 33.33%;
  float:left;
  box-sizing: border-box;
}

f:id:web-design-lesson:20160527115749j:plain

まとめ
  • 個別名「box1 ~ box7」は、使用しません
#container {
  width: 50%;
  height: auto;
}
.box {
  height: 100px;
  background: #F2F6E0;
  border: 4px solid #B1CD30;
  text-align: center;
  line-height: 100px;
}
.wrapA>.box {
  background: #ECF7FD;
  border: 4px solid #689DD1;
  width: 50%;
  float:left;
  box-sizing: border-box;  /*パディングとボーダーを幅と高さに含める*/
}
.wrapA {
  overflow: hidden;
}
.wrapA>.boxn {
  background: #F8EAF1;
  border: 4px solid #FBB6CA;
  width: 33.33%;
}

スマートフォン対応

@media screen and (max-width:797px){
  .wrapA>.box {
    width: 100%;
    float:none;
  }
  .wrapA>.boxn {
    width: 100%;
    float:none;
  }
}

f:id:web-design-lesson:20160527233110j:plain