ここ数年、Webページの閲覧のシェア率はモバイルが半数以上を占めており、その数は年々増加傾向にあります。
モバイルでもストレスなく快適にWebページを閲覧するためには、レスポンシブデザインでWebページを制作する必要があります。
また、レスポンシブでデザインをすることはWebデザイナーにとって必須ともいえるでしょう。
レスポンシブデザインと言ってもデザインを組む方法は多様にありますが、中でも最も簡単で手っ取り早いのは「CSSグリッド」を利用する方法ではないでしょうか。

今回は「CSSグリッド」をレスポンシブデザインに活用する方法をご紹介いたします。もくじ

1. CSSグリッドとは
2. media queriesを使う
3. auto-fitを使う
4. まとめ

◆CSSグリッドとは

Webデザインにおいて段組みのレイアウトは基本中の基本とも呼べる大事な役割です。
以前はテーブルレイアウト、そしてfloatを使った回り込みレイアウトが主流でしたが、段組みの崩れなど様々な問題がたくさんありました。
そこで問題の新しい解決策として近年登場したのが「CSSグリッド」です。
テーブルレイアウトやfloatで回り込みをさせた「1次元レイアウト」に対して、CSSグリッドでは「2次元レイアウト」を使用しています。
「2次元レイアウト」とはブロックを作って並べていくのではなく、1枚のブロックを縦、横方向に区切っていく方法です。

◆media queriesを使う

レスポンシブに対応させるには一般的に「media queries」を使用します。
モバイルレイアウトを先に作り、 CSSグリッドの適用前にグリッドアイテムが縦1列に並べられ、イメージがしやすくなるというメリットがあります。

1カラムで横幅を最大まで広げたい場合は、gridクラスを指定したdivタグに対し、

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

上記のようにCSSを指定します。

◆auto-fitを使う

グリッドアイテムの順番を変える必要がないブログ記事一覧のような場合には、「grid-template-columns」プロパティに、「repeat(auto-fit, [ブレイクポイント])」を指定する方法が便利です。
auto-fitを指定すればディスプレイの幅が変わるごとにコンテンツの数を変えることができます。

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

例えば上記のようにCSSを指定すると、5emの倍数をブレイクポイントとして、画面の横幅が変わるごとにコンテンツの数が変化していきます。

◆まとめ

今まで非常に難易度が高く面倒だと感じられたレスポンシブデザインもCSSグリッドを活用すれば複雑なfloatを使った回り込みをする必要がなく簡単にコンテンツをレイアウトすることができます。
今後ますますモバイルでの閲覧数が増え、CSSグリッドはWebデザイナーにとって必須な技術となっていくでしょう。

この機会にCSSグリッドの仕組みを理解して、積極的にレスポンシブデザインに挑戦してみてください。 フォーザウィンはIT業界で働く仲間を募集しています！ 経験、未経験は問いません。是非当社の採用情報をご覧ください。 採用情報を見る ＞