レスポンシブデザイン + padding/margin/border
第06回 • 40枚
ナレーション
第06回 スライド1: レスポンシブデザイン + padding/margin/border
今回のテーマ
「レスポンシブデザインとボックスモデルの実践」
前回の復習（第5回）
レイアウト技法
- Flexbox: 1次元レイアウト
- CSS Grid: 2次元レイアウト
詳細度（Specificity）
- インライン > ID > クラス > 要素
- 計算方法の理解
ボックスモデル基礎
- content / padding / border / margin
- box-sizing: border-box
今回学ぶこと
mindmap
root((第06回講義))
レスポンシブデザイン
メディアクエリ
モバイルファースト
デバイス対応
ボックスモデル
padding
margin
border
box-sizing
前回復習
Flexbox
CSS Grid
詳細度
目標
デバイス対応
余白設計
Part 1: レスポンシブデザイン
メディアクエリとモバイルファースト設計
Part 2: padding/margin/border
ボックスモデルの詳細と実践テクニック
今回の目標
様々なデバイスに対応し、美しい余白設計ができるようになる
1/40