最新かつスタンダードな手法のHTML5＆CSS3によるWeb制作をマスターしたい方に最適
本書は、CSSのフレキシブルボックス（Flexbox）を利用してWebページ制作を行うレッスンブックです。
長い間、Webページ制作ではCSSのフロート（Float）が利用され、「ボックスの相互の位置関係でデザインやレイアウトを形にしていく」というノウハウが蓄積されてきました。
フレキシブルボックスはこうしたノウハウをブラウザの互換性や制作手順、考え方も含めて引き継いでいます。
また、フロートで不便だった部分には手が加えられ、いよいよ完成形にたどり着いたと言えるでしょう。
はじめてWebページを作る方にも、今どきのページ制作の基礎を学びなおしたいといった方にも、本書を活用していただければ幸いです。
－「はじめに」より
●P93の「Font Awesome」の挙動について
サービスのバージョンアップに伴って、アカウントの設定が必要になりました。
詳しくは、下記のURLをご参照ください。
Font Awesome 5.9を利用する方法
1-1 記事ページの作成
1-2 HTMLファイルの作成
1-3 HTMLの基本設定
1-4 ブロックとパーツを追加する
2-1 モバイルファーストでレイアウトをはじめる
2-2 ボックスを確認する
2-3 CSSを用意する
2-4 ブロックの背景に色を付ける
2-5 ブロック内に余白を入れる
3-1 フォントの設定を行う
3-2 記事をカード型のデザインにする
3-3 画像を追加する
3-4 アイコンフォントを利用する
4-1 Webフォントを利用する
4-2 リンクを設定する
4-3 ナビゲーションメニューを追加する
4-4 ナビゲーションメニューのリンクを横に並べる
5-1 サブメニューを追加する
5-2 サブメニューをカード型のデザインにする
5-3 プロフィールの見栄えを整える
5-4 注目記事メニューの見栄えを整える
6-1 レスポンシブにする方法
6-2 PC版のレイアウトを設定する準備
6-3 パーツの横幅を調整する
6-4 記事の見栄えを整える
6-5 サイト名とナビゲーションメニューを両端に並べる
6-6 モバイル版とPC版のレイアウトを切り替える
6-7 より大きい画面での見栄えを整える
6-8 テキストの自動拡大機能を無効化する
7-1 トップページの作成
7-2 ブロックとパーツを追加する
7-3 ヒーローイメージの画像を表示する
7-4 ヒーローイメージのテキストの見栄えを整える
7-5 リンクをボタンの形にする
7-6 記事一覧の記事を２列に並べたレイアウトにする
7-7 トップページをレスポンシブにする
8-1 テーブルを作成する
8-2 投稿フォームを作成する
8-3 投稿フォームの見栄えを整える
APPENDIX A IE11対応について
APPENDIX B 文法チェック
APPENDIX C HTML5とCSS3の標準規格
APPENDIX D サイトを公開する
APPENDIX E テキストエディタ
APPENDIX F 画像編集ツール
