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

Fluid Grid(フルードグリッド)

Fluid Grid(フルードグリッド)

  • レイアウトブロックの配置の祭に、固定した幅のピクセルではなく比率で指定することにより、デバイスの幅に対して柔軟にレイアウトする手法

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

  • ブラウザ幅を狭くするとそれに応じて可変します
box-sizing: border-box;
  • paddingとborderまでを内包した状態にする(widthの値の中に含まれる)
  • 比率は親ボックスの比率は親ボックスのwidthが基準になります
<!DOCTYPE html>
<html ja>
<head>
<meta charset="UTF-8">
<title>Fluid Grid</title>
<style>
#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;
  }
}
</style>
</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 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 -->
</body>
</html>


パーセンテージの小数点以下の指定

max-widthで最大幅を指定
  • headerとfooterのみが100%の設定などに便利
  • スマートフォンの1カラムレイアウトも簡単に設定できます
#container {
  width: 100%;
  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;
  max-width: 50%;
  margin: 0 auto;
}

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