レイアウト手法 + 詳細度・ボックスモデル
第05回 • 40枚
ナレーション
第05回 スライド1: レイアウト手法 + 詳細度・ボックスモデル
前回の復習（CSS3入門+擬似要素）
- CSS3の新機能（rgba、グラデーション、丸角）
- 擬似クラス（:hover、:nth-child、:focusなど）
- 擬似要素（::before、::after）
- カスタムプロパティ（CSS変数）
今回のテーマ
mindmap
root((第05回講義))
Part1[レイアウト手法]
Flexbox[Flexbox]
一次元レイアウト
フレックスアイテム
Grid[CSS Grid]
二次元レイアウト
グリッドアイテム
Part2[詳細度]
計算方法
セレクタ優先順位
important宣言
Part3[ボックスモデル]
margin
border
padding
content
box-sizing
Part 1: レイアウト手法
- Flexbox（一次元レイアウト）
- CSS Grid（二次元レイアウト）
Part 2: 詳細度（Specificity）
- 詳細度の計算方法
- セレクタの優先順位
- !important の使い方
Part 3: ボックスモデル
- ボックスモデルの完全理解
- box-sizing の活用
目標
- Flexbox/Gridでレイアウトを作成できる
- CSSの優先順位を理解し、予測可能なスタイルを書ける
- ボックスモデルを正しく使いこなせる
1/40