【サンプル付】Flexboxを使ったシングルページのレスポンシブサイトの作り方

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

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

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属性）を基準に設定されます。単調なレイアウトにリズムを与えたいときなどにも使えますね！

まとめ

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

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

Flexbox関連記事【サンプル付】Flexboxによる2カラムのレスポンシブサイトの作り方(横並びレイアウト)

Flexbox関連記事【図解】Flexboxの基本的な使い方とプロパティ一覧

Web制作をより深く学びたい人へ

Web制作の知識をもっと深めたいと思っている人は、オンライン学習・スクールをまとめた以下の記事が役に立つかもしれません。無料で学べるサービスもありますので、チェックしてみてくださいね。

参考記事【無料あり】自宅でWebデザインを学べるオンラインスクール･講座18選【Webデザイナーが解説】

• 前の記事
  【WordPress】カスタムフィールドの値で条件を絞り込み、ループで記事一覧を表示する
• 次の記事
  タスク管理アプリToodledoであな吉手帳術を実践したら、作業効率が上がった話