Webデザインを行う際に、複数の閲覧デバイスを想定してデザインを行うのは今では当たり前になっています。オンラインでのWebページの閲覧の4分の3はモバイルなので、モバイルでも快適に閲覧できるように、デザインを考えていかなければなりません。

Webデザインで段組を行う手法はさまざまありますが、現時点で最も手っ取り早いのはCSSグリッドを利用する方法です。CSSグリッドは見た目の段組を想定してコーディングできるので、より直感的な段組を行うことができます。

そこで今回は、CSSグリッドをレスポンシブデザインに活用するための詳細手順を紹介していきます。何かと概念的なCSSグリッドですが、ここでレスポンシブ対応するにはどうすればよいか、まとめておきましょう。

CSSグリッドでレスポンシブデザインを実装しよう

grid.png
イメージ画像

floatやflexboxのような「1次元」レイアウトに対して、「2次元レイアウト」と呼ばれるCSSグリッドを使ったレイアウトを使うと、デザイナーはより直感的にデザインできます。

参考：
これで分かった！10分でほとんど理解できる「CSSグリッド」の基礎

しかし、CSSグリッドを使っても使わなくても、レスポンシブデザインに対応させるのは骨の折れる作業には変わりありません。ブレイクポイントを設定して、複数のレイアウトを考えなければならないからです。その時に、Webデザインでの段組みに慣れていないと、コードを見るたびに混乱してしまう自体が発生します。

sketch.jpg
イメージ画像

ただ、CSSグリッドは従来のレイアウト手法よりはスムーズに段組みを行えるはずです。穴の空いたパズルにブロックを当てはめる感覚なので、慣れればこちらのほうが素早くデザインできます。

レスポンシブデザインに対応させるには*「media queries」(メディアクエリ)*を使う手法が一般的ですが、今回はそれ以外のアプローチもご紹介していきます。

media queriesを使う手順

im.jpg
イメージ画像

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

1カラムで横幅を最大まで広げるには、gridクラスを指定したdivタグに対して、下記のCSSを指定すればOKです。

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

必要なのはたったの4行です。もしグリッド間に空間を開けたい場合、「margin」や「padding」プロパティを指定するよりも、*「grid-gap」プロパティを加えたほうがシンプルでしょう。画像を横幅ぴったりに表示させる場合は、子要素の画像に「object-fit: cover;」*を指定します。

デスクトップでは、シングルカラムではなくマルチカラムになることが多いでしょう。その際に、media queriesを使って最低幅となるブレイクポイントを指定します。

@media (min-width: 40em) {
　　.grid {
　　　　grid-template-columns: 2fr 1fr;
　　}
}

この際に注意しておきたいことをいくつか挙げてみましょう。まず、ブレイクポイントはpixelおよびrem指定よりもem指定の方が好ましいです。これはPX, EM or REM Media Queries?に詳しく書かれていますが、以下の参考記事で和訳されています。

参考：
CSSMedia Queriesで使う単位はpx, em, remのどれが適しているか検証 -px指定は注意が必要 | コリス

また、デスクトップ画面での表示で、Gridアイテムをバラバラにしたい場合は、細心の注意を払いましょう。コンテンツを入れ替えて表示する最も簡単な方法は、

(1) 「グリッドに名前をつける」
(2)「グリッドにコンテンツを挿入する」という方法です。

例えば、デスクトップ画面で「1:2:1」の幅で表示する場合、media queriesは以下のように指定します。

@media (min-width: 40em) {
　　.grid {
　　　　grid-template-columns: 1fr 2fr 1fr;
　　　　grid-template-areas:
　　　　　　"header header menu"
　　　　　　"navigation content ad"
　　　　　　"footer footer footer";
　　}
}

続いて、グリッドにコンテンツを挿入していきます。グリッドの名前がすでに*「grid-template-areas」*プロパティで付けられていれば、あとは簡単です。

.header {
 　　grid-area: header;
}

.menu {
　　grid-area: menu;
}

// 以下同様

これで、CSSグリッドをmedia queriesで切り替えることが可能になります。

auto-fitを使う手順

コンテンツの入れ替えが必要な場合はmedia queriesを利用するのが一般的ですが、ブログの記事一覧のようにグリッドアイテムの順番を変える必要がない場合は、media queriesを使わずにレイアウトを整えることも可能です。

これを実現するには、グリッドコンテナの*「grid-template-columns」プロパティに、「repeat(auto-fit, [ブレイクポイント])」*を指定します。この場合、「repeat」関数でブレイクポイントを複数指定しているので、例えばブレイクポイントに10emを指定すれば、10em・20em・30em…と増えていきますが、ブレイクポイントを1箇所だけにしたい場合は「repeat」関数を取り外します。

grid {
　　display: grid;
　　grid-template-columns: repeat(auto-fit, 10em);
}

これで、10emの倍数をブレイクポイントとして、幅が変わるごとにコンテンツの数が変わります。

autofil.gif

media queries内でコンテンツを流していく方法は、ある程度「固定」されたレイアウトとなりますが、auto-fitはリキッドレイアウトに近いと言えます。どちらがいいということではなく、適材適所で臨機応変に使い分けていただくとよいでしょう。

まとめ

CSSグリッドに関するプロパティは少し長いので、非常に面倒に感じるかもしれません。しかし、レスポンシブデザインへの対応は非常に簡単であることがご理解いただけたでしょう。

一時期flexboxも流行しましたが、CSSグリッドはflexboxの持つ課題も解決しているので、今後のCSSグリッドはWebデザイナーの必須技術となります。仕組みを理解して、デザインに活かしていきましょう。