HTML5&CSS3 ステップアップブック
SAMPLE
Chapter 1
エリアベースのグリッドレイアウト
1-1
コンテンツを作成する
1-2
グリッドを作成する
1-3
コンテンツの配置を指定する
1-4
グリッドの行列のサイズを指定する
1-5
グリッドを切り替えてレスポンシブにする
1-6
パーツのアレンジ
Chapter 2
ラインベースのグリッドレイアウト
2-1
コンテンツを作成する
2-2
グリッドを作成する
2-3
コンテンツの配置を指定する
2-4
グリッドを切り替えてレスポンシブにする
2-5
バーの中身を記事のラインに揃える
2-6
入れ子のグリッドでメニューを２段組みにする
2-7
パーツのアレンジ
Chapter 3
自由度の高いグリッドレイアウト
3-1
コンテンツを作成する
3-2
グリッドを作成する
3-3
コンテンツの配置を指定する
3-4
レスポンシブにする
3-5
ヘッダー画像を画面の横幅いっぱいに表示する
3-6
キャッチコピーを追加する
3-7
ナビゲーションメニューを追加する
3-8
SNSメニューを追加する
3-9
コンテンツの概要を追加する
3-10
ヘッダーとフッターのデザインをアレンジする
Chapter 4
ブロークングリッドレイアウト
4-1
コンテンツを作成する
4-2
<body>のグリッドを作成する
4-3
コンテンツの配置を指定する
4-4
<article>のグリッドを作成する
4-5
記事を構成するパーツの配置を指定する
4-6
記事のレイアウトをレスポンシブにする
4-7
段落や画像を追加する
4-8
画像の配置をアレンジする
4-9
画像を重ねてレイアウトする
4-10
ドロワーメニューを作成する
4-11
ページのデザインをアレンジする
APPENDIX A
基本パーツの設定
ベース（HTML）
ベース（CSS）
サイト名
メニュー
記事
コピーライト
APPENDIX B
グリッドレイアウトに未対応なブラウザへの対策
対応ブラウザと同じレイアウトを再現する
Chapter 1のサンプル
Chapter 2のサンプル
Chapter 3のサンプル
Chapter 4のサンプル
１段組みの形でレイアウトを整える
Chapter 1のサンプル
Chapter 2のサンプル
Chapter 3のサンプル
Chapter 4のサンプル
Copyright © エビスコム ／ ソシム