第3章：本格的なレイアウト

Week 8

フレックスボックスを極める

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

🔧実用的なFlexboxパターン

ヘッダーナビゲーション
サイドバーレイアウト
カードグリッドレイアウト
フッターレイアウト
完全中央揃えレイアウト

🎯ヘッダーナビゲーション

.header {
    background-color: #ffffff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 70px;
}
                    

💡 比喩で理解：伸縮する棚システム

Flexboxは伸縮する棚のようなもの。画面サイズに合わせて要素が自動調整される便利なシステムです。この章では実際のWebサイトで使われる実用的なパターンを学習します。

📦カードグリッドレイアウトの実装

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

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

Week 9

グリッドレイアウト（格子状に並べる）

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

🎯CSS Gridとは？

碁盤や将棋盤のように、縦と横の線で区切られた格子状の領域に要素を配置する仕組みです。

2次元レイアウトシステム
行と列を自由に操作
複雑なレイアウトが簡単
レスポンシブ対応

🏗️CSS Gridの基本

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3列を繰り返し */
    gap: 20px;
}

/* レスポンシブなグリッド */
.auto-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
                    

🎨 グリッドの魔法：名前付きエリア

grid-template-areasを使うと、「header」「sidebar」「main」「footer」のように名前を付けてレイアウトできます。直感的で保守しやすいコードが書けます。

🖼️ギャラリーレイアウトのデモ

Large (2x2)

Normal

Tall

Normal

.photo-item.large {
    grid-column: span 2; /* 2列分を使用 */
    grid-row: span 2; /* 2行分を使用 */
}

.photo-item.tall {
    grid-row: span 2; /* 2行分を使用 */
}
                    

Week 10

ナビゲーションとメニューの作り方

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

🧭基本的なナビゲーション

横並びナビゲーション
アクティブ状態の表示
ホバーエフェクト
スティッキーヘッダー
アンダーラインアニメーション

📱ハンバーガーメニュー

.nav-toggle {
    display: none; /* デスクトップでは非表示 */
    flex-direction: column;
    justify-content: space-around;
}

/* モバイル対応 */
@media (max-width: 768px) {
    .nav-toggle {
        display: flex;
    }
}
                    

🎯 ドロップダウンメニューの実装

マルチレベルナビゲーションを作成する際は、アクセシビリティも考慮しましょう。キーボード操作やスクリーンリーダーにも対応できます。

⚡アニメーション付きナビゲーション

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: #007bff;
    transition: width 0.3s ease;
}

.nav-link:hover::after {
    width: 100%;
}
                    

Week 11

フォーム（お問い合わせページ）の作り方

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

📝基本的なフォーム要素

input要素（text, email, tel）
textarea（メッセージ）
select（選択肢）
radio button（選択肢）
checkbox（チェック項目）

🎨美しいフォームスタイリング

input[type="text"]:focus {
    outline: none;
    border-color: #007bff;
    background-color: white;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

/* カスタムチェックボックス */
.checkbox-custom {
    border: 2px solid #ddd;
    border-radius: 4px;
    transition: all 0.3s ease;
}
                    

🛡️ フォームバリデーション

リアルタイムバリデーションとエラーメッセージの表示で、ユーザビリティを向上させます。JavaScriptを使った高度なバリデーション機能も実装します。

💪完全なお問い合わせフォーム

.contact-form {
    background-color: white;
    padding: 3rem;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* エラー状態 */
.form-group.error input {
    border-color: #e74c3c;
    box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.1);
}
                    

本格的なレイアウト

フレックスボックスを極める

🔧実用的なFlexboxパターン

🎯ヘッダーナビゲーション

💡 比喩で理解：伸縮する棚システム

📦カードグリッドレイアウトの実装

グリッドレイアウト（格子状に並べる）

🎯CSS Gridとは？

🏗️CSS Gridの基本

🎨 グリッドの魔法：名前付きエリア

🖼️ギャラリーレイアウトのデモ

ナビゲーションとメニューの作り方

🧭基本的なナビゲーション

📱ハンバーガーメニュー

🎯 ドロップダウンメニューの実装

⚡アニメーション付きナビゲーション

フォーム（お問い合わせページ）の作り方

📝基本的なフォーム要素

🎨美しいフォームスタイリング

🛡️ フォームバリデーション

💪完全なお問い合わせフォーム

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

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

本格的なレイアウト

フレックスボックスを極める

🔧実用的なFlexboxパターン

🎯ヘッダーナビゲーション

💡 比喩で理解：伸縮する棚システム

📦カードグリッドレイアウトの実装

グリッドレイアウト（格子状に並べる）

🎯CSS Gridとは？

🏗️CSS Gridの基本

🎨 グリッドの魔法：名前付きエリア

🖼️ギャラリーレイアウトのデモ

ナビゲーションとメニューの作り方

🧭基本的なナビゲーション

📱ハンバーガーメニュー

🎯 ドロップダウンメニューの実装

⚡アニメーション付きナビゲーション

フォーム（お問い合わせページ）の作り方

📝基本的なフォーム要素

🎨美しいフォームスタイリング

🛡️ フォームバリデーション

💪完全なお問い合わせフォーム

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

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

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