今回、『作って学ぶ HTML + CSS グリッドレイアウト』を執筆することになり、現在のWeb構築・実装におけるレイアウト手法について、CSS Grid はもちろん、Flexbox や Web の歴史も含めて、再確認・再検討を行いました。
というのも、現在のWebのレイアウトの実装にはいろいろな問題があるからです。さまざまなコンポーネントなどを組み合わせて構築するのも当たり前になってきましたが、組み込んだときの影響やスペースの管理、深くなるネスト構造などなど…。
「HTML & CSS はこういうもの」と言われますが、そうなのでしょうか？
CSS Grid の現状とモヤモヤ
現在のWebレイアウトの主力といえば Flexbox（フレックスボックス）です。CSS Grid （CSSグリッド）とも長い付き合いになってきましたが、CSS Grid をどこにどの程度導入していくかは
- Flexbox では実現が難しいレイアウトを実現するときに使う
- Flexbox と比べて少ないコードで書けるときに使う
という感じになっています。あくまでも Flexbox が主体で、補助的に CSS Grid を使うという感じです。Figmaでもオートレイアウトでデザインを作ると Flexbox を使ったコードになりますし、下手に CSS Grid を導入するとわかりにくいと言われてしまうこともあります。
「ネスト構造がどこまで深くなろうとも Flexbox を使うのが正義なのだろうか」 と、どこか諦念のような気持ちになりつつ、ずっとモヤモヤとしていました。
CSS Grid は Flexbox と比較すべきものなのか？
という疑問
そんな CSS Grid との関わり方を見つめ直すきっかけがありました。それは、
「Flexbox と比較されることの多い CSS Grid だけど、CSS Grid の立ち位置って Flexbox と並ぶところなのだろうか？」
と問われたことでした。いわく、
- CSS Grid を使い込めば使い込むほどに違和感を感じる
- Flexbox はもちろん、それ以外の CSS モジュールと比較しても、その機能の規模が大きい
- おまけに、イメージと異なる挙動をすることも少なくない
- 結果として、CSS Grid に関するケースバイケースの引き出しがどんどん増えていく
- 何か勘違いをしているだろうか？
とのこと。
確かに、CSS Grid は多機能です。使っていて出くわす「よくあるトラブル」や「謎な設定」も列挙できるようになってきました。
そこで、CSS Grid に関して１から再確認を始めることにしました。
CSS Grid というものを再確認してみる
まずは、すべての基本である CSS Grid の仕様書です。 すると、こんな記述が見つかります。
This CSS module defines a two-dimensional grid-based layout system, optimized for user interface design. In the grid layout model, the children of a grid container can be positioned into arbitrary slots in a predefined flexible or fixed-size layout grid. Level 2 expands Grid by adding “subgrid” capabilities for nested grids to participate in the sizing of their parent grids.
このCSSモジュールは、UIデザインに最適化された 2 次元のグリッドベースのレイアウトシステムを定義しています。グリッドレイアウトモデルでは、グリッドコンテナの子要素を、事前に定義されたフレキシブルまたは固定サイズのレイアウトグリッド内の任意のスロットに配置できます。レベル 2 では、ネストされたグリッドが親グリッドのサイズ決定に参加できる「サブグリッド」と呼ばれる機能を追加しています。
… レイアウトシステム
ん？ 長く CSS を扱ってきたもので、この「レイアウトシステム」というキーワードがストーレートに入ってきません。
というのも、CSS におけるレイアウトシステムは CSS の登場時から使われている フローレイアウト（Flow Layout） が唯一という認識だったからです。唯一であるからこそ、その存在は認識するまでもなく、認識さえされていないというのが実情でしょうか。
Webでは当たり前となっている、要素が書いた順に並び、相互関係で配置が決まっていくのは「フローレイアウト」でレイアウトされるためです
それでは、Flexbox などは何なのか？ ということになりますが、簡単に言ってしまえば「フローレイアウトの機能拡張」です。ですから、フローレイアウトの一部のように扱うことができます。同様に、これまでは CSS Grid もフローレイアウトの拡張や一部のように考えて扱ってきました。
しかし、「CSS Grid はフローレイアウトとは異なるレイアウトシステム」と考えてみると、話が変わってきます。そして、そう考えると納得できることが少なくないのです。
これはもう少し深堀りして確認するしかありません。
第2のレイアウトシステムとしての CSS Grid
仕様書からさらに掘り下げるとすれば、CSS Grid の仕様をまとめたエディターや関係者の方々の発言を追いかけるのが一番でしょう。ネット上にはメーリングリストのログやブログのポスト、講演を録画した YouTube 動画といったものが残っており、興味深い発言がいろいろと見つかります。
- CSS1 の登場直後から指摘され続けていたフローレイアウト（CSS）の抱える問題
- Flexbox （エディターの主要メンバーは CSS Grid と共通）が目指したものと、Flexboxでは解決されない問題
- CSS Grid での狙い
などなど…。これらをざっくりとまとめると、
「ドキュメント（文書）のレイアウトのために用意されたフローレイアウトを使って、Webに求められる多様なレイアウトを行うことには無理がある。そこで、ドキュメント以外のレイアウトを受け持つためのレイアウトシステムとして CSS Grid を用意する」
といった感じでしょうか。つまり、CSS Grid は CSS の第2のレイアウトシステムとして登場しているのです。
確かに、仕様書を読み直すとフローレイアウトとはまったく異なるレイアウト環境が構築されています。 フローレイアウトの拡張や一部と考えて使ってしまうと、いろいろと違和感を感じるのも当然です。
… アレ？ コレハ、イロイロトマズイノデハ？
フローレイアウトの拡張や一部として使ってきたがために、当然だと思っていた細かなことが（フローレイアウトのルールを適用できるかどうかも含めて）まったく未知なものに変わりました。
つまり、これまで使ってきた CSS Grid はその断片でしかなく、本来のポテンシャルを活かしきれていなかったということになります。
では、意識の外だった CSS Grid に関する情報はどうなっているのでしょう？ 探してみるものの、仕様書以外にはほとんど見当たりません。 わずかに見つかるものも、CSS Grid の関係者の解説ぐらいしかなく、具体的なサンプルなんて見つかりません。つまり、ほとんど認識されていない…。
それもそのはずです。何か新しいプロパティや機能が追加されたといった話ではなく、CSS Grid の立ち位置をどう捉えて、どう使うかという話なのですから。
ならばと、自分たちで実践的なサンプルを作成して再検証していったわけですが…
再検証の結果、たどり着いたところ
ー CSS Grid を中心に据えたレイアウトの制御
結果的に、CSS Grid の捉え方、理解の仕方、使い方が大きく変わりました。特に大きかったのは、CSS の歴史や CSS Grid のエディターの方々が考えていたことに触れ、確信を持って
「CSS Grid を主体にレイアウトを制御し、
補助的にフローレイアウト（Flexboxを含む）を使う」
と思考できるようになったことです。さらに、CSS Grid を中心に据えることで、
- 一貫した手法でレイアウトを制御できる
- 制御のための設定があちこちに分散しなくなる
- レイアウトのためにどうグループ化するかを考えなくてよくなる（セマンティックなマークアップだけを考えればよくなる）
などなど、数多のメリットを享受できるようになります。
同時に、これまでは CSS Grid を上辺だけでしか使いこなせていなかったということになりますので、ちょっとお恥ずかしい限りなのですが…。CSS Grid はもちろん、これまでのCSS（フローレイアウト）の扱いも含めて、関わり方を見つめ直すチャンスなのかもしれません。
というわけで、ここまでに調査した情報、そこから得られた CSS Grid の基本やロジック、それらに基づいて構築した実践サンプルなどを１冊の本にまとめました。それが、今回の『作って学ぶ HTML + CSS グリッドレイアウト』です。
書籍の構成と実践サンプル
書籍全体は次のように構成しています。
Chapter 1～2： HTML & CSS の歴史と CSS Grid が生まれた背景
CSSのエディターや関係者の方々の発言などを追いながら、Web (HTML & CSS) の歴史を振り返り、CSS Gridが生まれた背景、Flexboxなどとの違いに迫ります。その際に、次のように「画像とテキストとボタンを並べるだけ」のシンプルなレイアウトが時代によってどのように実現されてきたのかや、Flexboxで実現したときの課題とそれがCSS Gridでどう解決されたのかも見ていきます。
（時代によってさまざまな方法で実現されてきました）
Chapter 3～4： CSS Grid の基本とロジック
CSS Gridが生まれた背景を元に、CSS Grid の基本的な使い方や各種機能の活用方法を見ていきます。さらに、CSS Grid がブラウザでどのように処理されてグリッドレイアウトが形になっていくのか、サブグリッドやpositionを組み合わせるとどうなるのかなども深掘りしていきます。
基本とロジックを見ていきます
Chapter 5： 実践サンプルの構築
ここまでに見てきたものを元に、CSS Grid を活用して WebアプリやWebページで使用される実践的なサンプルを構築します。Flexboxは使用していません。
アプリやページで使用される各種UIパーツも CSS Grid で構築し、組み合わせて利用しています。
Chapter 1 ～ 4 を踏まえた上で Chapter 5 の実践サンプルを構築してみると、すべてのレイアウトが「グリッドの中にアイテムを入れて配置をコントロールするだけ」というシンプルな手順で構築できることがわかります。「レイアウトのためにどこをどうマークアップしよう？」と悩む手順もありません（悩む必要があるのは、HTMLのセマンティック的にどうマークアップしよう？ という部分だけです）。
本書が「CSS Grid は難しい」や「CSS を使ったレイアウトは難しい」を解決する一助となれば幸いです。
作って学ぶ HTML + CSS グリッドレイアウト
CSS Grid でWebのレイアウトを自在にコントロール