最近、ようやくCSS Gridを学びはじめてるんですけど、学ぶ課程で「CSS Gridが”普及”するとBootstrap や Foundtion のようなフレームワークの作り方も変わるんだろうなぁ」と考えています。
どう変わるのかというと、まずは：
- 基本的にレイアウトはCSS Grid（必要に応じてflexbox）でやるようになる
- コンポーネントはいままでのフレームワークと基本的には同じだけど、CSS Gridに入れ込みやすい設計に変わる
もう少し詳しく書くと：
- Bootstrapなどで採用されているグリッド・システムが必要なくなる
- 少なくとも
rowとcol-4、col-md-6のような書き方はなくなる - 独自のグリッド・システムで作っていたレイアウトはCSS Gridでやるようになる
- つまり、HTMLにクラスを記述してHTMLでレイアウトを組むのではなくCSSでレイアウトするようになる（あとで説明します）
- コンポーネントは幅に依存しない設計になるが、最適幅（最小幅と最大幅）を定義するようになる
といった感じです。
そうなると、レイアウトやフレームワークに対する考え方を少し変える必要があると感じています。ちょっとしたマインドシフトが必要になる。そんな気がしています。
コンテンツを基準にしたレイアウトが可能に
いままでのHTMLの組み方ではグリッド・システムでレイアウトを作って、そのグリッドにコンポーネントをはめ込んでいくというのが主流でした。でも、CSS Grid後の制作では、まずページに必要なコンポーネントをHTMLに記述する。そして、それらコンポーネントの組み合わせに最適なレイアウトをCSS Gridでするようになる。CSS Gridはすごく柔軟にできた優れたグリッド・フレームワークなので、その方がより柔軟で効率的なコーディングができます。
コンポーネントは幅や高さが可変で、柔軟にレイアウトに組み込める設計にして、基本的には幅に依存しないものにするのが良いと思うんですが、最適幅（最小幅とか最大幅）を定義してルール化しておくと、CSS Gridのminmax()を使ってレイアウトに組み込みやすくなります。
そして、この方法が実現すると真にコンテンツを基準にした「コンテンツのためのレイアウト」が可能になります。いわゆるコンテント・アウト（Content-out）な制作ですね。コンテンツを無理やりグリッドにはめ込むんじゃなくて、中のコンテンツに合わせてレイアウトをするやり方です。
というのが、いまのところの結論です。
で、どのようにこの考えに至ったのか、参考までに書いておきます。
まずは、Bootstrapなグリッドの書き方のおさらいから。
Bootstrapなグリッドの書き方
Bootstrapなどのフレームワークで基本的なレイアウトを組むには用意されているグリッド・システムを使います。行を作るためにdivを入れてrowクラスを指定して、その中のdivにcol-6やcol-8などといったカラム数のクラスを入れていきます。どのCSSフレームワークのグリッド・システムもだいたいこんな感じで出来ています。
HTMLの記述は下のような感じですね↓
<div class="container">
<div class="row">
<div class="col-6"></div>
<div class="col-6"></div>
</div>
<div class="row">
<div class="col-8"></div>
<div class="col-4"></div>
</div>
</div>これはこれでCSSを触らずにHTMLのみでレイアウトを組む際にはすごく便利なんですけど、これだとコンテンツとレイアウトが分離できてなくて、レイアウトを変更しようとするとHTML自体を編集する必要があります。
テーブルレイアウトと変わらない
極端な話、概念的にというか根本的には、やっていることは古き良き時代（？）のテーブルレイアウトとあまり変わらないんですね。ただレスポンシブに対応できるようになっただけというか。。。
<table>
<tr>
<td width="50%"></td>
<td width="50%"></td>
</tr>
<tr>
<td width="66%"></td>
<td width="34%"><td>
</tr>
</table>セマンティックスを考えるとレイアウトにテーブルを使うのはイケてない。じゃぁ、divにしてクラス入れよう、みたいな。。。
これをCSS Gridでやると
CSS Gridを使うと行のために余計なdivを入れなくてすむし、カラム数のクラスをHTMLに記述する必要がなくなります。一番シンプルにHTMLを組むと以下のコードですんでしまって、あとはCSS Gridでレイアウトを自在にコントロールできるんですね。
<div class="container">
<div></div>
<div></div>
<div></div>
<div></div>
</div>マルチデバイス対応のために<div class="col-4 col-md-6">といったような複数のクラスを入れなくてもすみますし。コンテンツの表示順を含め、CSS Gridとメディアクエリを組み合わせればかなり柔軟にレスポンシブなレイアウトの対応が可能になります。
しかも、グリッドありきじゃなくてコンテンツを基準にしてレイアウトができるんです！CSS Gridは魔法の杖みたいなもんですね。
CSS Gridを使うメリット
CSS Gridを使うことで以下のメリットが得られます。
- HTMLを本来あるべき文書構造に近いものにできる
- HTMLとレイアウトを分離できる
- より柔軟なレスポンシブなレイアウト対応ができる
- いままではDOMを変更しないと出来なかったことができるわけです！
- そうすると、コンテンツを基準にレイアウト制作ができるんです！
これを活用しない手はないわけですね。
では、これを具体的にフレームワークに組み込んで、どうシステム化するのか？というところまでは実はまだ答えが出ていません。はい、すみません。
ただ、ひとつはっきりしているのは、いままでのレイアウトの考え方とは違ったマインドで進めないと、このメリットを最大限に生かせないんじゃないかということです。
ちょっとしたことなんですけどマインドシフトが必要になるんだろうな、と。長く続いた古い習慣を断ち切る必要があるわけです。
フレームワークのメリットとデメリット
Bootstrapのようなフレームワークを導入するメリットはCSSをいじらずにHTMLの記述だけで高度なレイアウトやページ制作ができるというのもあります。なので、一概にフレームワークで採用されているグリッド・システムの作り方が悪いとはいえません。それはそれで、一定の範囲内でのメンテナンス性はありますし。
でも、HTMLとレイアウトがガチガチにひっついてしまっているのは中長期的なメンテナンス性を考えるとデメリットになります。というのも、HTMLとレイアウトががんじがらめなので、レイアウトを変えようとすると結局CSSとHTMLの両方を修正しなければならなくなるからです。
じゃぁ、どうすればいいのか？
CSSをいじらずにHTMLの記述だけでレイアウトを組むんじゃなくて、HTMLをいじらずにCSSでレイアウトを書けばいいんですよね。きっと。
結局レイアウトはCSSで書く
原点回帰じゃないですけど、結局レイアウトはCSSでやるようにするのがいいと思っています。HTMLのソースをこねくり回すことを考えるんじゃなくて、CSS GridでCSSでレイアウトをこねくり回す。そのためにCSSの中で「システム」を作る。毎回同じようなスタイルを書かなくてもいいように何かしらのシステムを作ると便利なんだろうなぁと想像しています。
そうすると、やっぱりSassとか使うのがいいのかなぁ。。。
ちょっとわかりませんが、もう少しクリアになってきたらまた書きます。
とりあえず、いまのところ現場からは以上です。
Enjoy experimenting with CSS Grid. It’s much fun!
2018年1月10日に公開された記事です。
About the author
「明日のウェブ制作に役立つアイディア」をテーマにこのブログを書いています。アメリカの大学を卒業後、ボストン近郊のウェブ制作会社に勤務。帰国後、東京のウェブ制作会社に勤務した後、ウェブ担当者として日英バイリンガルのサイト運営に携わる。詳しくはこちら。
ウェブ制作・ディレクション、ビデオを含むコンテンツ制作のお手伝い、執筆・翻訳のご依頼など、お気軽にご相談ください。いずれも日本語と英語で対応可能です。まずは、Mastodon @rriver@vivaldi.net 、Twitter @rriver 、またはFacebook までご連絡ください。