HTML&CSS

複雑なレイアウトにはCSSグリッドがおすすめ

HTMLとCSSを学んで、とりあえず基礎知識は身に付いた。一般的に本で紹介している知識はほぼ身に付いた。けれどいまひとつ自信が持てない。複雑なレイアウト配置の表現ができない。レスポンシブデザインはできるけれど、Bootstrapのグリッド依存が抜け出せない。

そんな人がさらに複雑なレイアウトが作るためにおすすめの方法、それを学ぶための本を紹介します。

複雑なレイアウトにはCSSグリッドがおすすめ

ウェブ上で複雑なレイアウトをするにはCSSグリッドレイアウトがおすすめです。

グリッドといってもBootstrapなどのフレームワークで実現されていた、画面幅によってコンテナの幅を調整するようなものではありません。

簡単ながらCSSグリッドの魅力を紹介します。

  • Flexboxなどとは違い、二次元的にレイアウトができる。
  • レスポンシブデザインも可能。
  • 無駄にレイアウト用にdivを追加しなくてよい。
  • 柔軟で理解しやすい。きれいなコードになる。

CSSグリッドは新しい方式であるため、まだあまり普及はしていませんが、間違いなく今後の主流となるでしょう。

CSSグリッドでは二次元的にレイアウトが可能

CSSグリッドレイアウトが本当に素晴らしいと思うのは、二次元的にレイアウトができるということです。二次元的というのは、縦と横のマス目のレイアウトが標準に備わっているということを意味しています。

ウェブ制作は基本的に単純なレイアウトしかできません。ブロック単位でコンテンツをつくり、それを横並びに割り振るというのが一般的です。それに対しCSSグリッドでは「横はここからここまでの範囲で」「縦はここからここまでの範囲で」という、感覚的なレイアウトが可能になります。

この感覚的なレイアウトというのが、従来のコンテナの考えとは比べ物にならないほど自由度の高い配置が可能です。当然レスポンシブデザインの実装も簡単にできてしまいます。

文書構造だけのきれいなコードになる

CSSグリッドではレイアウト用のdiv要素も、レイアウトを意識してHTML構造を変える必要もありません。

私がBootstrapでレイアウトを組もうとすると、コンテナが多重の階層になり、管理しきれなくなるということが度々ありました。container、row、columnと、三段階のdivタグを含むため、閉じタグも大量に発生します。自分がどの閉じタグを書いたのかしっかり把握しきらないといけませんでした。また少しレイアウトを変えたいと思っても、HTMLの構造自体を変更しないといけませんでした。

レイアウト用に無駄にdivを書き続けたり、レイアウトを意識しすぎて本来のHTMLの文書構造からかけ離れたものになると、保守性が低下してしまいます。CSSグリッドではHTMLは文書構造を、CSSは装飾を行うという、本来の役割のみに切り分けることができ、無駄なコードを書く必要がなくなります。

CSSグリッドを学ぶ方法

CSSグリッドを学ぶには、主に二通りの方法があります。

  • ウェブサイトで情報収集する。
  • 解説している本で学ぶ。

前述のとおりCSSグリッドは新しい方式であるため、解説している人も少ないです。

ウェブサイトで情報収集する

CSSグリッドを解説しているページを紹介します。

CSS Grid Layout を極める!(基礎編)

とりあえずどんなものか知りたいという方であれば、上記のページがおすすめです。縦と横に自由に配置できるというのが、なんとなく理解できると思います。

グリッドの良いところはブラウザ上で、「このへんに表示したい」という感覚を自在に表現できるようになるところですね。

ただFlexboxと比べたときに、どのような魅力があるのか、実際にどんなウェブサイトが作れるようになるのかが、いまひとつわからないような気はします。

CSSグリッドを解説している本で学ぶ

私はCSSグリッドについて解説している本で学びました。

この本は中級者以上向けです。ウェブ制作についての基礎知識がある程度ないと内容理解は厳しいです。

一般的なウェブ制作の本とは異なり、CSSグリッドレイアウトのみについて解説している本です。この本のよかったところを紹介します。

  • CSSグリッドレイアウトのみに特化していて、グリッドレイアウトの解説が充実。
  • すでに知っているウェブ制作の知識はショートカットできる。
  • サンプルが美しい。こういうのが作りたかったと思える。

私の場合は一般的なウェブ制作をするための知識はすでに持っていましたが、複雑なレイアウトが組めない、自信がないという状況でした。

もう少しステップアップしたいと感じた時にこの本に出会い、表紙の作例を見て「こんなページが作れるようになりたい」「伸び悩んでいる、自信がない自分にとって最高の本だ」と思って即買いしました。

特にウェブ制作の中級者以上の人に注意してほしいのが、序章なども読み飛ばさずに読むということです。CSSグリッドは段階的に理解しないと、結構難しいです。私自身それなりにウェブ制作の知識があったため、購入後すぐに簡単なところをショートカットしようとしましたが、結局よくわからず一度挫折しました。私の失敗パターンを紹介しておきます。

  1. 序章などコラム的な部分を読み飛ばす。
  2. いきなり本題である実装部分を読む。
  3. 結局わからない。

いくらこれまで勉強を続けてきたからといって、新しいことを学ぶわけですから、素直に序章もしっかり読むことをおすすめします。なぜCSSグリッドが優位であるのか、どういう仕組みなのかをしっかり理解することができます。

最近になって真剣に、はじめから読むとすごく良く理解できました。この本では作例として4つのレイアウトが紹介されています。どれも魅力的な作例ではありますが、徐々に作例が複雑化していくため、CSSグリッドに対する理解を深めることができます。

まとめ

CSSグリッドは新しい方式ではありますが、これからのブラウザに必ず普及していきます。私はflexboxを学習しようかと思っていましたが、CSSグリッドだけでいいなと思うくらい、CSSグリッドにはすばらしい自由度があり、心地よいコーディングができるようになります。

何より自分に対する自信につながります。美しいコーディングを見ては、自分はコーディングが下手だと思い続けていましたが、自分にもできるかもしれないと思うきっかけにもなるでしょう。まだ学習中ではありますが、これからサンプルサイトを作るのが楽しみです。