出版社内容情報
HTML&CSSで実現する、柔軟でレスポンシブなWebデザイン本書は「CSSグリッドで実現できることは何なのか」をテーマにした一冊です。
これまでのHTMLとCSSを使ったWeb制作では、思ったようなデザインを実現するために「コンテンツをどういう順に記述するか」「どうマークアップするか」「どのCSSのレイアウトテクニックを利用するか」をパズルのように取捨選択し、形にしていくスキルが必要でした。
それを解決する方法として注目を浴びているのが、CSSグリッドを使ったレイアウトです。
本書ではCSSグリッドによるWebデザインを、作成制作を通して解説していきます。次のようなステップで、デザインを組み立てていきます。
1 作例ごとに、レイアウトソフトを利用して完成見本（デザインカンプ）を用意
2 完成見本からパーツを抽出し、HTMLと文書構造を組み立て
3 CSSグリッドを作成し、パーツを配置
4 レスポンシブの設定を行い、デザインを仕上げる
作例はそれぞれ、PC、タブレット、スマートフォンで問題なく表示されるように仕上げていきます。
用意された作例は以下になります。
・縦横に均等に分割したグリッドによる「雑誌風レイアウト」
・複数のグリッドを組み合わせて作る「フライヤー風レイアウト」
・画像とテキストの重ね合わせによる「画像メインのレイアウト」
・「左右対称/非対称のレイアウト」
・上部や左部にナビゲーションを配置
巻末には「CSSグリッド」リファレンスも付属。
本書を通して、CSSグリッドがWebデザインにもたらす表現力と自由さを体験してください。
Introduction Webデザイン
0-1 Web デザインで考えないといけないこと
0-2 Web デザインの３要素の相互関係
Chapter1 雑誌風レイアウト
1-1 完成見本のデザイン
1-2 完成見本の分析
1-3 完成見本をCSS グリッドなしで作成する場合の問題点
1-4 完成見本をCSS グリッドで作成するための準備
1-5 CSS グリッドの構成を検討する
1-6 CSS グリッドを作成する
1-7 パーツの配置先を指定する
1-8 パーツのデザインを整える（１） タイトル部分
1-9 パーツのデザインを整える（２） テキスト部分
1-10 パーツのデザインを整える（３） 画像部分
1-11 パーツのデザインを整える（４） SNS メニュー
1-12 パーツのデザインを整える（５） キャッチコピーの引用符
1-13 大きい画面でのデザインを整える
1-14 小さい画面でのデザインを整える
Chapter2 フライヤー風レイアウト
2-1 完成見本のデザイン
2-2 完成見本の分析
2-3 完成見本をCSS グリッドなしで作成する場合の問題点
2-4 完成見本をCSS グリッドで作成するための準備
2-5 CSS グリッドを作成する
2-6 パーツの配置先を指定する
2-7 ヘッダーのパーツの配置を整える
2-8 ヘッダーのパーツのデザインを整える
2-9 ヘッダーにパーツを追加する
2-10 セクションのパーツの配置を整える
2-11 セクションの基本的なデザインを整える
2-12 セクションごとに小見出しのデザインを整える
2-13 ショップ情報のデザインを整える
2-14 タブレットサイズの画面でのデザインを仕上げる
2-15 大きい画面でのデザインを整える
2-16 小さい画面でのデザインを整える
Chapter3 画像をメインにしたレイアウト
3-1 完成見本のデザイン
3-2 完成見本をCSS グリッドなしで作成する場合の問題点
3A 画像にテキストを重ねたレイアウト
3A-1 完成見本の分析
3A-2 パーツの設定を記述する
3A-3 CSS グリッドを作成してパーツを配置する
3A-4 パーツのデザインを整える
3A-5 大きい画面と小さい画面でのデザインを整える
3B 画像にテキストの一部を重ねたレイアウト
3B-1 完成見本の分析
3B-2 パーツの設定を記述する
3B-3 CSS グリッドを作成してパーツを配置する
3B-4 パーツのデザインを整える
3B-5 大きい画面でのデザインを整える
3B-6 小さい画面でのデザインを整える
3C 左右対称なレイアウト
3C-1 完成見本の分析
3C-2 パーツの設定を記述する
3C-3 CSS グリッドを作成してパーツを配置する
3C-4 パーツのデザインを整える
3C-5 大きい画面と小さい画面でのデザインを整える
3D 非対称なレイアウト
3D-1 完成見本の分析
3D-2 パーツの設定を記述する
3D-3 CSS グリッドを作成してパーツを配置する
3D-4 パーツのデザインを整える
3D-5 大きい画面と小さい画面でのデザインを整える
Chapter4 ナビゲーション
4-1 完成見本のデザイン
4-2 完成見本の分析
4-3 パーツの設定を記述する
4-4 CSS グリッドを作成してパーツを配置する
4-5 パーツのデザインを整える
4-6 大きい画面でのデザインを整える
4-7 メインコンテンツを配置してみる
Appendix
HTML & CSS の基本設定
ブラウザでの表示確認
CSS グリッド・リファレンス
エビスコム［エビスコム］
著・文・その他
内容説明
ＨＴＭＬ＆ＣＳＳで実現する、柔軟でレスポンシブなＷｅｂデザイン。作例制作を通して、ＣＳＳ Ｇｒｉｄ Ｌａｙｏｕｔによる自由で高い表現力を手に入れよう。
目次
ＩＮＴＲＯＤＵＣＴＩＯＮ Ｗｅｂデザイン
１ 雑誌風レイアウト
２ フライヤー風レイアウト
３ 画像をメインにしたレイアウト
４ ナビゲーション
ＡＰＰＥＮＤＩＸ Ａ ＨＴＭＬ＆ＣＳＳの基本設定
ＡＰＰＥＮＤＩＸ Ｂ ブラウザでの表示確認
ＡＰＰＥＮＤＩＸ Ｃ ＣＳＳグリッド・リファレンス
感想・レビュー
※以下の感想・レビューは、株式会社ドワンゴの提供する「読書メーター」によるものです。
mondo
必殺！パート仕事人
