レスポンシブデザインの心臓部「メディアクエリ」

レスポンシブデザインを実現する中核技術が、CSSの「メディアクエリ」です。メディアクエリを使うと、「もし画面幅が700px以上なら、このCSSを適用する」といった条件分岐をCSS内に記述できます。

/* 基本のスタイル（スマートフォン向け） */
.container {
  width: 100%;
}

/* 画面幅が700px以上の場合に適用されるスタイル */
@media screen and (min-width: 700px) {
  .container {
    width: 700px; /* PC向けには幅を固定 */
    margin: 0 auto; /* 中央揃え */
  }
}

このように、まずはスマートフォン向けの基本的なスタイルを書き、メディアクエリを使って画面幅が広いデバイス向けのスタイルを「上書き」していくのが一般的です。この考え方を「モバイルファースト」と呼びます。

viewport（ビューポート）設定の重要性

レスポンシブデザインを正しく機能させるには、HTMLの``内に「viewport」を指定するメタタグが必須です。これにより、デバイスの画面幅を基準にしてページを表示するようブラウザに指示します。