CSS

A page that shows how to use the CSS @media rule to switch layouts and styles based on screen size, orientation, and input devices, with simple examples of the most common media features.

media属性 / @media

画面サイズやデバイスの特性に合わせて、どの幅・向き・操作環境のときにどんなレイアウトやデザインを適用するかを、CSS の @media で切り替えるための書き方と代表的なメディア特性をまとめたページです。

@media とは？

CSSの @mediaは、画面サイズやデバイスの種類に応じてスタイルを適用するためのルールです。例えば、デスクトップ、タブレット、スマートフォンなど異なるデバイスに対して異なるデザインを提供する際に使用されます。@mediaは「メディアクエリ」と呼ばれ、指定した条件（例えば、画面の幅や高さ、解像度、向きなど）が満たされた場合に、その中のスタイルが適用されます。

簡単な例を挙げると

CSS

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

この例では、画面幅が600ピクセル以下の場合に、背景色をライトブルーに変更するスタイルが適用されます。@mediaを使うことで、レスポンシブデザイン（異なる画面サイズに適応するデザイン）を簡単に実現できます。

基本の書き方（構文）

まずは、「どんな画面のときに」「どんなスタイルを当てるか」をセットで書ければOKです。

CSS

@media screen and (min-width: 768px) {
    /* 画面幅が 768px 以上のときに適用するスタイル */
    .container {
        max-width: 960px;
        margin: 0 auto;
    }
}

この例では、

screen
画面表示向け
(min-width: 768px)
「幅が768px以上」という条件
.container { ... }
条件を満たしたときに適用するスタイル

といった感じで、「メディアの種類」と「条件」と「そのときのスタイル」をまとめて書きます。よく使うのは screen と幅の条件（min-width / max-width）です。

@mediaに指定できる条件（メディアクエリ）は、デバイスの特性に基づいて多くの種類があります。

条件の組み合わせと範囲指定

ある程度慣れてきたら、「条件を組み合わせる」「幅の範囲をしぼる」といった書き方も覚えておくと便利です。

and で条件を両方みたすときだけ適用する

複数の条件をすべて満たしたときだけスタイルを当てたい場合は、and を使います。

CSS

@media (min-width: 600px) and (orientation: landscape) {
    /* 画面幅が 600px 以上 かつ 横向きのとき */
    .main {
        display: flex;
    }
}

この例では、「幅が600px以上」と「横向き」の両方を満たしたときだけ、.main を横並びレイアウトにしています。

,（カンマ）で「どちらかの条件を満たす」場合

カンマで区切ると、「どれか1つでも条件を満たしたら適用する」という意味になります。OR 条件のイメージです。

CSS

@media print, (min-width: 1024px) {
    /* 印刷時 または 幅が 1024px 以上のとき */
    .sidebar {
        display: none;
    }
}

この例では、印刷するときや画面が十分広いときにサイドバーを隠しています。

not で条件を反転する

not を付けると、「その条件ではない場合」という意味になります。使う場面は多くありませんが、考え方として知っておくと便利です。

CSS

@media not all and (max-width: 600px) {
    /* 600px 以下では ない 画面にだけ適用される */
    .wide-only {
        border: 2px solid red;
    }
}

「あえてこの条件以外に当てたい」といった場面で使えますが、少し読みづらくなるので、まずは and やカンマ区切りを優先して使うのがおすすめです。

幅の範囲を指定する書き方（レベル4の範囲構文）

CSS Media Queries Level 4 では、大小記号を使って「幅が〇〜〇のあいだ」という書き方もできます。モダンブラウザ向けの書き方ですが、とても読みやすくなります。

CSS

@media (600px <= width < 1024px) {
    /* 幅が 600px 以上 1024px 未満のとき */
    .content {
        max-width: 720px;
        margin: 0 auto;
    }
}

従来の書き方だと、同じ条件は次のように書く必要がありました。

CSS

@media (min-width: 600px) and (max-width: 1023px) {
    /* 同じく「600px 以上 1024px 未満」のイメージ */
    .content {
        max-width: 720px;
        margin: 0 auto;
    }
}

どちらも書き方としては正しいので、まずは従来の min-width / max-width に慣れてから、余裕が出てきたら範囲構文も試してみる、という順番で覚えるとスムーズです。

よく使うパターン

実際のレイアウトでは、次のような書き方を覚えておくと便利です。

モバイルファースト（おすすめ）

まずはスマホ向けのスタイルを通常のCSSとして書き、画面が広くなったらレイアウトを変える書き方です。

CSS

/* 基本（スマホ向け） */
.main {
    padding: 16px;
}

/* 768px 以上（タブレット・PC向け） */
@media (min-width: 768px) {
    .main {
        padding: 32px;
        max-width: 960px;
        margin: 0 auto;
    }
}

PC ファースト（既存サイトの調整など）

まずPC向けのデザインがあり、あとから画面の狭い端末向けに調整したいときなどに使います。

CSS

/* 基本（PC向け） */
.nav {
    display: flex;
}

/* 600px 以下（スマホ向け） */
@media (max-width: 600px) {
    .nav {
        display: block;
    }
}

幅・高さに関する条件

width
ビューポートの幅
min-width
ビューポートの最小幅
max-width
ビューポートの最大幅
height
ビューポートの高さ
min-height
ビューポートの最小高さ
max-height
ビューポートの最大高さ

アスペクト比に関する条件

aspect-ratio
ビューポートの幅と高さの比率
min-aspect-ratio
最小アスペクト比
max-aspect-ratio
最大アスペクト比

デバイスに関する条件

device-width
デバイスのスクリーンの幅（※現在は古い指定方法で、通常は width / min-width を使います）
min-device-width
デバイスのスクリーンの最小幅（※現在はほとんど使われず、代わりに min-width を使うのが一般的です）
max-device-width
デバイスのスクリーンの最大幅（※現在はほとんど使われず、代わりに max-width を使うのが一般的です）
device-height
デバイスのスクリーンの高さ（※古い指定方法で、通常は height / min-height などを使います）
min-device-height
デバイスのスクリーンの最小高さ（※現在はほとんど使われません）
max-device-height
デバイスのスクリーンの最大高さ（※現在はほとんど使われません）

解像度に関する条件

resolution
デバイスの解像度（dpiまたはdpcm）
min-resolution
最小解像度
max-resolution
最大解像度

画面の向き

orientation
デバイスの画面の向き（縦向きまたは横向き）に応じて異なるスタイルを適用するためのルールです。

表示モード

display-mode
Webアプリケーションの表示モード（fullscreen、standalone、minimal-ui、browser）

色に関する条件

color
デバイスのカラー解像度（ビット数）
min-color
最小カラー解像度
max-color
最大カラー解像度
color-index
デバイスのカラーパレットの数（※古い環境向けで、現在の一般的なブラウザではほとんど使われません）
min-color-index
最小カラーパレット数（※古い環境向けで、普段はまず使いません）
max-color-index
最大カラーパレット数（※古い環境向けで、普段はまず使いません）

モノクロデバイス

monochrome
デバイスがモノクロかどうか（※モノクロ専用デバイス向けで、一般的なWebサイトではほとんど使われません）
min-monochrome
モノクロ表示の最小ビット深度（※特殊な環境向けで、通常は使いません）
max-monochrome
モノクロ表示の最大ビット深度（※特殊な環境向けで、通常は使いません）

その他の条件

scan
テレビのスキャン方式（interlace または progressive）（※テレビ向けの古いメディア向けで、通常のWebサイトではほとんど使いません）
grid
デバイスがグリッド（格子）レイアウトを使用しているかどうか（※古い端末向けの特性で、現在はまず使いません）
hover
ホバー操作が可能かどうか
pointer
ポインティングデバイスの精度（none、coarse、fine）
any-hover
少なくとも1つのホバーデバイスがあるかどうか
any-pointer
少なくとも1つのポインティングデバイスの精度

これらの条件を組み合わせて、特定のデバイスや環境に適したスタイルを指定できます。

orientation

@media の orientation は、デバイスの画面の向きに応じて CSSを適用するためのメディアクエリの一つです。画面の向きには主に2つの種類があり、以下のように指定します。

orientation: portrait
画面が縦向き（高さが幅よりも大きい場合）のスタイルを指定します。
orientation: landscape
画面が横向き（幅が高さよりも大きい場合）のスタイルを指定します。

このメディアクエリを使うことで、デバイスの向きに合わせてデザインやレイアウトを柔軟に変更することができます。

CSS

@media (orientation: portrait) {
	/* 縦向きのスタイル */
	body {
		background-color: lightblue;
	}
}

@media (orientation: landscape) {
	/* 横向きのスタイル */
	body {
		background-color: lightgreen;
	}
}

このようにして、デバイスの向きに応じて異なるスタイルを適用することができます。

よくある質問（FAQ）

@media は HTML のどこに書けばいいですか？
通常は、外部CSSファイル（.css）の中に書きます。HTMLファイルの中に直接書く場合は、<head> 内の <style> タグの中に記述します。
スマホだけデザインを変えたいときは、どう書けばいいですか？
@media (max-width: 600px) { ... } のように、画面幅が一定以下のときだけ適用されるスタイルを書くのが簡単です。最近は、スマホ向けを基本として min-width で広い画面向けのスタイルを足していく「モバイルファースト」もよく使われます。
min-width と max-width のどちらを使えばいいですか？
新しく作るサイトでは、スマホを基本とした min-width（モバイルファースト）がよく使われます。既存のPCサイトをあとからスマホ対応したい場合は、max-width を使う方が分かりやすいこともあります。
device-width と width の違いは何ですか？
device-width は端末そのものの画面幅、width はブラウザの表示領域（ビューポート）の幅を指します。現在は width を使うのが基本で、device-width は古い指定方法として扱われています。

よくあるエラー早見表

@media の条件を書いたのに反映されない
@media の中カッコ { ... } の閉じ忘れや、(min-width: 768px) のような丸カッコの閉じ忘れがないか確認してください。また、ブラウザの幅が本当に条件を満たしているかもチェックしましょう。
スマホでだけ崩れてしまう
スマホ向けの @media (max-width: ...) の中で、意図せず強い指定（!important など）を使っていないか確認してください。順番的に、後ろに書かれているスタイルが優先されることもよくあります。
特定の @media のスタイルだけ効かない
複数の @media で同じ要素にスタイルを当てている場合、条件が重なると「どれが最後に評価されるか」で結果が変わります。CSSファイルの記述順や、条件の範囲の重なりを見直してみてください。
PC でスマホ向けのレイアウトが適用されてしまう
min-width と max-width を逆に書いていないか確認してください。また、ブラウザの開発ツールで「デバイスモード」がオンになっていると、スマホ向けのスタイルが適用されたままになることがあります。