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

  • 著作者名:エビスコム
    • 書籍:3,218円
    • 電子版:3,218円
  • B5変:320ページ
  • ISBN:978-4-8399-6633-1
  • 発売日:2018年06月15日
  • 備考:中級
  • mixiチェック
  • このエントリーをはてなブックマークに追加

内容紹介

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

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

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

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

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

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

商品を選択する

フォーマット 価格 備考
書籍 3,218
PDF 3,218 ※ご購入後、「マイページ」からファイルをダウンロードしてください。
※ご購入された電子書籍には、購入者情報、および暗号化したコードが埋め込まれております。
※購入者の個人的な利用目的以外での電子書籍の複製を禁じております。無断で複製・掲載および販売を行った場合、法律により罰せられる可能性もございますので、ご遠慮ください。
EPUB 3,218 ※ご購入後、「マイページ」からファイルをダウンロードしてください。
※当商品はリフロー型のEPUBです。EPUBに対応したリーダーを使用してご閲覧ください。
※ご購入された電子書籍には、購入者情報、および暗号化したコードが埋め込まれております。
※購入者の個人的な利用目的以外での電子書籍の複製を禁じております。無断で複製・掲載および販売を行った場合、法律により罰せられる可能性もございますので、ご遠慮ください。
※閲覧方法は「電子書籍フォーマットについて」をご参照ください。

電子書籍フォーマットについて

  

備考

エビスコム
さまざまなメディアにおける企画制作を世界各地のネットワークを駆使して展開。コンピュータ、インターネット関係では書籍、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 グリッド・リファレンス

この商品を買った人はこんな商品も買っています


最近チェックした商品

Tポイント利用手続き

         Tポイント利用手続きに関する同意事項

                                株式会社マイナビ出版

株式会社マイナビ出版が提供するマイナビBOOKSにおいてTポイントご利用続きをされる方は、以下に掲げるお客様の個人情報の取り扱いについてご確認の上、ご同意下さい。

マイナビBOOKSにおいてTポイントサービスをご利用いただいた場合に、当社から、次に掲げる<提供情報>を、<提供目的>のためにカルチュア・コンビニエンス・クラブ株式会社(以下「CCC」といいます)へ提供します。

  <提供目的>:CCCの定める個人情報保護方針及びマイナビBOOKSにおけるT会員規約第4条に定める利用目的で利用するためTポイントサービスを利用するため
  <提供情報>:
   1)お客様が【マイナビBOOKS】の正当な利用者であるという情報
   2)ポイント数・利用日
   3)その他、Tポイントサービスを利用するにあたり必要な情報

  <提供方法>: 電磁的記録媒体の送付またはデータ通信による。ただし、提供するデータについては暗号化を施すものとする。

なお、CCCに提供された、以下の情報の利用については、CCCの定める個人情報保護方針及びT会員規約 に沿って取り扱われます。
上記の情報提供の停止をご希望される場合には、【マイナビBOOKS】におけるTポイント利用手続きの解除を実施していただく必要があります。
Tポイント利用手続きの解除、およびTポイントサービスにおける個人情報に関するお問い合わせ先は、以下のとおりです。
お客様お問い合わせ先:Tサイト(http://qa.tsite.jp/faq/show/22612)

 なお、Tポイント利用手続きの解除が完了しますと、マイナビBOOKSにおけるTポイントサービスをご利用いただけなくなりますので、予めご了承ください。

Tポイント利用手続きを行いますか?