レスポンシブデザイン — すべての画面に対応

このトピックを修了すると

メディアクエリ、モバイルファースト戦略、およびレスポンシブレイアウトの主要なパターンを理解できるようになります。

1つのコードで、すべての画面に対応

ウェブサイトは、デスクトップ、タブレット、スマートフォンで表示されます。画面サイズは異なります。レスポンシブデザインとは、1つのHTML/CSSで、すべての画面サイズに合わせてレイアウトを変更することです。

ビューポートメタタグ

レスポンシブデザインの最初のステップ：

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

このタグがないと、モバイルブラウザはページをデスクトップサイズでレンダリングし、その後縮小して表示します。文字が非常に小さくなります。

メディアクエリ

/* デフォルトスタイル（モバイル） */
.container {
  display: flex;
  flex-direction: column;
}

/* 768px以上の場合（タブレット） */
@media (min-width: 768px) {
  .container {
    flex-direction: row;
  }
}

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

メディアクエリは、画面サイズに応じて異なるCSSを適用します。min-widthは、「この幅以上の場合」という意味です。

モバイルファースト

上記のコードのように、デフォルトスタイルをモバイル向けに作成し、画面が大きくなるにつれてスタイルを追加する方法をモバイルファーストと呼びます。

逆に、デスクトップから作成し、小さな画面に合わせる方法は「デスクトップファースト」です。モバイルファーストが推奨されます。その理由：

• モバイルユーザーの方が多いため
• 狭い画面に重要な情報だけを配置すると、広い画面で拡張しやすくなります
• 逆に、広い画面の複雑なレイアウトを狭い画面に無理やり詰め込むのは困難です

相対単位の活用

絶対単位（px）よりも相対単位の方がレスポンシブデザインに適しています：

/* 絶対値 — 画面からはみ出る可能性あり */
.box { width: 800px; }

/* 相対値 — 画面に合わせて調整 */
.box { width: 90%; max-width: 800px; }

/* rem — ユーザーのフォントサイズに比例 */
.title { font-size: 2rem; }

画像も、固定サイズではなく：

img {
  max-width: 100%;
  height: auto;
}

コンテナよりも大きい場合は、自動的に縮小され、アスペクト比は維持されます。

一般的なブレークポイント

320px  — 小さなモバイル
375px  — 一般的なモバイル（iPhone）
768px  — タブレット
1024px — 小さなデスクトップ
1280px — デスクトップ

これらの数字にこだわる必要はありません。コンテンツが崩れるポイントでブレークポイントを設定するのが最適です。

重要なポイント

レスポンシブデザインは、メディアクエリを使用して、画面サイズに応じて異なるCSSを適用します。 モバイルファーストで作成し、大きな画面に拡張することが推奨されます。 絶対単位（px）よりも、**相対単位（%、rem）**とmax-widthを組み合わせて使用します。