CSSグリッドレイアウト デザインブック

著者 : エビスコム

• マイナビ出版 (2018年6月15日発売)

作品紹介・あらすじ

本書は「CSSグリッドで実現できることは何なのか」をテーマにした一冊です。
これまでのHTMLとCSSを使ったWeb制作では、思ったようなデザインを実現するために「コンテンツをどういう順に記述するか」「どうマークアップするか」「どのCSSのレイアウトテクニックを利用するか」をパズルのように取捨選択し、形にしていくスキルが必要でした。
それを解決する方法として注目を浴びているのが、CSSグリッドを使ったレイアウトです。

本書ではCSSグリッドによるWebデザインを、作成制作を通して解説していきます。次のようなステップで、デザインを組み立てていきます。
　1　作例ごとに、レイアウトソフトを利用して完成見本（デザインカンプ）を用意
　2　完成見本からパーツを抽出し、HTMLと文書構造を組み立て
　3　CSSグリッドを作成し、パーツを配置
　4　レスポンシブの設定を行い、デザインを仕上げる

作例はそれぞれ、PC、タブレット、スマートフォンで問題なく表示されるように仕上げていきます。

用意された作例は以下になります。
　・縦横に均等に分割したグリッドによる「雑誌風レイアウト」
　・複数のグリッドを組み合わせて作る「フライヤー風レイアウト」
　・画像とテキストの重ね合わせによる「画像メインのレイアウト」
　・「左右対称/非対称のレイアウト」
　・上部や左部にナビゲーションを配置

巻末には「CSSグリッド」リファレンスも付属。
本書を通して、CSSグリッドがWebデザインにもたらす表現力と自由さを体験してください。

感想・レビュー・書評

[Yuta_Leseratteさんの感想 · 2019年6月16日]

手を動かしながらグリッドレイアウトが学べます。
本の内容をなぞるだけで、雑誌やチラシ、パンフレットのような自由度の高い、本格的なレイアウトが作れます。定型的な表現になりがちなランディングページの表現方法も増えるため、このレイアウト技法は会得しておくべきでしょう。

グリッドレイアウトの最大の特徴は<div>をいくつも追加せず、要素の並べ替えなどをしなくても思い通りのレイアウトを作れる点にあります。本書はこうした点についてもしっかり解説されているので、グリッドレイアウトを勉強したいと考えている方にはおすすめです。

ただし、CSSグリッドの理解が必要になるため、従来のレイアウトやフレキシブルボックスレイアウトよりも難易度が高いことは確かです。

本書の巻末にはCSSグリッドに関するリファレンスも掲載されています。実際の制作時にもかなり参考になるので、手元にあると便利な一冊です。

著者プロフィール

エビスコム
さまざまなメディアにおける企画制作を世界各地のネットワークを駆使して展開。コンピュータ、インターネット関係では書籍、デジタル映像、CG、ソフトウェアの企画制作、WWWシステムの構築などを行う。 主な編著書： 『作って学ぶ　Next.js/React　Webサイト構築』マイナビ出版刊『作って学ぶ HTML&CSSモダンコーディング』『HTML5＆CSS3デザイン　現場の新標準ガイド【第２版】』『Webサイト高速化のための 静的サイトジェネレーター活用入門』 『CSSグリッドレイアウト デザインブック』『WordPressレッスンブック 5.x対応版』、ソシム刊『フレキシブルボックスで作るHTML5&CSS3レッスンブック』『CSSグリッドで作るHTML5&CSS3レッスンブック』『HTML&CSS コーディング・プラクティスブック 1～7』、エビスコム電子書籍出版部刊『グーテンベルク時代のWordPressノート テーマの作り方（入門編）』『グーテンベルク時代のWordPressノート テーマの作り方（ランディングページ＆ワンカラムサイト編）』

「2023年 『作って学ぶ　WordPress ブロックテーマ』 で使われていた紹介文から引用しています。」