• Amazonで購入

HMTL5&CSS3ステップアップブック

「CSSグリッド」と「フレキシブルボックス」による
Webデザインがステップ・バイ・ステップでわかる!

著者
エビスコム
定価
3,024円(本体価格 2,800円)
発売日
2018年1月17日
判型/ページ数
B5判変形/320ページ(4C)
ISBN
978-4-8206-1134-3
備考
-

「CSSグリッド」と「フレキシブルボックス」による
Webデザインが
ステップ・バイ・ステップでわかる!
「CSSグリッド」と「フレキシブルボックス」といったHTM5やCSS3の新機能は、
たった1行の指定で要素を横並びにできたり、要素を並べる順番やサイズを
指定できたりなど、Webデザインの実務を省力化する上で非常に魅力的です。

かつて、ブラウザなどによる表示の違いなどから導入をためらうユーザーが
多かったものの、昨今、主要ブラウザが対応したことで、導入のハードルが
下がっています。

本書では、フレキシブルボックスレイアウトやグリッドレイアウトといった、
HTML5&CSS3の新機能をステップ・バイ・ステップで学べる内容になっています。

ジャンル

読者サポート

  • ダウンロード

目次

HMTL5&CSS3 ステップアップブック 目次

Chapter 1 エリアベースのグリッドレイアウト
Chapter 1で作成するサンプル 18
1-1 コンテンツを作成する 20
1-2 グリッドを作成する 30
1-3 コンテンツの配置を指定する 32
1-4 グリッドの行列のサイズを指定する 34
1-5 グリッドを切り替えてレスポンシブにする 36
1-6 パーツのアレンジ 40

Chapter 2 ラインベースのグリッドレイアウト
Chapter 2で作成するサンプル 70
2-1 コンテンツを作成する 72
2-2 グリッドを作成する 86
2-3 コンテンツの配置を指定する 88
2-4 グリッドを切り替えてレスポンシブにする 96
2-5 バーの中身を記事のラインに揃える 102
2-6 入れ子のグリッドでメニューを2段組みにする 108
2-7 パーツのアレンジ 112

CHAPTER 3 自由度の高いグリッドレイアウト
Chapter 3 で作成するサンプル 146
3-1 コンテンツを作成する 148
3-2 グリッドを作成する 154
3-3 コンテンツの配置を指定する 156
3-4 レスポンシブにする 160
3-5 ヘッダー画像を画面の横幅いっぱいに表示する 162
3-6 キャッチコピーを追加する 164
3-7 ナビゲーションメニューを追加する 174
3-8 SNS メニューを追加する 190
3-9 コンテンツの概要を追加する 202
3-10 ヘッダーとフッターのデザインをアレンジする 214

CHAPTER 4 ブロークングリッドレイアウト
Chapter 4 で作成するサンプル 228
4-1 コンテンツを作成する 230
4-2 のグリッドを作成する 234
4-3 コンテンツの配置を指定する 236
4-4

のグリッドを作成する 238
4-5 記事を構成するパーツの配置を指定する 240
4-6 記事のレイアウトをレスポンシブにする 246
4-7 段落や画像を追加する 248
4-8 画像の配置をアレンジする 254
4-9 画像を重ねてレイアウトする 258
4-10 ドロワーメニューを作成する 276
4-10-1 メニューを追加する
4-11 ページのデザインをアレンジする 298

APPENDIX A 基本パーツの設定 306
APPENDIX B グリッドレイアウトに未対応なブラウザへの対策 310

この書籍の購入

  • Amazonで購入する