CSS Gridのしっかりとした知識とレイアウトやUIコンポーネントを実装するテクニックを学びたい人にお勧めの解説書 -作って学ぶ HTML+CSSグリッドレイアウト

※本ページは、アフィリエイト広告を利用しています。

CSS Gridをそろそろ真剣に覚えないと、思っている人にぴったりの解説書を紹介します。

Web制作系の解説書で評価が高いエビスコム様の最新刊で、本書もかなり充実した内容となっています。CSS Gridの基礎知識はもちろん、基本のグリッド、さまざまなレイアウトやUIコンポーネントの実装も豊富で、簡潔なコードでかなりしっかりと解説されています。

本書は、先週発売されたばかり！
Web制作に携わる人すべてにお勧めの解説書。HTMLとCSSに携わるコーダーの人はもちろん、こういうレイアウトやコンポーネントができるというのがよく分かるのでデザイナーやディレクターの人にもお勧めです。

Kindle版も3/4に発売されました！

• 作って学ぶ HTML+CSSグリッドレイアウト Kindle版

版元様より許可をいただいたので、紙面のキャプチャを少しだけご紹介。
本当は少しではなく、全ページを紹介したいくらい充実した内容となっています。

本書は全5章で、Webで使用されてきたレイアウトの歴史から、CSS Gridの基礎知識、基本となるグリッド、グリッドの仕組み、さまざまなグリッドレイアウトの実装方法まで非常に充実した内容となっています。

第1章は「Web標準のレイアウトシステム」これまでいろいろな手法が使用されてきましたが、もっとも重要なのは「フローレイアウト」です。この言葉を意識しないで使用している人もいるかもしれませんが、ブロックやインラインは意識しているでしょう。フローレイアウトとは要素の組み合わせや相互関係によって配置が決まるのが大きな特徴です。

そして、CSSではレイアウト用のモジュールとして2009年にFlexbox、2011年にCSS Gridが登場しました。この2つによりフローレイアウトでは不可能だった（ハックを使えば可）レイアウトが実現できるようになりました。本書はFlexboxとCSS Gridで実装するレイアウトの基礎知識と特徴をしっかり学べます。どういう時にどちらを使えばと悩むことはもうなくなります。

第3章は「基本のグリッド」ここからはCSS Gridの実装方法が詳しく解説されています。本書ではサポ－トサイトから完成したHTMLやCSSをダウンロードでき、ベースとなるHTMLやCSSなども揃っています。さらにCSS Gridのチートシートもダウンロードでき、本書で学ぶときだけでなく、これからの実装にも役立ちます。

解説も非常にていねいで分かりやすく、さすがのエビスコム様です。

実際にCSS Gridを使用するときに、解説書と同じレイアウトがあるということは少ないですよね。本書ではカスタマイズやアレンジの方法についても幅広く解説されています。

第4章は、CSS Gridの仕組み。グリッドの行列の生成、アイテムの配置、トラックサイズの確定などがどのようなロジックで処理されているのかが分かります。思っていたように配置されない、という人はこの章は必読です。

ほかにも、ブロック要素やインライン要素のサイズ指定、すべてがautoなときのトラックサイズ、中身がインライン要素のみで構成されている時の高さ、positionを併用したときに配置など、実践的なテクニックが詳しく解説されています。

最後の第5章は「グリッドレイアウトの実践」さまざまなレイアウトやUIコンポーネントをCSS Gridで実装する方法です。

構成されているパーツもかなり豊富で、Webサイトでよく使用されるものが揃っています。これらについてもそれぞれ実装方法が詳しく解説されています。

たとえば、検索フォーム。フォームの入力欄とアイコンの検索ボタンがあり、入力欄とボタンの位置揃え、入力欄のサイズなど、CSS Gridだと美しく実装できます。ほかにもヘッダ、カード、フォームなど、さきほどのすべてが詳しく解説されています。

もちろん、レイアウトの実装も充実しています、パンケーキ、フルブリード、聖杯、ダッシュボード、チャットなど、最近のWebサイトで見かけるものは揃っています。

カスタマイズやアレンジの方法もバリエーション豊かです。フッタを常に最下部にしたい、セクションは全幅で中身はコンテンツ幅にしたい、コンテナクエリでグリッドの幅に応じてカードのサイズを変更したい、など全部CSS Gridでできます。

巻末には、CSS Gridを確認するデベロッパーツールの使い方、コンテナクエリや比較演算子や:has()疑似クラスと組み合わせるCSS Gridの使い方が解説されています。

作って学ぶ HTML+CSSグリッドレイアウトの目次

作って学ぶ HTML+CSSグリッドレイアウトの目次

作って学ぶ HTML+CSSグリッドレイアウトの目次

作って学ぶ HTML+CSSグリッドレイアウトの目次

作って学ぶ HTML+CSSグリッドレイアウトの目次

かなり充実したCSS Gridの解説書だと思います。CSS Gridをこれから始めるときだけでなく、CSS Gridの実装で困ったときにも役立つ一冊なので、常に手元に取れる場所に置いておきたいですね。

献本の御礼

最後に、献本いただいたマイナビ出版の担当者さまに御礼申し上げます。

当サイトでは随時、献本を受け付けています。
お問い合わせは下記よりお願いいたします。

• お問い合わせ｜コリス