[CSS3] flexboxによるレスポンシブサイトの作り方 – シングルページ編(サンプル付き)

 2017.08.14  2017.09.20

flexboxによるレスポンシブサイトの作り方 – 2カラム編(サンプル付き) では、flexboxのプロパティを使って、2カラムのレスポンシブなレイアウトや要素を上下左右真ん中に配置する方法などを紹介しました。

今回もflexboxのプロパティを使用して、シングルページ(1カラム)で画面幅いっぱいに広がるレスポンシブサイトを作ります。 ヘッダーは前回と同じで、サイト中段辺りで2カラム、3カラムに分割されたコンテンツと写真付きのテキストが左右交互にレイアウトされるパターンを考えてみます。

※デモサイトのメインイメージの写真を変更したので、以下の画像とデモサイトではメインイメージが異なります。

▼デスクトップでの表示 [CSS3] flexboxによるレスポンシブサイトの作り方 - シングルページ編(サンプル付き)

▼スマートフォンでの表示[CSS3] flexboxによるレスポンシブサイトの作り方 - シングルページ編(サンプル付き)

2カラムと3カラムのセクション

今回もモバイルファーストで書きます。モバイルでは全てのカラムが1列縦に並び、カラム内の要素(.col-item)は上下左右真ん中に配置されるようにします。

HTML

<section class="row-2">
     <div class="col-item item-1">col-2</div>
     <div class="col-item item-2">col-2</div>
</section>
<!-- /.row-2 -->

<section class="row-3">
     <div class="col-item item-1">col-3</div>
     <div class="col-item item-2">col-3</div>
     <div class="col-item item-3">col-3</div>

</section>
<!-- /.row-3 -->

CSS

.col-item{
     display: flex;
     padding: 3em;
     justify-content: center;
     align-items: center;
}
.row-2 .col-item.item-1{
     background-color: #eee;
}
.row-2 .col-item.item-2{
     background-color: #e5e5e5;
}
.row-3 .col-item.item-1{
     background-color: #ddd;
}
.row-3 .col-item.item-2{
     background-color: #d5d5d5;
}
.row-3 .col-item.item-3{
     background-color: #ccc;
}

@media screen and (min-width : 768px) { /* デスクトップ */
  section{
       display: flex;
       justify-content: center;
       align-items: center;
  }
  .col-item{
     height: 400px;
  }
  .row-2 .col-item{
       width: 50%;
  }
  .row-3 .col-item{
       width: 33.3%;
  }
}

デスクトップでは、2カラムのところ(.row-2)はwidthを50%に、3カラム(.row-3)のところではwidthを33.3%に指定し、そのカラムを包括する親要素のsectionにdisplay:flex;を指定すると自動的に横並びになります。もちろんclearfix等は必要ありません!(分かりやすいように背景色を付けたので、CSSが少し煩雑になっています。)

写真付きテキスト

写真付きのコンテンツ部分は、HTMLでは写真は左、テキストは右というレイアウト構造を維持しながら、CSSのみで「写真は右、テキストは左」と左右を入れ替えます。

HTML

<div class="container">
<section class="col-odd">
     <div class="col-odd__img"><img src=“#" alt=""></div>
     <div class="col-odd__txt">
     <p>ここにテキストが入ります。</p>
     </div>
</section>

<section class="col-odd reverse">
     <div class="col-odd__img"><img src=“#" alt=""></div>
     <div class="col-odd__txt">
     <p>ここにテキストが入ります。</p>
     </div>
</section>
</div>
<!-- /.container -->

CSS

.col-odd{
     margin-bottom: 3em;
}
.col-odd__txt{
     padding: 2em;
}

@media screen and (min-width : 768px) { /* デスクトップ */
  .col-odd{
       display: flex;
       justify-content: space-between;
  }
  .col-odd__img{
       width: 35%;
  }
  .col-odd__txt{
       width: 62%;
  }
  .col-odd.reverse{
       margin-bottom: 0;
       flex-direction: row-reverse;
  }
}

モバイルでは余白を調整する程度で、特別なCSSの指定はしていません。
デスクトップでは、写真付きコンテンツを包括するdiv(.col-odd)にflexを指定し、justify-contentでflexアイテム(子要素)を画面幅いっぱいに広げて、アイテム同士の間隔を均等にします。 そして左右逆に配置したいコンテンツを包括する親要素に.reverseというクラス名を付けて、flex-direction:row-reverse;と指定すると、右から左へとコンテンツが並び変わります。flex-directionはflexアイテムを並べる向きを指定するプロパティで、書字方向(dir属性)を基準に設定されます。単調なレイアウトにリズムを与えたいときなどにも使えますね!

まとめ

今回のポイントは以下3点です。

  • flexboxで2カラム・3カラムを均等に横並びさせる。
  • justify-content:space-between;でflexアイテム(子要素)を親要素の横幅いっぱいに広げてアイテム同士の間隔を均等にする。
  • flex-direction:row-reverse;でflexアイテム(子要素)を逆方向に並べる。

flexboxを使えば、レスポンシブなレイアウトも柔軟に組むことができるので、ブラウザの変化とともに今後普及されていくといいなと思っています。

Pocket