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

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

## CHAPTER 1 雑誌風レイアウト 縦横に均等に分割したグリッドで作成

- 完成ページ
- IE11対応版

- 1-4
- 1-6
- 1-7
- 1-8
- 1-9
- 1-10
- 1-11
- 1-12
- 1-13
- 1-14

※参考（P.032）：
CSSグリッドなしでHTMLの構造や文書構造を意識して作成したページ

## CHAPTER 2 フライヤー風レイアウト 複数のグリッドを組み合わせて作成

- 完成ページ
- IE11対応版

- 2-4
- 2-5
- 2-6
- 2-7
- 2-8
- 2-9
- 2-10
- 2-11
- 2-12
- 2-13
- 2-14
- 2-15
- 2-16

## CHAPTER 3 画像をメインにしたレイアウト

### 3A 画像にテキストを重ねたレイアウト 12分割の列のグリッドで作成

- 完成ページ
- IE11対応版

- 3A-2
- 3A-3
- 3A-4
- 3A-5

### 3B 画像にテキストの一部を重ねたレイアウト 固定＋可変な列を組み合わせたグリッドで作成

- 完成ページ
- IE11対応版

- 3B-2
- 3B-3
- 3B-4
- 3B-5
- 3B-6

### 3C 左右対称なレイアウト 2分割のシンプルなグリッドで作成

- 完成ページ
- IE11対応版

- 3C-2
- 3C-3
- 3C-4
- 3C-5

### 3D 非対称なレイアウト ２：１のシンプルなグリッドで作成

- 完成ページ
- IE11対応版

- 3D-2
- 3D-3
- 3D-4
- 3D-5

## CHAPTER 4 ナビゲーション グリッドでページの枠組みを作成

- 完成ページ
- IE11対応版
- 完成ページ
  Chapter 1のコンテンツを配置したもの
- IE11対応版
- 完成ページ
  Chapter 3Bのコンテンツを配置したもの
- IE11対応版

- 4-3
- 4-4
- 4-5
- 4-6

© エビスコム / マイナビ出版