メディアクエリの種類と用途：レスポンシブWebデザインの基本
本ブログは殆どAIに書かせています。
ハルシネーション(チャットAIなどが、もっともらしい誤情報（＝事実とは異なる内容や、文脈と無関係な内容）を生成すること)にご注意ください。
アフィリエイトリンク(広告)もありますのでご了承ください。
CSSメディアクエリ完全ガイド：柔軟なレスポンシブデザインの実現
現代のWeb制作において、デバイスの画面サイズや操作環境に合わせて表示を最適化する「メディアクエリ」は必須の技術です。基本的な使い方から、最新の書き方、ユーザー環境の検知までを詳しく解説します。
1. 条件を組み合わせる「論理演算子」
複数の条件を繋いだり、特定の条件を除外したりすることで、ターゲットとするデバイスを精密に指定できます。
| 演算子 | 書き方 | 意味と使いどころ |
|---|---|---|
| AND (かつ) | and |
すべての条件を満たす場合。特定の範囲（768px〜1024pxなど）を指定する際に必須です。 |
| OR (または) | , (カンマ) |
いずれかの条件を満たす場合。スマホとタブレットなど、複数の環境をまとめたい時に便利です。 |
| NOT (以外) | not |
条件を否定します。特定のデバイス（例：印刷時など）を除外したい時に使用します。 |
■ 記述例： 画面幅が480px以下、またはデバイスが横向きの場合
@media screen and (max-width: 480px), screen and (orientation: landscape) { ... }
2. 【最新】比較演算子（不等号）による記述
最新のブラウザでは、数学の不等号を使った直感的な書き方が可能です。従来の min-width などの表記よりミスが少なく、可読性が向上します。
| ターゲット | 従来の書き方 | 最新の書き方 |
|---|---|---|
| 480px以下 | (max-width: 480px) |
(width <= 480px) |
| 1024px以上 | (min-width: 1024px) |
(width >= 1024px) |
| 768px〜1024px | (min-width: 768px) and (max-width: 1024px) |
(768px <= width <= 1024px) |
3. ユーザーの操作環境・設定を検知する
画面サイズ以外にも、デバイスの特性やユーザーの好みに合わせた最適化が可能です。
■ (hover: hover) ：マウスホバーの有無
マウス操作ができるPC環境のみを指定します。スマホなどのタッチデバイスでは、タップ時に意図しないホバー演出が残ってしまうことがありますが、これを使えば「PC限定のホバー演出」を確実に実装できます。
@media (hover: hover) {
.button:hover { background: #bd93f9; }
}
■ (prefers-color-scheme: dark) ：ダークモード設定
ユーザーがOSの設定で「ダークモード」を選択している場合にのみ適用されます。目に優しい夜間用の配色を提供できます。
@media (prefers-color-scheme: dark) {
body { background: #1a1a1a; color: #fff; }
}
■ (orientation) ：デバイスの向き
画面が「縦長」か「横長」かを判定します。スマホを横に倒した時（Landscape）にだけ、特別なレイアウトを適用したい場合に有効です。
- portrait：縦長（スマホの通常持ちなど）
- landscape：横長（スマホの横持ちやPCモニタ）
/* スマホ横持ち時のみ特別な余白を設定 */
@media screen and (max-width: 900px) and (orientation: landscape) {
.container { padding: 0 50px; }
}