@media
画面幅に応じた切り替え
画面の幅や向き、ダークモードの設定など、条件に合うときだけCSSを適用します。レスポンシブデザインの基本です。
サンプルコード
実行結果
解説
@media は、指定した条件を満たすときだけ、中に書いたCSSを適用する仕組みです。条件の部分を「メディアクエリ」と呼びます。
メディアクエリは、画面の解像度（幅や高さ）・向き・印刷時など、様々な条件によってスタイルの適用範囲を決められる機能 です。例えば「スマホを縦にしているときは文字を赤に、横にすると青に」「画面の幅が768px以下になったときに要素Aを出す」といったことができます。
昔の CSS（CSS2）では、画面かプリンターかといった 媒体（メディアタイプ） までしか判断できませんでしたが、CSS3 からは画面の幅などの 媒体の特性（メディア特性） まで判断できるようになりました。
上の例では、表示領域の幅が600px以上のときだけ3列に並べ、それより狭いときは縦に並べています。プレビューの幅や、スマートフォンでこのページを開いて確かめてみましょう。
スマートフォン向けのスタイルを基本に書き、min-width で大きな画面向けのスタイルを追加していく方法を「モバイルファースト」と呼びます。反対に、PC 向けのスタイルを基本に書き、max-width で小さな画面向けのスタイルを追加していく方法を「PCファースト」と呼びます。
CSS を切り替えるタイミング（画面幅）のことを ブレイクポイント と呼びます。PC とスマホの表示を切り替える場合、画面幅が何 px になったときに切り替えるかを定義する必要があります。上の例では 600px がブレイクポイントです。
応用例・注意点
よく使う条件
| 条件 | 説明 |
|---|---|
(min-width: 760px) | 幅が760px以上 |
(max-width: 759px) | 幅が759px以下 |
(width >= 760px) | 範囲の新しい書き方 |
(prefers-color-scheme: dark) | OSがダークモード |
(prefers-reduced-motion: reduce) | 動きを減らす設定 |
(hover: hover) | マウスなどホバーできる環境 |
基本の書き方（メディアタイプ and メディア特性）
「@media メディアタイプ and (メディア特性) { 指定したいCSS }」の形で書きます。この例は、画面幅が768px以下になると .acthouse の文字を赤にします。
複数の条件をすべて満たすとき（and）
プリンター以外のデバイス、かつ768px以上の画面に対して適用したい場合です。
どれか1つの条件に当てはまるとき（,）
横幅が768px以内、または縦長のデバイスに適用したい場合です。カンマで区切った条件のどれか1つに当てはまれば適用されます。
ダークモードに対応する
OSの設定に合わせて配色を切り替えます。
注意点
- 01スマートフォンで正しく判定させるには、HTMLに <meta name="viewport" content="width=device-width, initial-scale=1"> が必要です。
- 02ブレークポイント（切り替える幅）は、端末の種類ではなく、レイアウトが崩れ始める幅を基準に決めます。
- 03ブレイクポイントの定義は、制作会社や制作者によって様々です。画面サイズが大きいデバイスもどんどん発売されるため、一定期間でブレイクポイントの見直しをしたほうがよいです。
- 04メディアクエリは HTML の link タグの media 属性にも書けます（詳しくは link のページ）。
メディアクエリの書き方とブレイクポイントの指定
デバイスの種類（メディアタイプ）
メディアタイプとは、「どのメディアに CSS を適用させるか」 を指定するものです。以下の3種類があります。省略すると all と同じ扱いになります。
| メディアタイプ | 対象 |
|---|---|
| all | すべてのデバイス |
| プリンター（印刷時） | |
| screen | プリンター以外のデバイス（PC、スマホや iPad など） |
メディア特性（min-width と max-width）
メディア特性とは、画面の高さや幅を指定する条件 のことです。まずは次の2パターンを覚えておけば OK です。
| 書き方 | 意味 | 使う場面 |
|---|---|---|
| (min-width: 768px) | 768px以上 と条件定義。ブレイクポイントは768pxとなり、768px以上のデバイスに適用される | スマホを基準 として、大きいサイズのデバイスのメディアクエリを設定する場合（モバイルファースト） |
| (max-width: 768px) | 768px以下 と条件定義。ブレイクポイントは768pxとなり、768px以下のデバイスに適用される | PC サイトを基準 とする場合（PCファースト） |
ブレイクポイント指定の例（モバイルファースト）
スマホ用の色を基本に書き、min-width で大きい画面用の色に上書きしていきます。767px以下では文字が赤、768px〜1023pxでは黄色、1024px以上では緑になります。
コードと表示の対応
.acthouse { color: red; }メディアクエリの外に書いたスタイルが基本です。どの幅でもまず赤になり、767px以下 ではそのまま赤です。@media screen and (min-width: 768px)768px以上 で黄色に上書きします。1024px以上では次の指定がさらに上書きするので、黄色になるのは 768px〜1023px です。@media screen and (min-width: 1024px)1024px以上 で緑に上書きします。min-width は小さい値から順に書くのがポイントです。
ブレイクポイント指定の例（PCファースト）
PC 用の色を基本に書き、max-width で小さい画面用の色に上書きしていきます。1025px以上では文字が赤、769px〜1024pxでは緑、768px以下では黄色になります。
コードと表示の対応
.acthouse { color: red; }基本のスタイルです。1025px以上 では赤のままです。@media screen and (max-width: 1024px)1024px以下 で緑に上書きします。768px以下では次の指定がさらに上書きするので、緑になるのは 769px〜1024px です。@media screen and (max-width: 768px)768px以下 で黄色に上書きします。max-width は大きい値から順に書くのがポイントです。
ブレイクポイントとメディアクエリの違い
- ブレイクポイントは 「境界線」（768px・1024px などの切り替わる幅）
- メディアクエリは 「範囲」（768px以上・768px以下など、CSS を当てる幅の範囲）
複数条件
複数の条件をすべて満たすときに適用したい場合は 「and」 を使い、いずれかの条件に当てはまる場合は 「,」（カンマ） で区切ります。その他、「not」 や 「only」 でも条件を指定できます。
| 書き方 | 意味 | 例 |
|---|---|---|
| and | 前後の条件を すべて 満たすとき | screen and (min-width: 768px) |
| , | 区切った条件の どれか1つ に当てはまるとき | (max-width: 768px), (orientation: portrait) |
| not | 条件全体を 否定 する（当てはまらないとき） | not print（印刷以外） |
| only | 古いブラウザにメディアクエリを無視させるための書き方 | only screen and (min-width: 768px) |
only は、メディアクエリに対応していない古いブラウザ向けの書き方です。今のブラウザでは書いても書かなくても同じ動きなので、既存のコードで見かけたら意味がわかれば十分です。
その他のメディア特性
幅（width）以外にも、メディア特性には次のような種類があります。min- / max- を付けて「以上」「以下」を指定できるものもあります（min-height など）。
| メディア特性 | 意味 |
|---|---|
| width | ブラウザの表示領域の幅 |
| height | ブラウザの表示領域の高さ |
| device-width | デバイス画面の幅 |
| device-height | デバイス画面の高さ |
| orientation | ブラウザの表示領域の向き（portrait＝縦長／landscape＝横長） |
| aspect-ratio | ブラウザの表示領域のアスペクト比 |
| device-aspect-ratio | デバイスの画面のアスペクト比 |
| color | デバイスのビット数（1色あたり） |
| color-index | デバイスのカラールックアップテーブルの項目数 |
| monochrome | モノクロデバイスのビット数 |
| resolution | デバイスの解像度 |
| scan | テレビのスキャン方式 |
| grid | グリッドかビットマップかを参照 |
device- で始まる特性は使わない
device-width・device-height・device-aspect-ratioは、今は 非推奨 です。ブラウザの表示領域ではなく端末の画面そのものを見るため、ブラウザを縮めたときなどに思った通りに切り替わりません。- 画面幅で切り替えるときは
width（min-width・max-width）を使います。