アイデア次第！「CSSグリッド」を使ってレスポンシブ対応の3カラムサイトを作ってみよう

Flexboxを使ったレイアウト手法に代わって、新たに注目を集めている手法がCSSグリッドを使ったレイアウトです。

従来のfloatを使った回り込みレイアウトやFlexboxを使ったレイアウト手法は、いわば「1次元的」なレイアウトでした。それに対して、縦横に配置する「2次元レイアウト」であるCSSグリッドは、Webデザインのパラダイムを大きく変えたという点で重要な役割を担っています。

CSSグリッドは、ほぼ全てのモダンブラウザで使用できるので、2018年以降もWebデザインにおけるレイアウト手法より定着していくはずです。しかし、これまで出てきている多くの情報が、実践的なものというよりは、どちらかと言えば概念的なものばかりです。

そこで今回は、「CSSグリッド」を使ったレスポンシブ対応の3カラムサイトのチュートリアルをご紹介していきます。

CSSグリッドをより実践的なサイト制作に当てはめてみることで、CSSグリッドによるサイト制作のイメージが掴めるのではないでしょうか。
　　

STEP1. レイアウトを書き出す

1-1. 必要なコンテンツとコンテナを書き出す

画像引用元：Stock.io

ここからは、CSSグリッドを使ったレイアウト手法について見ていきます。

この手法においてどこがポイントかというと、大切なのはグリッドに当てはめていくコンテンツを書き出していくことです。何を盛り込むかが決まらなければ、レイアウト自体が決まらないので、先にコンテンツを列挙してしまいましょう。

モバイル版とデスクトップ版のどちらのコンテンツを書き出せばいいのか迷うかもしれませんが、一旦はデスクトップ版のホームページを想定して書いてみてください。モバイル版よりも、デスクトップ版のWebサイトの方が、一般的には表示するコンテンツ量が多くなるからです。

この時、ナビゲーションやヒーローヘッダー、広告エリアなども全て書き出していきます。
　　

1-2. デスクトップファースト vs. モバイルファースト

画像引用元：Stock.io

先述のように、レスポンシブ対応のWebサイトを作成する場合、デスクで座って閲覧する「デスクトップ版サイト」と外出中や移動中に見る「モバイル版サイト」では、表示する項目が変わってくるはずです。

おそらく、多くの場合、表示幅が狭い「モバイル版サイト」では「デスクトップ版」で表示していたもののいくつかを非表示にすることになるでしょう。

近年、スマートフォンやタブレットからのインターネットアクセスが増加したことで、モバイルデザインにフォーカスする「モバイルファースト」が叫ばれています。モバイルファーストはモバイルデザインからデザインすることだと捉えられている動きもありますが、実際のところはフリック操作などモバイル環境を考慮して、必要最小限の情報を適切なレイアウトで設計することにほかなりません。

ちなみに、CSSグリッドでレスポンシブサイトをデザインする場合には、モバイル版のサイトをデザインしてからデスクトップ版のサイトに当てはめていくのがデザインしやすい方法になります。
　　

1-3. レイアウトをスケッチ

画像引用元：Stock.io

次に、デスクトップ版とモバイル版の両方をスケッチしていきます。

大抵の場合、モバイル版のWebサイトはシングルカラムで済みますが、デスクトップ版は複数カラムになるかと思います。CSSグリッドレイアウトの場合は、どの順で配置するかは後から考えればいいので、ひとまず自由にレイアウトをスケッチしてみましょう。
　　

STEP2. グリッドを考える

2-1. グリッドの考え方

CSSグリッドはTABLEレイアウトやFlexboxレイアウトなどの様々なグリッドシステムに比べて、これまで以上にシンプルな考え方でWebサイトを構築することができます。

より簡単に言えば、CSSグリッドシステムを構築するのに必要なのは、以下の2つだけです。

1. グリッドのデザイン
2. 異なるViewportでグリッドがどのように振る舞うか

グリッドのデザインについてはSTEP1で見てきたので、STEP2で「異なるViewportによる挙動」を設定していきます。
　　

2-2. モバイル版レイアウトを作成

レスポンシブデザインでWebサイトを作る際に、最も簡単な方法はモバイル版のレイアウトを先に作っていくことです。理由はいくつか挙げられますが、1番はグリッドコンテナの中に入れていくグリッドアイテムが、CSSグリッド適用前だと1カラムに並ぶので、イメージしやすいからです。

ただし、デスクトップ版では表示するけれど、モバイル版では表示しないものについては、一旦フッターエリアの下に入れておきましょう。
　　

2-3. グリッドのベースを作成

続いて、デスクトップ版のカラムレイアウトを作成してみましょう。

まずは、親要素であるグリッドコンテナーを配置して、縦横に線を分割してみましょう。

最初に、display: gridを指定することで親要素をグリッドコンテナー化します。次に、grid-template-columnsプロパティを指定して縦の線を引っ張ります。均等に分割するために、「fr」(fractions)という単位を利用できます。

ここでは、チュートリアルとして3x3のカラムを作成していきます。

grid-template-columns: 1fr 2fr 1fr;

縦と同様に、横の線をgrid-template-rowsプロパティで指定していきます。

grid-template-rows: 100px auto 100px;

これで、3x3のカラムが完成しました。

ちなみに、任意ですが、grid-template-areasプロパティを使ってエリアに名前を付けることができます。

例えば、下記のような場合では、9分割したグリッドコンテナーのエリアに名前を付けています。

.site {
　　display: grid;
　　grid-template-colmn: 1fr 2fr 1fr;
　　grid-template-rows: 100px auto 100px;
　　grid-template-areas:
　　　"header header menu"
　　　"navigation content ad"
　　　"footer footer footer"
}

このように指定すると、下図のように名前が付けられたことになります。同じ名前を付けているエリアがあるという点は、非常に重要です。
　　

2-4. グリッドにコンテンツを流し込む

続いて、グリッドにコンテンツを流し込んでいきます。

グリッドの名前がすでにgrid-template-areasプロパティで付けられていれば、あとは簡単です。

.header {
　　grid-area: header;
}

.content {
　　grid-area: content;
}

// 以下同様

このようにすれば、先ほど付けたタイトルにグリッドを流し込むことができます。
　　

2-5. メディアクエリで操作

最後に、レスポンシブの挙動を加えていきます。

ここでは、仮にブレイクポイントを800pxにして考えていきます。考え方について重要な点は、次の2点です。

1. 800px以上ではdisplay: gridを、それ以外ではdisplay: boxを適用
2. 800px以上で表示するコンテンツはgrid-areaを正確に指定、それ以外ではgrid-area: autoにして、表示しないコンテンツはdisplay:noneを指定

こうすることで、800px以上での挙動とそうではない場合をわけることができます。
　　

まとめ

今回は、実際のレスポンシブデザインのWebサイトの作成を想定したチュートリアルをご紹介しました。

CSSグリッドは革新的だとはいえ、まだ制作現場では使われているところも少ないかもしれません。しかし、CSSグリッドでの段組に慣れれば、制作スピードが早まるのは間違いありません。

ぜひ、CSSグリッドを使ったサイト作りに挑戦してみてはいかがでしょうか。