フレキシブルボックスで作る　HTML5&CSS3レッスンブック

本書は、CSSのフレキシブルボックス（Flexbox）を利用してWebページ制作を行うレッスンブックです。

長い間、Webページ制作ではCSSのフロート（Float）が利用され、「ボックスの相互の位置関係でデザインやレイアウトを形にしていく」というノウハウが蓄積されてきました。

フレキシブルボックスはこうしたノウハウをブラウザの互換性や制作手順、考え方も含めて引き継いでいます。
また、フロートで不便だった部分には手が加えられ、いよいよ完成形にたどり着いたと言えるでしょう。

はじめてWebページを作る方にも、今どきのページ制作の基礎を学びなおしたいといった方にも、本書を活用していただければ幸いです。

－「はじめに」より

CHAPTER1　HTMLでマークアップする

1-1　記事ページの作成
1-2　HTMLファイルの作成
1-3　HTMLの基本設定
1-4　ブロックとパーツを追加する

CHAPTER2　CSSでレイアウトをはじめる

2-1　モバイルファーストでレイアウトをはじめる
2-2　ボックスを確認する
2-3　CSSを用意する
2-4　ブロックの背景に色を付ける
2-5　ブロック内に余白を入れる

CHAPTER3　記事の見栄えを整える

3-1　フォントの設定を行う
3-2　記事をカード型のデザインにする
3-3　画像を追加する
3-4　アイコンフォントを利用する

CHAPTER4　ヘッダーとフッターの見栄えを整える

4-1　Webフォントを利用する
4-2　リンクを設定する
4-3　ナビゲーションメニューを追加する
4-4　ナビゲーションメニューのリンクを横に並べる

CHAPTER5　サブメニューの見栄えを整える

5-1　サブメニューを追加する
5-2　サブメニューをカード型のデザインにする
5-3　プロフィールの見栄えを整える
5-4　注目記事メニューの見栄えを整える

CHAPTER6　レスポンシブにする

6-1　レスポンシブにする方法
6-2　PC版のレイアウトを設定する準備
6-3　パーツの横幅を調整する
6-4　記事の見栄えを整える
6-5　サイト名とナビゲーションメニューを両端に並べる
6-6　モバイル版とPC版のレイアウトを切り替える
6-7　より大きい画面での見栄えを整える
6-8　テキストの自動拡大機能を無効化する

CHAPTER7　トップページを作成する

7-1　トップページの作成
7-2　ブロックとパーツを追加する
7-3　ヒーローイメージの画像を表示する
7-4　ヒーローイメージのテキストの見栄えを整える
7-5　リンクをボタンの形にする
7-6　記事一覧の記事を２列に並べたレイアウトにする
7-7　トップページをレスポンシブにする

CHAPTER8　テーブルとフォームを作成する

8-1　テーブルを作成する
8-2　投稿フォームを作成する
8-3　投稿フォームの見栄えを整える

APPENDIX A　IE11対応について
APPENDIX B　文法チェック
APPENDIX C　HTML5とCSS3の標準規格
APPENDIX D　サイトを公開する
APPENDIX E　テキストエディタ
APPENDIX F　画像編集ツール