アイデア次第！「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グリッドレイアウトの場合は、どの順で配置するかは後から考えればいいので、ひとまず自由にレイアウトをスケッチしてみましょう。