CSSグリッドでシンプルな文書構造を実現させる「CSSグリッドレイアウトデザインブック」

2018年6月に発売されたエビスコムの「CSSグリッドレイアウトデザインブック」を読んだので、紹介したいと思います。
もちろん、ちゃんと全体のコードを1度手打ちして試してみました。

CSSグリッドの可能性とWebデザインの自由が広がる

この本を読んだ印象としては、やはり「HTML5&CSS3ステップアップブック」の発展版といった感じでしょうか。
「HTML5&CSS3ステップアップブック」ではパーツの横並べとかはフレキシブルボックス（Flexbox）も利用していましたが、「CSSグリッドレイアウトデザインブック」ではそれさえも全てCSSグリッドで行っており、「こんなところまでやっちゃうのかよっ!?」と思っちゃうくらい、HTML/CSS本としてはトガっているかもしれません。

また、大したCSSグリッドに関する説明もなく、いきなりつくりはじめていくので(巻末にはちゃんとCSSグリッドのリファレンスは付いています)、「HTML5&CSS3ステップアップブック」や「HTML5＆CSS3デザイン現場の新標準ガイド」を読んで、ある程度CSSグリッドを理解しておいた状態から入っていったほうがより分かりやすくなるかとも思いました。

まぁそれでも、完成見本の図では難しそうに思えたレイアウトもCSSグリッドを用いれば、意外と簡単に実装できてしまうというのが、やはりCSSグリッドの優れたところなのではないでしょうか。
（他のエビスコム本と比べると）サンプルでつくるデザインもおしゃれでかっこよいため、つくる際のモチベーションにもつながり、実際に自分の手でコーディングして進めてみてほしいと思います。

ほんとうに伝えたいのはHTMLの文書構造を意識したWebデザイン

この本を読んでいってみると分かるかと思うのですが、「CSSグリッドレイアウトデザインブック」で伝えたいのは単純にCSSグリッドの使い方やテクニックだけでなく、いかにHTMLとCSSを分離させて文書構造を意識したサイトの組み立てられるかというところにあります。

この本を読んで感心したのが、レイアウトやレスポンシブのために<div>のコンテナを追加したり、パーツの並びを変えたりするのではなく、CSSグリッドを利用することでシンプルなHTML構成の実現が可能になるという点です。

サンプルをつくっていくときもまずはじめに完成見本を見て、パーツごとに分けてページの流れ（動線）を確認し、HTMLに落とし込むという作業手順になっています。

サイトをつくっていくときに始めはある程度HTMLの構造を意識はしているつもりなのですが、思ったレイアウトを実現するために<div>を追加したり、パーツの並びを意図的に変えたりと、いつのまにかHTMLの文書構造を軽視しがちになっていることに気づかされました。

ただ、サンプルを作成してレスポンシブでデザインを整えていく流れが、主にタブレット → パソコン → スマートフォンという順番だったのが、個人的にはいまいちというか、気になった部分ではあります。
CSSグリッドの魅力を伝える本であるため、仕方ないところはもちろんあるかと思いますが、最近の環境を考えるとスマートフォン→ タブレット → パソコンもしくは、その逆の流れのほうが仕上げていく際にはスムーズなような気がしています。

CSSグリッドの世界へようこそ

この本では主に3つのレイアウト（6種類のデザイン）と、おまけみたいなナビゲーションのサンプルがあり、ステップ・バイ・ステップでCSSグリッドを学ぶことができるエビスコム本らしい仕上がりになっていて、個人的には満足な内容の一冊でした。

このように、はじめからしっかりとデザインが決められているレイアウトをつくっていく場合には大いにCSSグリッドが役立つでしょうが、汎用的（大衆的？）なサイトをつくっていこうとすると、現段階ではまだまだ難しいところや弊害もあるかと思います。
後からコンテンツを追加するかもしれない場合のメンテナンス性や、他の人も利用するといったときにうまく表示することができないといったトラブルなんかも起こりそうな気もしますし、IE11に対応するために古い規格のプロパティを使用しなければならないなどといった制約もあったりするので、しっかりとつくるまえの計画を立てることが大事となりそうです。

もし、CSSグリッドを積極的に使っていくなら、ときには思い切った割り切りも必要かもしれません。最近あたらしくなったエビスコムのサイトにもCSSグリッドが活用されていますが、IE11で表示させるとかんたんな最小限のレイアウトになっており、他ブラウザの使用を推奨するメッセージがあらわれます。
最近はスマホでサイトを見る人が増え、パソコン自体から見る人も減ってきているため、こういう思い切った手法も案外悪くないのかなぁと感じました。スマホ専用サイトも増えましたし……

この「CSSグリッドレイアウトデザインブック」は、CSSグリッドの世界の入り口へあなたを連れ出していってくれることができるでしょう。自由なWebデザインがつくれるようになったことで、よりデザインの魅力や必要性が高まってくるでしょうし、その考えたデザインを実装、実現するためのテクニックがつくる側の人にも求められてきそうです。