📱 この章で学ぶこと
スマートフォン、タブレット、デスクトップなど、あらゆる画面サイズに対応したWebサイトの作り方をマスターします。
📐 画面サイズシミュレーター
下のボタンで異なる画面サイズを体験してみましょう
現在の表示: デスクトップ (1200px以上)
Week 4: ボックスモデル
要素のサイズ計算を完全に理解します
- box-sizing: border-box
- margin, padding, border
- カードコンポーネント制作
Week 5: メディアクエリ
画面サイズに応じたスタイル指定をマスター
- @media クエリの基本
- モバイルファーストの考え方
- レスポンシブ画像
Week 6: タイポグラフィ
美しく読みやすい文字設定を学習
- フォントファミリーの指定
- line-height, letter-spacing
- プロレベルの文字システム
Week 7: Flexbox
現代的なレイアウトシステムをマスター
- justify-content, align-items
- flex-wrap, flex-direction
- 実用的なパターン集
🎯 第2章修了時の目標
あらゆる画面サイズに対応した美しいWebサイトを作れるようになります。
ボックスモデルを完全に理解し、Flexboxで柔軟なレイアウトを実装できます。
← メインページに戻る