第4章

効率化と応用

コードを書きやすくして、さらに高度な技術を学ぼう

4 週間
12-16 時間
4 スキル
Week 12

CSS変数（設定ファイルのような便利機能）

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

🎛️CSS変数とは？

プログラムの「設定ファイル」のようなもの。色やサイズなどの値を一箇所で管理できます。

  • :rootで変数を定義
  • var()で変数を使用
  • 一括変更が可能
  • 保守性が向上
  • テーマシステム構築

🔧CSS変数の基本的な使い方

/* 変数の定義 */ :root { --primary-color: #3498db; --secondary-color: #2ecc71; --border-radius: 8px; --shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } /* 変数の使用 */ .button { background-color: var(--primary-color); border-radius: var(--border-radius); box-shadow: var(--shadow); }

💡 比喩で理解：設定ファイル

CSS変数は、ゲームの設定画面のようなもの。一度設定を変更すれば、ゲーム全体の見た目が変わります。Webサイトでも同じように、変数を変更するだけで全体のデザインを変更できます。

🎨テーマシステムのデモ

ライトテーマ

明るい背景

ダークテーマ

暗い背景

/* ライトテーマ */ :root { --bg-primary: #ffffff; --text-primary: #1f2937; } /* ダークテーマ */ [data-theme="dark"] { --bg-primary: #1f2937; --text-primary: #f9fafb; }
Week 13

自動調整サイズ（clamp関数とcalc関数）

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

📏clamp()関数

最小値、推奨値、最大値を指定して、画面サイズに応じて自動調整されるサイズを作ります。

  • clamp(最小値, 推奨値, 最大値)
  • レスポンシブタイポグラフィ
  • 自動サイズ調整
  • メディアクエリ不要
  • 滑らかなスケーリング

🧮calc()関数

/* calc()で計算 */ .container { width: calc(100% - 40px); height: calc(100vh - 120px); margin: calc(2rem + 10px); } /* clamp()でレスポンシブ */ h1 { font-size: clamp(1.5rem, 5vw, 3rem); } .padding-responsive { padding: clamp(1rem, 3vw, 3rem); }

clamp()デモ

この文字は自動でサイズ調整

ブラウザの幅を変更してみてください

🎯 min(), max()関数

min()は複数の値から最小値を選択、max()は最大値を選択します。clamp()と組み合わせて、より柔軟なレスポンシブデザインを作成できます。

Week 14

アニメーション（動きのあるWebサイト）

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

✨アニメーションの基本

  • transitionアニメーション
  • keyframesアニメーション
  • hover効果
  • 読み込みアニメーション
  • マイクロアニメーション

🎭実用的なアニメーション

/* 基本的なトランジション */ .button { transition: all 0.3s ease; } .button:hover { transform: translateY(-2px); box-shadow: 0 8px 15px rgba(0,0,0,0.2); } /* キーフレームアニメーション */ @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-20px); } }
🎨
⚡
🚀

💫 パフォーマンス最適化

アニメーションはtransform（移動、回転、拡縮）とopacity（透明度）を中心に作ると、最も滑らかで軽量になります。レイアウトを変更するプロパティ（width、heightなど）は避けましょう。

Week 15

総合プロジェクト（ポートフォリオサイト制作）

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

💼ポートフォリオサイトの構成

  • ヒーローセクション
  • 自己紹介・スキル
  • プロジェクト紹介
  • お問い合わせフォーム
  • SNSリンク

🌟応用技術の統合

  • CSS変数でテーマシステム
  • clamp()でレスポンシブタイポグラフィ
  • CSS Gridで複雑なレイアウト
  • 美しいアニメーション
  • ダークモード対応

🚀 実際の公開まで

完成したポートフォリオサイトは、GitHub Pagesやnetlifyで実際に公開します。ドメイン取得、SEO対策、パフォーマンス最適化まで学習して、本当のWebデベロッパーとしてのスキルを身につけます。

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

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

効率化と応用技術をマスターしました。次は実践的なプロジェクトに挑戦しましょう。