試験公開中

このエントリーをはてなブックマークに追加

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

マイナビ出版

3,278円 (2,980円+税)

本書は「CSSグリッドで実現できることは何なのか」をテーマにした一冊です。CSSグリッドによるWebデザインを、作成制作を通して解説していきます。

関連サイト

本書の関連ページが用意されています。

内容紹介

HTML&CSSで実現する、柔軟でレスポンシブなWebデザイン

本書は「CSSグリッドで実現できることは何なのか」をテーマにした一冊です。

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

本書ではCSSグリッドによるWebデザインを、作成制作を通して解説していきます。次のようなステップで、デザインを組み立てていきます。

 1 作例ごとに、レイアウトソフトを利用して完成見本(デザインカンプ)を用意
 2 完成見本からパーツを抽出し、HTMLと文書構造を組み立て
 3 CSSグリッドを作成し、パーツを配置
 4 レスポンシブの設定を行い、デザインを仕上げる

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

用意された作例は以下になります。

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

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

書誌情報

  • 著者: エビスコム
  • 発行日: (紙書籍版発行日: 2018-06-15)
  • 最終更新日: 2018-06-15
  • バージョン: 1.0.0
  • ページ数: ページ(PDF版換算)
  • 対応フォーマット: PDF
  • 出版社: マイナビ出版

対象読者

著者について

エビスコム

さまざまなメディアにおける企画制作を世界各地のネットワークを駆使して展開。コンピュータ、インターネット関係では書籍、CD-ROM、デジタル映像、CG、ソフトウェアの企画制作、WWWシステムの構築などを行う。
主な編著書: 『HTML5&CSS3デザイン 現場の新標準ガイド』マイナビ出版刊『6ステップでマスターする 「最新標準」HTML+CSSデザイン』同上『これからの「標準」を学ぶ マルチデバイス対応サイト構築』同上『これからの「標準」を身につける HTML+CSSデザインレシピ』同上『HTML5 スタンダード・デザインガイド』同上『CSS3 スタンダード・デザインガイド【改訂第2版】』同上『XHTML/HTML+CSS スーパーレシピブック』同上『WordPress3 サイト構築スタイルブック』同上『WordPress3 デザイン&カスタマイズ スタイルブック』同上『Movable Type サイトデザイン&レシピ事典』同上『Dreamweaverデザインブック CC2015対応』ソシム刊『WordPress デザインブック HTML5&CSS3準拠』同上『HTML5&CSS3 デザインブック』ソシム刊『WordPress レッスンブック HTML5&CSS3準拠』同上『WordPress ステップアップブック』同上『HTML5&CSS3 レッスンブック』同上

目次

Introduction Webデザイン

  • 0-1 Web デザインで考えないといけないこと
  • 0-2 Web デザインの3要素の相互関係

Chapter1 雑誌風レイアウト

  • 1-1 完成見本のデザイン
  • 1-2 完成見本の分析
  • 1-3 完成見本をCSS グリッドなしで作成する場合の問題点
  • 1-4 完成見本をCSS グリッドで作成するための準備
  • 1-5 CSS グリッドの構成を検討する
  • 1-6 CSS グリッドを作成する
  • 1-7 パーツの配置先を指定する
  • 1-8 パーツのデザインを整える(1) タイトル部分
  • 1-9 パーツのデザインを整える(2) テキスト部分
  • 1-10 パーツのデザインを整える(3) 画像部分
  • 1-11 パーツのデザインを整える(4) SNS メニュー
  • 1-12 パーツのデザインを整える(5) キャッチコピーの引用符
  • 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 グリッド・リファレンス
Home 書籍一覧 CSSグリッドレイアウト デザインブック ▲ ページトップへ戻る