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

2カラム以上のレイアウトはFlexbox

レスポンシブWebデザイン

Flexbox

メリット
  • CSSを一行プラスするだけで横並びにできる
  • 横並びになった要素の高さが最初から揃ってる
  • 要素を上下左右、好きな順序に並び替えられる
  • 高さの異なる横並びの要素を、簡単に上下中央揃えにできる
ナビゲーションメニューの場合
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Flexboxを使ったナビゲーション</title>
<style>
ul { list-style: none; }
a { text-decoration: none; }

.mainNav {
  display: flex;
}
.mainNav li {
  width: 160px;
  line-height: 50px;
  text-align: center;
}
.mainNav a {
  margin: 1px;
  background: #60B99A;
  color: #FFF;
  display: block;
}
</style>
</head>
<body>
<nav>
<ul class="mainNav">
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
<li><a href="#">Menu 5</a></li>
</ul>
</nav>
</body>
</html>

f:id:web-design-lesson:20160605115907p:plain

カラムレイアウト

  • floatを使った時のような、入れ子構造が不要
flexプロパティー
  • flex-grow: 1;(要素を利用可能な領域いっぱいに等倍で並べる指定)
orderプロパティ
  • flexコンテナの中で その一連の子が現れる順序を制御する
  • mainContentが文書構造上、上位にあっても配置される順序は、orderプロパティで指定する
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Flexboxを使ったレスポンシブWebデザイン</title>
<style>
#container {
  width: 80%;
  height: auto;
  margin: 0 auto;
}
.box {
  text-align: center;
  line-height: 100px;
}
.box1, .box5 {
  width: 100%;
  height: 100px;
  background: #FBE4EE;
  border: 4px solid #EA6094;
  box-sizing: border-box; 
}
.wrapA {
  display: flex; 
  height: 300px;
  box-sizing: border-box;
}
.wrapA > .box2 {
  order: 2;
  flex-grow: 3;
  background: #FFFBCB;
  border: 4px solid #FFE500;
}
.wrapA > .box3 {
  order: 1;
  flex-grow: 1;
  background: #EDF7FD;
  border: 4px solid #4188C9;
}
.wrapA > .box4 {
  order: 3;
  flex-grow: 1;
  background: #F3F7E0;
  border: 4px solid #B5D22F;
}

@media screen and (max-width:797px){
  .wrapA {
    display: block;
    height: auto;
  }
  .wrapA>.box {
    /*  文書順に戻す  */
    order: 0; 
    width: auto;
    height: 100px;
  }
}
</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">BOX4</div>
</div><!-- /.wrapA -->
<div class="box box5">BOX5</div>
</div><!-- /#container -->
</body>
</html>


f:id:web-design-lesson:20160605111023p:plain

f:id:web-design-lesson:20160605123636p:plain

対応ブラウザー

f:id:web-design-lesson:20160605111606p:plain

IE8・9にもFlexboxを対応させる

<script src="js/flexibility.js"></script>
.wrapA {
  -js-display: flex;
  display: flex;
}

Big UI / Low Density / Long Pageの潮流

f:id:web-design-lesson:20160607063225p:plain