Webデザインを学び始める人が最初に立ちはだかる壁が、段組としてのレイアウトです。

Webデザインの黎明期は、TABLEレイアウト、そしてfloatを使った回り込みレイアウトが主流でした。しかし、TABLEレイアウトは読み込み時間が長くなる傾向になり、floatを使ったデザインはブラウザによっては回り込みがうまくいかず、段組が崩れてしまうなど、初心者を悩ませる問題がたくさんあったのです。

そこで2012年頃から登場したのが、Flexboxを使ったレイアウトです。それまでにさまざまなCSSフレームワークが登場し、多くのフロントエンドエンジニアやWebデザイナーはfloatでのレイアウトの問題を解決するためにこうしたフレームワークを活用していました。

しかし、Flexboxでのレイアウトも、場合によってはレイアウトがはみ出してしまうことがあったりと、万能ではありませんでした。その問題を解決する新しい選択肢が、**「CSSグリッド」**なのです。

そこで今回は、今までのレイアウトの概念とは一線を画す「CSSグリッド」レイアウトの基礎を、まとめました。Flexboxの代替としてCSSグリッドが語られることが多いですが、本質的なレイアウト手法は全く異なったものなので、改めておさらいをしておきましょう。

「回り込み」、レスポンシブデザイン、そしてFlexboxの登場。

foundation.png
Foundation / スクリーンショット：2017年9月

まずは、「CSSグリッド」について触れる前に、いままで主流だったFlexboxを使ったレイアウトに関して、その特徴をみておきましょう。

2012年前後のWebデザインの世界では、Twitter社の*「Bootstrap」やZurb社の「Foundation」など、レイアウトを解決するためのさまざまなフレームワークが脚光を浴びていました。しかし、こうしたフレームワークは、あくまでも古い技術を組み合わせてパッケージ化しているにすぎず、回り込みを最適化するグリッドシステムも段組を行うための一時的な措置にしか過ぎなかった*のです。

そこで注目を浴びたのが、Flexboxを使ったレイアウトです。グリッドシステムを使わなくとも、CSS3とHTML5で直接段組を行うことができるようになったのです。

Flexbox自体はそれ以前から存在していましたが、仕様が何度も変わってしまって、使いにくいものでした。しかし、2012年9月にようやく仕様が固まってきました。また、時代背景として、レスポンシブデザインが非常に注目を浴びた時期でもあったので、レスポンシブデザインとの相性がよかったのもFlexbox普及の起爆剤だったと言われています。

Flexboxのベースも「回り込み」操作

Flexboxは、本来的な名前を*「Flexible Box Layout Module」*と言います。その名の通り、(インライン要素ではなく)ボックス要素を並べ、フレキシブルに回り込みを制御することができる画期的な仕様です。

Flexboxを理解する上で重要なのは、親要素と子要素を分けて考えることです。Flexboxを適用する範囲を決めて、その中で並び替えを行うので、親要素であるFlexboxコンテナーの中で子要素であるFlexboxアイテムが回り込みを制御される形になります。

スライド01.png
筆者作成

親要素のFlexboxコンテナーでは、flex-directionで子要素の配置方向を横方向・縦方向などに指定することができたり、flex-wrapで折り返し位置を指定したりすることができます。また、justify-contentで子要素を揃えたり、align-itemsで子要素の高さやベースラインを指定することも可能です。

よくある*聖杯レイアウト(Holy Grail Layout)*も、Flexboxは簡単にレイアウトできます。聖杯レイアウトとは、上方にヘッダー、下方にフッター、中部左右にナビゲーションを配置して真ん中にコンテンツを置く、20世紀後半に主流だった典型的な段組のことです。

スライド02.png
筆者作成

上の図の聖杯レイアウトで言えば、中央部分にFlexコンテナーを配置し、メディアクエリでflex-directionなどを操作するだけで、簡単にスマートフォン対応のレスポンシブデザインを実装することができます。

これだけ読むだけでも、多くの方が*「Flexboxはすごい！」と思っていただけると思います。ただし、繰り返すように、Flexboxは要素の「回り込み」を自由自在に扱うものであり、まれにword-wrap: break-word;*などの影響を受けて、子要素であるボックスの中身によっては回り込みがうまくいかなくなるなど、万能ではありませんでした。