HTML・CSSを使ってWebページのレイアウトを作る上で、Flexbox・Grid Layoutは重要な技術の1つです。これらの技術を使うことで様々なレイアウトを作れます。ですが、うまく使いこなせなかったり、中途半端な理解でなんとなく使い続けている方もいることでしょう。
そこで、本書ではFlexboxとGrid Layoutの体系的な基礎知識に加え、それらを活用したレイアウトの作成方法を学びます。FlexboxとGrid Layoutに関する理解を深めるだけでなく、実際にレイアウトを作り、使いこなせる状態を目指します。
【目次】
第1章 CSSレイアウト
第2章 Flexboxを理解する
第3章 Grid Layoutを理解する
第4章 さまざまなレイアウトを作る
目次プレビュー
- はじめに
- 第1章 CSSレイアウト
- 第2章 Flexboxを理解する
-
本書で学べること
-
対象読者
-
お問い合わせ
-
表記関係について
-
免責事項
-
1.1 さまざまなレイアウト方法
-
1.2 表レイアウト
-
1.3 段組みレイアウト
-
1.4 フロート
-
1.5 Flexbox
-
1.6 Grid Layout
-
1.7 まとめ
-
2.1 Flexbox
-
2.2 並べる方向・折り返し・表示順・間隔
-
2.3 主軸に対する伸縮・縮小・サイズ
-
2.4 主軸に対する配置
-
2.5 交差軸に対する配置
-
2.6 プロパティの一括指定
-
2.7 まとめ
-
3.1 Grid Layout
-
3.2 Gridトラック
-
3.3 Grid線
-
3.4 セル間隔
-
3.5 インライン軸・ブロック軸
-
3.6 インライン軸に対する配置
-
3.7 ブロック軸に対する配置
-
3.8 プロパティの一括指定
-
3.9 まとめ
-
4.1 ヘッダー
-
4.2 サイドナビ
-
4.3 ヒーロー
-
4.4 特徴紹介
-
4.5 料金プラン
-
4.6 よくある質問
-
4.7 問い合わせフォーム
-
4.8 フッター
-
4.9 モーダル
-
4.10 通知メッセージ
-
4.11 まとめ
