このレッスンを読み終えると、次の3つを自信を持ってできるようになります。

• ▸✅ モバイルファーストとデスクトップファーストの選択
• ▸✅ 768/1024/1440 ブレークポイントの意味
• ▸✅ clamp() と vw/vh/rem/em 単位の使い分け

学習目標をチェックリストとして手元に置き、すべてに答えられたらレッスンを閉じてください。

核心を一行で

レスポンシブデザイン (Responsive Design) = 画面サイズに応じて異なるレイアウト・スタイルを適用する手法。モバイル・タブレット・デスクトップを一つのコードで対応。

メディアクエリの基本

.container { width: 100%; padding: 16px; }

/* 768px 以上 (タブレット) */
@media (min-width: 768px) {
    .container { padding: 24px; }
}

/* 1024px 以上 (デスクトップ) */
@media (min-width: 1024px) {
    .container { max-width: 1200px; margin: 0 auto; padding: 32px; }
}

画面幅に応じて異なるスタイルを適用。小さい画面がベースで、大きい画面ではスタイルを上書き追加する方式。

モバイルファースト — モダンスタンダード

/* 1. モバイル基本 (小さい画面) */
.card { display: block; padding: 12px; }

/* 2. タブレット追加 */
@media (min-width: 768px) {
    .card { display: grid; grid-template-columns: 1fr 1fr; }
}

/* 3. デスクトップ追加 */
@media (min-width: 1024px) {
    .card { grid-template-columns: 1fr 1fr 1fr; }
}

なぜモバイルファーストか？

• ▸モバイルトラフィックは60%以上
• ▸小さい画面のほうが制約が多い → そこからスタート
• ▸大きい画面は余裕があるので追加するだけ

ブレークポイント — どこで切り替えるか

これはおおよそのガイド。実際にはコンテンツが崩れる地点をブレークポイントにするのが正解。

viewport メタタグ — 必須の一行

<meta name="viewport" content="width=device-width, initial-scale=1.0">

これがないと、モバイルブラウザがデスクトップ幅と仮定して縮小表示します。レスポンシブデザインが機能しません。すべての HTML ページに必須。

モバイル最適化チェックリスト

1. タッチ領域 ≥ 44 × 44 px — 指のサイズ（Apple ガイドライン）
2. 文字サイズ ≥ 16 px — モバイルでの自動ズーム防止
3. 十分な余白 — 指でタップしやすく
4. 横スクロールなし — overflow-x: hidden
5. テスト — Chrome DevTools のモバイルシミュレーター

コンテナクエリ — 2023+

.card {
    container-type: inline-size;
}

@container (min-width: 400px) {
    .card-title { font-size: 24px; }
}

メディアクエリは画面サイズ基準、コンテナクエリは親要素のサイズ基準。コンポーネント単位のレスポンシブ対応が可能です。すべてのモダンブラウザでサポート済み。

まとめ

• ▸モバイルファースト + min-width で大きい画面にスタイルを追加
• ▸ブレークポイント: 768・1024 が最もよく使われる
• ▸<meta viewport> は必須
• ▸コンテナクエリはコンポーネント単位のレスポンシブ対応を実現

このレッスンの概念を理解すると、AI に具体的に指示できるようになります。漠然とした「直して」ではなく、語彙を持ったリクエスト — それがトークン節約の出発点です。

• ▸「この HTML/CSS に メディアクエリ — モバイル・タブレット・デスクトップ の概念を適用してリファクタリングしてください」
• ▸「メディアクエリ — モバイル・タブレット・デスクトップ に関するアクセシビリティ・SEO を確認してください」
• ▸「Tailwind クラスで同じ結果を作ってください」

なぜこれがトークンを減らすのか

概念を知らないと、AI の回答を受けても「それって何ですか？」と再度聞かなければなりません。その「再質問」がトークンを消費します。概念を一度理解しておけば、会話が一往復で終わります。