CSS レスポンシブ メディアクエリ

かつて、ウェブデザインは「PC の画面」だけを気にしていれば良いシンプルなものでした。しかし、現代ではスマートフォンから超大型モニター、はたまた冷蔵庫のディスプレイまで、多種多様な画面サイズが存在します。これらすべてに一つのコードで対応するための鍵が、**メディアクエリ（Media Queries）**です。

1. メディアクエリの基本構文

メディアクエリを使用すると、「もし画面の幅が 〇〇px 以下（以上）なら、このスタイルを適用する」といった条件分岐が可能になります。

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

上記の例では、ブラウザの幅が 600px 以下になった瞬間に、背景色がライトブルーに変わります。

2. 一般的なブレイクポイント

特定のデバイス（iPhone 15 や iPad Pro など）に合わせてスタイルを書くのは賢明ではありません。デバイスは次々と新しいサイズが登場するからです。代わりに、コンテンツが崩れるタイミング（ブレイクポイント）に合わせて設計するのが標準的です。

3. 実践的なレスポンシブのテクニック

3.1 要素の非表示（Hiding Elements）

画面が小さい時に、あまり重要でない要素を非表示にしてスッキリさせるのは RWD の常石です。

@media only screen and (max-width: 600px) {
  div.example {
    display: none;
  }
}

3.2 フォントサイズの変更

モバイルで見るときに文字が大きすぎたり、逆に小さすぎたりする場合もメディアクエリで調整します。

/* デスクトップでは大きな文字 */
h1 { font-size: 64px; }

/* 画面が600px以下なら文字を小さくする */
@media only screen and (max-width: 600px) {
  h1 { font-size: 30px; }
}

4. 画面の向き（Orientation）

モバイル端末ならではの機能として、端末を「縦に持っているか（Portrait）」「横に持っているか（Landscape）」を判別してスタイルを変えることができます。

/* 端末が横向きの場合にのみ適用 */
@media only screen and (orientation: landscape) {
  body {
    background-color: lightgreen;
  }
}

5. モバイルファーストのアプローチ

現代のウェブ開発では、まず「モバイル向けのスタイル」を書き、後からメディアクエリで「大きな画面向けのスタイル」を付け足していくモバイルファースト（Mobile First）という手法が推奨されています。これにより、モバイル端末での読み込み速度やパフォーマンスが向上します。

/* デフォルト（モバイル）のスタイル */
.column { width: 100%; }

/* 画面が大きくなったら横並びにする */
@media only screen and (min-width: 768px) {
  .column { width: 50%; float: left; }
}

メディアクエリを使いこなせば、一つの HTML でどんなデバイスにもフィットする「おもてなし」の効いたサイトが作れます。