CSSで完璧なレスポンシブグリッドを作成する方法｜float・Flexbox・Gridを徹底解説

レスポンシブグリッドの作り方を理解することは、Web開発において欠かせないスキルです。

フォトグラファーのポートフォリオサイトでも、ECサイトでも、ランディングページでも、その土台となるのは必ずグリッドレイアウトです。それほどグリッドはあらゆるところで使われているのです。

質の高いレスポンシブグリッドを構築できれば、フロントエンド開発者として一歩抜きん出た存在になれるでしょう。

それでは早速、グリッドとは何かという基本から見ていきましょう。

グリッドレイアウトとは？

グリッドは、メディア上の視覚要素を整理するための、長い歴史を持つ確立された手法です。

活版印刷の時代の新聞や広告から、デザイナーたちはグリッドを活用してきました。

グリッドを使うと、脳が情報を把握しやすく、美しく整った構成を作れます。だからこそ、Webサイトにもぜひ取り入れたいテクニックなのです。

グリッドデザインでは、領域を「カラム（列）」に分割します。カラムとカラムの間には「ガター（溝）」と呼ばれる余白が入ります。

一般的には合計12カラムにするのがおすすめです。12なら2や3で割り切れるため、柔軟なレイアウト構成が可能になるからです。

この実践例は、StudiopressのWebサイトテーマなどでも見ることができます。

もちろん、すべてのカラムが同じ幅である必要はありません。2カラム分またぐ要素もあれば、4カラム、6カラム以上にまたぐ要素もあるでしょう。

重要なのは、ページ上のすべての要素が、必ずいずれかのカラムの端で始まり、端で終わるようにすることです。

さらに、縦方向の領域を複数のゾーンに分け、ゾーンごとに異なるカラム幅の組み合わせを持たせることもできます。

最初に聞いたときほど難しくないと思ってもらえたでしょうか。基本がわかったところで、次はWebサイトにレスポンシブグリッドを実装する最良の方法を見ていきます。

レスポンシブグリッドを作成する3つの手法

近年では、Flexbox（フレックスボックス）とCSS Grid Layout（グリッドレイアウト）が話題になっています。

これらの新しいCSS技術が登場する以前は、CSSのfloatプロパティを使うしかありませんでした。floatを指定したカラム要素を作り、パーセンテージの幅指定とメディアクエリを組み合わせてレイアウトを組んでいたのです。

（さらにその前はHTMLテーブルが唯一の選択肢でしたが、今はもう思い出さなくていいでしょう 😉）

私自身がフロントエンド開発を学び始めた頃は、Zurb Foundationというレスポンシブフレームワークから入りました。Bootstrapを使っている方も多いのではないでしょうか。

レスポンシブフレームワークを使うと、サイト構築が格段に楽になり、時間の節約になります。

しかし、時間短縮になる一方で、フレームワークに頼りすぎるのは良いことではありません。特に、内部で何が行われているのかを正確に理解していない場合はなおさらです。

フレームワークの裏側にある仕組み（スキャフォールディング）がどう動いているのかを理解するよう心がけましょう。divにカラム用のクラスを貼り付けるだけよりは手間がかかりますが、CSSの原理への理解が深まります。

要するに、それはあなたをより優れたWeb開発者へと成長させてくれるのです。

今回作るミニプロジェクト

ここからは、シンプルな2カラムグリッドを、以下の3つの異なる手法で構築する方法を解説していきます。

• float
• Flexbox
• CSS Grid Layout

各ステップを、コードスニペットと図解を使って丁寧に説明します。

グリッドの設計を考える

作成するのは、多くのWebサイトで採用されているような、メインコンテンツエリアとサイドバーを持つ基本的な2カラムグリッドです。

レイアウトを構築するとき、最初に決めるべきことの一つが、レスポンシブ対応の挙動です。つまり、デスクトップで表示したときと、タブレットやスマートフォンで表示したときとで、レイアウトがどう変化するのかを決めるということです。

私が構築を始めるときに使っている戦略は、デバイスごとのデザインの変化を書き出すことです。今回の演習でのメモがこちらです。

モバイルでは、カラムを縦積みにし、メインコンテンツを上部、サイドバーをその下に配置します。どちらも幅100%です。

タブレットでは、カラムを横並びにし、それぞれ幅50%にします。

デスクトップでは、メインコンテンツを幅2/3、サイドバーを幅1/3にします。

各ブレークポイントでグリッドがどう見えるべきかをまとめたものがこちらです。

事前の準備作業は少し増えますが、「何を作ればいいのか」が明確になるため、結果的に時間の節約になります。この手法は、規模が大きく複雑なプロジェクトほど特に有効です。

これで、グリッド作りを始めるための基本情報が揃いました！

floatによるグリッド

「FlexboxやCSS Gridが主流になった今、なぜfloatグリッドを扱うの？」と思うかもしれません。それでもここで紹介するのは、古いInternet Explorerへの対応など、floatの知識が必要になるエッジケースがまだ存在しうるからです。

CSSのfloatプロパティは、本来、画像の周りにテキストを回り込ませるといった用途のために設計されました。画像にfloat: leftを指定すると、画像は親要素の左側に寄って配置されます。

floatでグリッドを作る

グリッドを作るには、複数の要素にfloatプロパティを与え、すべてを右または左のどちらかに揃えます。

.column {
   display: block;
   float: left;
}

かなりシンプルに見えますよね？

しかし、floatには厄介な点があります。それは、要素を通常のドキュメントフローから外してしまうことです。

下の画像は、青いfloatされたカラムが通常のフローから外れたときに何が起こるかを示しています。灰色の親divは、子要素が存在しないかのような高さまで縮んでしまいます。

この問題はいくつかの方法で解決できます。

親要素にdisplay: tableを指定する方法があります。あるいは、親要素に:after疑似要素を追加してfloatを解除（クリア）するのも定番の手法です。

.parent:after
{
   clear: both;
   content: "";
   display: block;
}

もう一つ注意点として、paddingやmarginを使う場合（実際にはほぼ常に使います）、すべての要素にbox-sizing: border-boxを設定する必要があります。

この宣言により、要素の最終的な幅と高さの計算にpaddingとmarginが含まれるようになり、要素がページからはみ出すのを防げます。

*, *:after, *:before {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}

これらについては、Chris Coyier氏の素晴らしい解説記事があるので、ぜひ参照してみてください。

メディアクエリでグリッドをレスポンシブ化する

グリッドをレスポンシブにするには、メディアクエリを活用します。これにより、特定のデバイス幅ごとに異なるレイアウトを指示できます。

先ほどのメモに従うと、モバイルではメインとサイドバーの両方を幅100%にし、タブレットでは横並びで50%ずつ、デスクトップでは2/3と1/3の横並びにします。

HTMLでは、親divを作り、その中にメインかサイドバーかを示すクラスを持つ2つの子カラムdivを配置します。

<div class="parent">
   <div class="column main"></div>
   <div class="column sidebar"></div>
</div>

モバイルの場合：

CSSではモバイルファーストのアプローチを取り、デフォルトで両カラムを100%に設定します。

.column {
   display: block;
   width: 100%;
}

タブレットの場合：

次に、タブレット以上の幅では、カラムを左にfloatさせ、幅50%にします。

@media only screen and (min-width: 641px){
   .column {
     width: 50%;
     float: left;
   }
}

デスクトップの場合：

デスクトップでは、さらに別のメディアクエリを追加し、メインとサイドバーの幅を2/3と1/3に変更します。

@media only screen and (min-width: 1025px){
   .main {
      width: 66.66%;
   }
   .sidebar {
      width: 33.33%;
   }
}

CodePenで実際のコードの動作を確認できます。

比較的シンプルに思えますよね？ floatは決して悪いものではありません。長い間、それしか選択肢がなかったのですから。

しかし、次のFlexboxに進むと、floatグリッドがいかにハック的な手法だったか、そしてFlexboxがいかに直感的かがわかるはずです。

Flexboxによるグリッド

Flexboxでレスポンシブグリッドを作るには、先ほどと同じHTMLを使用します。親divの中に2つの子カラムdivがある構成です。

まず最初に行うのは、親要素にFlexboxを使うことを宣言することです。

.parent {
   display: flex;
}

次に、カラムのdivにflexプロパティを設定します。

.column {
   flex: 1;
}

flex: 1という宣言は、各カラムdivが他のカラムと同じ幅を持つことを意味します。いわば比率のようなものです。

もし1つ目のカラムを2つ目の倍の幅にしたいなら、1つ目のカラムのflexを2にし、2つ目のカラムはその半分の1にすればOKです。

これだけで始められます！

Flexboxは非常に賢く、カラムの数がいくつであっても、グリッドの空間を自動的に均等に分配してくれます。

このCSSをfloatグリッドで必要だったものと比べてみれば、Flexboxの方がシンプルだと同意してもらえると思います。

Flexグリッドを作る

それでは、2カラムのレスポンシブグリッドを作りましょう。floatグリッドのときと同様、まずモバイル向けのデフォルトスタイルから設定します。

モバイルの場合：

モバイルではFlexboxは不要で、タブレットとデスクトップだけでよいので、親divにまだdisplay: flexを指定する必要はありません。

カラムのdivは幅100%にしたいので、明示的にwidth: 100%を指定しても構いません。

あるいは、幅のスタイルを宣言しなくても大丈夫です。divは通常display: blockがデフォルトなので、自動的に幅100%になります。

タブレットの場合：

タブレットからFlexboxを導入し、メディアクエリでタブレット幅以上のスタイルを記述します。

まず、親要素にdisplay: flexを指定してFlexboxを有効にします。

この幅ではカラムを等間隔に並べたいので、すべてのカラムdivにflex: 1を指定します。1は、カラム同士が互いに同じ幅になることを意味します。

@media only screen and (min-width: 641px){
   .parent {
   display: flex;
}
.column {
   flex: 1;
   }
}

デスクトップの場合：

デスクトップでは、メインコンテンツが利用可能な幅の2/3を占め、サイドバーが残りの1/3を占めるようにします。

そのために、メインカラムのflex値を2に引き上げます。サイドバーはタブレットで設定した1のままなので、デスクトップ用の追加宣言は不要です。

@media only screen and (min-width: 1025px){
   .main {
      flex: 2;
   }
}

これは、メインコンテンツがサイドバーの2倍の幅になることを意味します。

カラムが2つあるため、メインコンテンツは幅2/3になり、サイドバーはその半分の1/3になります。

Flexboxは強力かつ直感的

Flexboxがいかに少ないCSSで済むか、すぐにわかるでしょう。しかも、作られるグリッドはfloatグリッドとまったく同じものです。

私がFlexboxを気に入っているのは、とにかく「ちゃんと動く」こと。直感的に使えるのです。

CSS floatと長年格闘してきた身としては、グリッドがこんなにも簡単に作れてしまうことに驚きました。

さらにFlexboxには、活用できる高度なプロパティも多数あります。

• カラムアイテムを水平方向にも垂直方向にも整列できる（そう、垂直方向にも！）
• アイテムを中央に配置したり、グリッドの親要素の左右いっぱいに伸ばしたりできる
• ブレークポイントごとにアイテムの順序を変更できる

Flexboxでできることの詳細は、CSS TricksやMozillaの記事で詳しく読めます。

FlexグリッドのCodePenはこちらです。

もうfloatを使う必要は二度とありません。もちろん、画像にテキストを回り込ませたい場合は別ですが。

さらに面白いことをやりましょうか。最後のグリッド手法に進みます。

CSS Grid Layout

CSS Gridは、グリッド構築のための最新の手法です。Flexboxと似ているようで、大きく異なる点もあります。

CSS Gridの第一人者であるRachel Andrew氏によると、それぞれに得意分野があります。

• Flexboxは、行または列のように一方向に並べる要素に適している
• CSS Gridは、行と列の両方が関わる配置に適している

彼女は別の記事で、ヘッダー、フッター、コンテンツ、サイドバーを含む典型的なWebサイトレイアウトにおいて、FlexboxよりもCSS Gridの方が適している理由を詳しく説明しています。

現時点でのCSS Gridの主な弱点は、すべてのブラウザでサポートされているわけではないことです。

古いバージョンのChrome、iOS Safari、Androidではまったくサポートされておらず、IEとEdgeのサポートも不完全です。

CSS Gridを使いたい場合の選択肢は2つあります。

• CSS Gridを使いつつ、非対応ブラウザ向けのCSSフォールバックを用意する
• または、ブラウザサポートが普及するまでFlexboxを使う

CSS Gridの仕組み

Flexboxと同じく、CSS Gridでも親要素にdisplayプロパティを設定します。今回はdisplay: gridを宣言します。

ただし、CSS Gridには大きな違いが一つあります。子要素それぞれにグリッド設定をするのではなく、親要素側にグリッドテンプレートを設定するのです。

グリッドテンプレートを設定するには、必要な列数・行数と、それぞれのサイズを宣言します。

そのために、複数列の場合はgrid-template-columnsプロパティを、複数行の場合はgrid-template-rowsプロパティを使います。

プロパティの後には、子要素ごとのサイズ値を続けて記述します。

2列のグリッドの場合は、grid-template-columnsプロパティだけを使います。

grid-template-columnsプロパティには、列ごとに1つずつ、計2つの値を指定します。

.parent {
   display: grid;
   grid-template-columns: 1fr 1fr;
}

「fr」とは一体何？！

「fr」はfraction（分数）の略で、新しい単位です。グリッド内の各アイテムが利用可能な空間のうち、どの割合（fraction）を使うかを表します。

実は、これはflexの数値と似ています。どちらも、ある子要素の他の子要素に対する相対的な幅を表しているからです。

CSS Gridを作る

ここでも、モバイルファーストのアプローチでグリッドをスタイリングしていきます。

モバイルの場合：

いつものように、モバイルでは子カラムが縦積みになるので、CSS Gridのスタイルは一切設定しません。

タブレットの場合：

タブレットでは、互いに等しい幅を持つ2つの子要素にします。

.parent {
   display: grid;
   grid-template-columns: 1fr 1fr;
}

デスクトップの場合：

デスクトップでは、メインカラムがサイドバーカラムの2倍の幅になる比率にします。これも計算すると2/3と1/3になります。

@media only screen and (min-width: 1025px){
   .parent {
      grid-template-columns: 2fr 1fr;
   }
}

実際のカラム側には一切グリッドスタイルを設定せず、親要素だけを設定すればいいのがポイントです。かなりクールだと思いませんか？

CSS Gridは驚異的に強力

Flexboxと同様に、CSS Gridは2カラムグリッドを作る以上のことができます。

CSS Gridを使えば、さまざまな幅・高さ・配置を組み合わせた、はるかに複雑なレイアウトも作れます。ここで紹介したのは、CSS Gridの能力のほんの表面をなぞったにすぎません。

CSS Gridについてさらに学びたい方は、Rachel Andrew氏のサイト「Grid by Example」や、Mozillaの記事「Basic concepts of grid layout（グリッドレイアウトの基本概念）」をチェックしてみてください。

今回のCodePenはこちらです。

まとめ

「結局どの手法がベストなの？」と迷っている方に向けて、個人的には現時点でのおすすめはFlexboxだと考えています。

十分に歴史があり、ブラウザサポートも良好で、グリッドを作るための効率的で優れた方法だからです。さらに、FlexboxはCSS Gridに完全に取って代わられることはありません。CSS Gridとうまく連携できる強みを持っているからです。

最後に、CSS Gridはまだブラウザサポートの拡大途上ですが、今から少しずつでも学び始めておくべきです。そう遠くないうちに、CSS GridはWebサイトレイアウト構築の業界標準になるでしょう。

あなたのお気に入りの手法はどれですか？ FlexboxやCSS Gridの学習でつまずいた経験はありますか？ ぜひ下のコメント欄でお聞かせください。