HTML
CSS3
Flex

Flex によるレイアウト設計

これまでは float による横並びレイアウトが一般的であったが、昨今は flex によるレイアウト設計が台頭してきている。ここでは、実務で使いうるflexレイアウトをいくつか紹介する。

一般的な横並び

下記のデザインを題材に説明します。SPの場合は画像が上に、PCの場合は画像が右にきている点がポイントです。

PCデザイン SPデザイン
スクリーンショット 2017-10-07 22.11.06.png スクリーンショット 2017-10-07 22.15.27.png
index.html
<div class="unit">
  <figure class="unit__pic">
    <img src="/img/pc.jpg" alt="">
  </figure>
  <div class="unit__body">
    <p>これからHTMLをはじめる人のために、HTMLの基本をまとめて見ました。</p>
    <p>この講座は以下のような方にオススメです。</p>
  </div>
</div>
style.css
/* PC時のスタイル */
@media screen and (min-width: 768px) {
  .unit {
    display: flex;
    align-items: center; /* 左右のコンテンツを垂直中央にする */
  }
  .unit__pic {
    order: 1; /* 画像が右に来るように設定 */
    width: 40%;
  }
  .unit__body {
    width: 60%;
  }
}

タイルレイアウト

下記レイアウトの場合、横並びかつ、折り返す必要がある。

スクリーンショット 2017-10-07 22.24.04.png

index.html
<div class="tile">
  <div class="tile__item"><img src="/img/pc.jpg" alt=""></div>
  <div class="tile__item"><img src="/img/pc.jpg" alt=""></div>
  <div class="tile__item"><img src="/img/pc.jpg" alt=""></div>
  <div class="tile__item"><img src="/img/pc.jpg" alt=""></div>
  <div class="tile__item"><img src="/img/pc.jpg" alt=""></div>
  <div class="tile__item"><img src="/img/pc.jpg" alt=""></div>
</div>
style.css
/* PC時のスタイル */
@media screen and (min-width: 768px) {
  .tile {
    display: flex;
    flex-wrap: wrap; /* 折り返すために必要 */
    margin: -15px; /* タイルの余白が外部に影響しないよう、相殺 */
  }
  .tile__item {
    width: 33.333333%;
    padding: 15px; /* タイルの余白 */
    box-sizing: border-box;
  }
}

グリッドレイアウト

一般的な12グリッドデザインの実装方法。下記の場合、ピンクのバーが1カラムに相当します。グリッドレイアウトは、コンテンツ幅を12個のカラムに分割し、その割合を指定することで、あらゆる幅に対応できるRWDを実現する方法です。Twitter Bootstrap や Google Material Design Lite などで用いられています。下記の場合、テキストエリアが6カラム、画像エリアが6カラムで、合計12カラムになっています。

スクリーンショット 2017-10-07 22.41.07.png

index.html
<div class="row">
  <div class="col col--6">
    <p>これからHTMLをはじめる人のために、HTMLの基本をまとめてみました。この講座は以下のような方にオススメです。</p>
  </div>
  <div class="col col--6">
    <img src="/img/pc.jpg" alt="">
  </div>
</div>
style.css
/* PC時のスタイル */
@media screen and (min-width: 768px) {
  .row {
    display: flex;
    flex-wrap: wrap;
    margin: -15px;
  }
  .col {
    padding: 15px;
    box-sizing: border-box;
  }
  .col--1 {
    flex-basis: calc(1 / 12 * 100%);
  }
  ...省略...
  .col--4 {
    flex-basis: calc(4 / 12 * 100%);
  }
  ...省略...
  .col--8 {
    flex-basis: calc(8 / 12 * 100%);
  }
  ...
  .col--12 {
    flex-basis: calc(12 / 12 * 100%);
  }
}