ライトノベル、マンガなど電子書籍を読むならBOOK☆WALKER

はじめてのお客さまへ
電子書籍

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

価格
2980円 2,980 (+税)
獲得コイン
29 コイン

獲得コイン29コインの内訳

通常購入分
29コイン

複数商品の購入で獲得コイン数に変動があります。
クーポンご利用時はキャンペーンコイン付与の対象外です。
詳しくは決済ページにてご確認ください。

注意(購入前に必ずご確認ください。)

  • ・この商品は電子書籍です。(紙の書籍ではありません)
  • ・iOS・Android アプリをご利用される場合は、ご利用の端末にてあらかじめBOOK☆WALKERアプリが動作するか無料書籍などでご確認ください。
  • ・この商品がキャンペーン対象の場合、その内容や期間は予告なく変更する場合があります。
  • 端末の推奨環境もご確認ください。
  • ・このサイトに記述されている日時は、日本標準時(Japan Standard Time)の時間です。配信日時等を確認の際はお気をつけください。
  • ・コインUP表示がある場合、ご購入時に付与されるキャンペーン分のコインは期間限定コインです。

詳しくはこちら

あらすじ・内容
※この商品はタブレットなど大きいディスプレイを備えた端末で読むことに適しています。また、文字だけを拡大することや、文字列のハイライト、検索、辞書の参照、引用などの機能が使用できません。

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

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

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

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

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

巻末には「CSSグリッド」リファレンスも付属。
本書を通して、CSSグリッドがWebデザインにもたらす表現力と自由さを体験してください。
新規会員登録をする(無料)
デジタルで読書を始めよう。

BOOK☆WALKERでデジタルで読書を始めよう。

BOOK☆WALKERではパソコン、スマートフォン、タブレットで電子書籍をお楽しみいただけます。

購入した電子書籍は(無料本でもOK!)いつでもどこでも読める!

「CSSグリッドレイアウト デザインブック」の作品情報

レーベル
出版社
著者
シリーズ
ページ概数
324

一般的なスマートフォンにてBOOK☆WALKERアプリの標準文字サイズで表示したときのページ数です。お使いの機種、表示の文字サイズによりページ数は変化しますので参考値としてご利用ください。

配信開始日
2018/6/29
対応端末
  • PCブラウザ
    ビューア
  • Android
    (スマホ/タブレット)
  • iPhone / iPad
この作品を共有

「CSSグリッドレイアウト デザインブック」シリーズ作品一覧(1冊)

2,980(+税)

CSSグリッドレイアウト デザインブックのシリーズ詳細ページへ

BOOK☆WALKERでデジタルで読書をしてみよう

BOOK☆WALKERではパソコン、スマートフォン、タブレットで気軽にマンガ、ライトノベル、小説などの電子書籍を楽しめます。

購入した書籍はブラウザ、またはアプリで読めます。

  • パソコン
    (Win、Mac)

    ブラウザビューア
    で読書できます。

  • iPhone/iPad版アプリ

    QRコード
    App Storeからダウンロード
  • Android版アプリ

    QRコード
    Google Playで手に入れよう
スマートフォンイメージ画面