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

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

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

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

HTML5&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 入れ子のグリッドでメニューを２段組みにする　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 ＜body＞ のグリッドを作成する　234
4-3 コンテンツの配置を指定する　236
4-4 ＜article＞ のグリッドを作成する　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