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

ＨＴＭＬ＆ＣＳＳで実現する、柔軟でレスポンシブなＷｅｂデザイン

マイナビ出版
エビスコム　

• 価格: 3,278円（本体2,980円＋税）
• 発行年月: 2018年06月
• 判型: Ｂ５
• ISBN: 9784839966331

内容情報

[BOOKデータベースより]

ＨＴＭＬ＆ＣＳＳで実現する、柔軟でレスポンシブなＷｅｂデザイン。作例制作を通して、ＣＳＳ　Ｇｒｉｄ　Ｌａｙｏｕｔによる自由で高い表現力を手に入れよう。

ＩＮＴＲＯＤＵＣＴＩＯＮ　Ｗｅｂデザイン
１　雑誌風レイアウト
２　フライヤー風レイアウト
３　画像をメインにしたレイアウト
４　ナビゲーション
ＡＰＰＥＮＤＩＸ　Ａ　ＨＴＭＬ＆ＣＳＳの基本設定
ＡＰＰＥＮＤＩＸ　Ｂ　ブラウザでの表示確認
ＡＰＰＥＮＤＩＸ　Ｃ　ＣＳＳグリッド・リファレンス

[日販商品データベースより]

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

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

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

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

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