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

Post on:2024年3月8日

sponsors

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

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

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

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

作って学ぶ HTML+CSSグリッドレイアウト
ISBN 978-4-8399-84960
[Amazonでみる]
[楽天でみる]

著者: エビスコム
出版社: マイナビ出版
発売日: 2024/2/28

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のチートシートもダウンロードでき、本書で学ぶときだけでなく、これからの実装にも役立ちます。