そもそもメディアクエリとは
メディアクエリとは、CSSにおける「条件分岐」のような仕組みで、ユーザーの閲覧環境に応じてスタイルを切り替えるための機能です。
たとえば、画面の幅が一定以上のときだけ特定のレイアウトを適用したり、印刷時用のスタイルを用意したりといったレスポンシブ対応が可能になります。
近年ではPCだけでなく、スマートフォンやタブレットなど多様なデバイスからアクセスされることが前提となっており、モバイル対応を考慮したサイト設計は欠かせません。
その中核を担うのがメディアクエリなのです。

メディアタイプとメディア特性
メディアクエリでは、「メディアタイプ」と「メディア特性」の組み合わせによってスタイルを切り替えます。
代表的なメディアタイプには以下のようなものがあります。

`screen`：画面表示用（一般的なWebサイトはこれ）
`print`：印刷用
`all`：すべてのメディアタイプに適用
一方、メディア特性は画面の状態に応じて条件を指定するもので、以下がよく使われます。
`width` / `height`：表示領域の幅・高さ
`orientation`：縦向きか横向きか（portrait / landscape）
`resolution`：画面の解像度（dpi単位）

これらを適切に組み合わせることで、レスポンシブなモバイル対応が柔軟に実現できるようになります。

モバイルファーストとは？
モバイルファーストとは、スマートフォンのような小さい画面サイズを前提にデザインを始め、画面が広がるに連れてスタイルを拡張していくレスポンシブ設計の考え方です。
従来はPC向けにデザインしたあとにモバイル対応を後付けするケースが多く見られましたが、今や多くのユーザーがモバイルからアクセスする時代。
まずは最も制約の多い画面サイズに対応させることで、読み込み速度やパフォーマンス最適化の面でも大きなメリットがあります。
メディアクエリの基本構文
モバイルファースト設計では、基本のCSSをスマホ向けに記述し、より広い画面（タブレットやPC）に対して段階的にスタイルを上書きしていきます。
その際に使われるのが、以下のような**メディアクエリ**です。

```css
@media (min-width: 768px) {
/* タブレット以上のスタイル */
}
```

この例では、画面の幅が768px以上のデバイスにだけ、特定のスタイルが適用されます。
`min-width`は「以上」の条件を指定するもので、モバイルファーストにおいてよく使われます。
一方、`max-width`は「以下」を意味し、PCファーストの設計でよく使われます。
また、条件を組み合わせる場合は以下のようなキーワードも使えます。
`and`：複数条件の組み合わせ（例：`@media screen and (min-width: 1024px)`）
`only`：そのメディアタイプに限定（主に古いブラウザ対策）
`not`：条件の否定（例：`@media not screen`）

これらのメディアクエリを活用することで、レスポンシブなモバイル対応を効率よく実現できます。
コーディングの基本を押さえることで、保守性の高いCSS設計が可能になります。

標準的なブレイクポイント例
レスポンシブデザインにおいて、デバイスごとにスタイルを切り替えるための目安となるのがブレイクポイントです。
メディアクエリを使う際には、これらのポイントを基準にスタイルの条件分岐を行います。
以下は一般的によく使われるブレイクポイントの例です。

〜480px：スマートフォン（縦向き）
481〜768px：タブレット（縦・横向き）
769px〜：PC（ノート・デスクトップ）

これらはあくまで目安ですが、モバイル対応の設計において最小限押さえておきたいサイズ帯です。
最近はデバイスの多様化により、さらに細かいブレイクポイントを設けるケースもあります。
使い方のコツ メディアクエリでは`px`指定が主流ですが、`em`や`rem`を使うことでより柔軟な設計が可能になります。
たとえばユーザーがブラウザでフォントサイズを変更している場合にも対応できるため、アクセシビリティの観点からも有効です。

```css
@media (min-width: 48em) {
/* タブレット以上のスタイル */
}
```

また、ブレイクポイントは「どのサイズでどのようにレイアウトが崩れるか」に応じてプロジェクトごとに最適化することが重要です。
既成の数値をそのまま使うのではなく、自身が作成しているサイトやUIに最適なサイズ感を見極めることが、実用的なレスポンシブデザインへの第一歩となります。

モバイル対応を意識した設計では、まず最も狭い幅に対応し、その後デバイスの広がりに応じてレイアウトやコンテンツの配置を調整していくアプローチが効果的です。
適切なブレイクポイントの設定は、快適なユーザー体験を支える基盤となります。
レスポンシブなWebデザインを実現する上で、メディアクエリは欠かせないテクニックです。
特にモバイル対応を重視する現在では、モバイルファーストの設計思想を取り入れ、段階的にスタイルを拡張していくことが重要です。
標準的なブレイクポイントを理解し、プロジェクトごとに最適な条件を設定することで、あらゆるデバイスに対応した快適なレイアウトが可能になります。
構文や使い方のコツを押さえれば、保守性の高いCSS設計が実現できます。
まずは小さな画面から丁寧に対応し、ユーザーに優しいサイト作りを目指しましょう。