第2章：見た目を整える技術

Week 4

箱の考え方（要素の大きさや余白）

学習時間目安：週3-4時間

📦ボックスモデルを理解しよう

Webページの要素は商品の梱包のような構造になっています。

content（内容）：実際の商品
padding（パディング）：商品を守る緩衝材
border（ボーダー）：梱包箱の壁
margin（マージン）：箱と箱の間の空間

🔧box-sizingで計算を楽にしよう

/* すべての要素に適用する現代的な方法 */
* {
    box-sizing: border-box;
}

.easy-box {
    width: 200px; /* この通りの大きさになる */
    padding: 20px;
    border: 5px solid black;
}
                    

💡 比喩で理解：商品の梱包

Webページの要素は、Amazonの商品梱包のような構造です。content（商品）、padding（緩衝材）、border（箱）、margin（箱と箱の間の空間）の概念を理解しましょう。

💪実習プロジェクト：美しいカードコンポーネント

.card {
    width: 300px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    background-color: white;
    transition: transform 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
}
                    

Week 5

画面の大きさに合わせて表示を変える方法

学習時間目安：週3-4時間

📱レスポンシブデザインとは？

どんなサイズの画面でも美しく表示される「魔法の洋服」のようなWebサイトです。

スマートフォン対応
タブレット対応
デスクトップ対応
自動サイズ調整

📐メディアクエリ（画面サイズ別の設定）

/* タブレット用（画面幅が768px以下） */
@media (max-width: 768px) {
    .container {
        flex-direction: column;
        padding: 15px;
    }
}

/* スマホ用（画面幅が480px以下） */
@media (max-width: 480px) {
    h1 {
        font-size: 1.5rem;
    }
}
                    

🎯 モバイルファーストアプローチ

小さい画面から大きい画面へと段階的にスタイルを追加していく方法が現在の主流です。より効率的で保守しやすいコードが書けます。

Week 6

文字の見た目を整える

学習時間目安：週3-4時間

🔤フォントファミリー（字体の指定）

日本語フォントの設定
英数字フォントの設定
現代的なシステムフォント
フォールバック設定

📏読みやすい文字設定

.readable-text {
    font-size: 16px;
    line-height: 1.6; /* フォントサイズの1.6倍の行間 */
    letter-spacing: 0.03em; /* わずかに文字間を広げる */
    max-width: 70ch; /* 読みやすい文字数で改行 */
    color: #333;
}
                    

📚 比喩で理解：本や雑誌のレイアウト

読みやすい文字設定は、良い本や雑誌を作るのと同じです。適切な文字サイズ、行間、文字間隔が読みやすさを大きく左右します。

💡CSS変数でタイポグラフィシステムを構築

:root {
    /* フォントサイズ */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    
    /* 行間 */
    --leading-tight: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
}
                    

Week 7

要素を並べる方法（Flexbox）

学習時間目安：週3-4時間

🧩Flexboxとは？

要素を柔軟に並べるための仕組み。「伸縮する棚」のように、画面サイズに合わせて要素が自動調整されます。

display: flex でコンテナを作成
justify-content で横方向の配置
align-items で縦方向の配置
flex で要素の伸縮を制御

🎯Flexboxの便利なプロパティ

.flex-container {
    display: flex;
    
    /* 横方向の配置 */
    justify-content: center; /* 中央揃え */
    justify-content: space-between; /* 両端揃え */
    
    /* 縦方向の配置 */
    align-items: center; /* 中央揃え */
    
    gap: 20px; /* アイテム間の間隔 */
}
                    

🏗️ 実用的なFlexboxパターン

ナビゲーションバー、カードレイアウト、完全中央揃え、ヘッダー・メイン・フッターレイアウトなど、実際のWebサイトで頻繁に使われるパターンを学習します。

💪実習プロジェクト：レスポンシブカードグリッド

.product-grid {
    display: flex;
    flex-wrap: wrap; /* 画面幅が足りない時は折り返す */
    gap: 2rem;
    justify-content: center;
}

.product-card {
    flex: 1 1 300px; /* 拡大可能、縮小可能、最小幅300px */
    max-width: 350px;
    transition: transform 0.3s ease;
}
                    

見た目を整える技術

箱の考え方（要素の大きさや余白）

📦ボックスモデルを理解しよう

🔧box-sizingで計算を楽にしよう

💡 比喩で理解：商品の梱包

💪実習プロジェクト：美しいカードコンポーネント

画面の大きさに合わせて表示を変える方法

📱レスポンシブデザインとは？

📐メディアクエリ（画面サイズ別の設定）

🎯 モバイルファーストアプローチ

文字の見た目を整える

🔤フォントファミリー（字体の指定）

📏読みやすい文字設定

📚 比喩で理解：本や雑誌のレイアウト

💡CSS変数でタイポグラフィシステムを構築

要素を並べる方法（Flexbox）

🧩Flexboxとは？

🎯Flexboxの便利なプロパティ

🏗️ 実用的なFlexboxパターン

💪実習プロジェクト：レスポンシブカードグリッド

✅ 第2章総合理解度チェック

第2章を完了しました！🎉

見た目を整える技術

箱の考え方（要素の大きさや余白）

📦ボックスモデルを理解しよう

🔧box-sizingで計算を楽にしよう

💡 比喩で理解：商品の梱包

💪実習プロジェクト：美しいカードコンポーネント

画面の大きさに合わせて表示を変える方法

📱レスポンシブデザインとは？

📐メディアクエリ（画面サイズ別の設定）

🎯 モバイルファーストアプローチ

文字の見た目を整える

🔤フォントファミリー（字体の指定）

📏読みやすい文字設定

📚 比喩で理解：本や雑誌のレイアウト

💡CSS変数でタイポグラフィシステムを構築

要素を並べる方法（Flexbox）

🧩Flexboxとは？

🎯Flexboxの便利なプロパティ

🏗️ 実用的なFlexboxパターン

💪実習プロジェクト：レスポンシブカードグリッド

✅ 第2章 総合理解度チェック

第2章を完了しました！🎉

✅ 第2章総合理解度チェック