CSSグリッドレイアウトデザインブック [単行本]
    • CSSグリッドレイアウトデザインブック [単行本]

    • ¥3,27899ポイント(3%還元)
    • 在庫あり2020年2月22日土曜日16:00までヨドバシエクストリームサービス便(無料)がお届け
CSSグリッドレイアウトデザインブック [単行本]
画像にマウスを合わせると上部に表示
数量:
店舗受け取りが可能です
NEWマルチメディアAkibaマルチメディア梅田マルチメディア博多にて24時間営業時間外でもお受け取りいただけるようになりました
100000009002969922

CSSグリッドレイアウトデザインブック [単行本]

価格:¥3,278(税込)
ポイント:99ポイント(3%還元)(¥99相当)
フォーマット:
専用電子書籍リーダアプリ「Doly」が必要です。無料ダウンロード
お届け日:在庫あり今すぐのご注文で、2020年2月22日土曜日16:00までヨドバシエクストリームサービス便(無料)がお届けします。届け先変更]詳しくはこちら
出版社:マイナビ出版
販売開始日:2018/06/16
ご確認事項:返品不可

カテゴリランキング

  • 書籍
  • - 94559位

CSSグリッドレイアウトデザインブック [単行本] の 商品概要

  • 要旨(「BOOK」データベースより)

    HTML&CSSで実現する、柔軟でレスポンシブなWebデザイン。作例制作を通して、CSS Grid Layoutによる自由で高い表現力を手に入れよう。
  • 目次

    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 グリッド・リファレンス
  • 出版社からのコメント

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

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

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

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

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

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

    エビスコム
    さまざまなメディアにおける企画制作を世界各地のネットワークを駆使して展開。コンピュータ、インターネット関係では書籍、CD-ROM、デジタル映像、CG、ソフトウェアの企画制作、WWWシステムの構築などを行う。

CSSグリッドレイアウトデザインブック [単行本] の商品スペック

商品仕様
出版社名:マイナビ出版
著者名:エビスコム(著)
発行年月日:2018/06/22
ISBN-10:4839966338
ISBN-13:9784839966331
判型:B5
対象:専門
発行形態:単行本
内容:電子通信
言語:日本語
ページ数:319ページ
縦:24cm
横:19cm

    マイナビ出版 CSSグリッドレイアウトデザインブック [単行本] に関するレビューとQ&A

    商品に関するご意見やご感想、購入者への質問をお待ちしています!