メディアクエリの書き方・使い方とCSSブレイクポイント

メディアクエリとは？

メディアクエリ（Media Query）は、Webデザインやウェブ開発で使えるCSS（スタイルシート言語）です。
Webサイトのレスポンシブ化やモバイルファースト対応に欠かせないのが、メディアクエリ。
メディアクエリは、パソコン、タブレット、スマートフォンなどのデバイス機器や各種ブラウザに対応するために、CSSで条件を指定する方法の1つです。

メディアクエリを使うことで、ホームページやアプリケーションの外観やレイアウトを、異なるデバイスや画面サイズに合わせて最適化することができます。
Web制作・開発の現場では、レスポンシブデザインの実装時にメディアクエリが役立ちます。

メディアクエリは、いろいろな条件を指定することができますが、一般的なWebページでよく使用される条件としては、以下の3つです。

• 画面幅（ブラウザの幅）の変動に合わせたCSSの設定
• デバイスの向き（縦・横）の変動合わせたCSSの設定
• プリンターフレンドリーのCSSの設定

メディアクエリの基本的な種類と書き方、使い方を解説してきます。

メディアクエリの書き方

まずは、メディアクエリの基本的な書き方です。
メディアクエリは、CSSファイル内で、@mediaルールを使用して条件を定義します。
その条件を満たした場合に、指定したCSSスタイルを適用することができます。

CSSでメディアクエリを使用する際の最低限必要な@mediaルールの基本構文は、以下になります。

@media (条件) {
  /* 条件が満たされるときに適用するスタイル */
}

頭に@mediaを書くことでメディアクエリが開始されます。
(条件) の部分には、メディア特性というCSSを適用する条件を指定します。
メディア特性は、@mediaルールで定められている、デバイスの幅、向き、解像度、カラースキームなどを指定できます。
{ } の中に、条件が満たされたときに適用するスタイルを記述します。

メディアタイプの種類と使い方

上記の基本構文に、メディアタイプというものを追加することができます。
メディアタイプとは、デバイスの種類になります。
メディアタイプを追加した場合の構文は以下のように書きます。

@media メディアタイプ and (条件) {
  /* 条件が満たされるときに適用するスタイルを記述 */
}

メディアタイプの部分に指定できるメディアの種類は、基本の4つです。

• all（すべてのデバイスが対象）
• print（印刷プリンターや印刷プレビューが対象）
• screen（画面で見られるスマホ、PC、タブレッドなどが対象）
• speech（音声合成音声合成系が対象）

なお、メディアタイプを省力した場合は、すべてのデバイスが対象とみなされ、allを指定したときと同じことになります。

screenをメディアタイプに指定した例です。

@media screen and (条件) {
  /* screenを対象として条件が満たされるときに適用するスタイル */
}

条件なしの場合は、andは不要です。

@media print {
  /* printを対象として適用するスタイル */
}

一般的なホームページでは、screen指定、またはメディアタイプなしで使うことが多いです。

メディア特性の種類と使い方

メディアクエリは、様々なメディア特性を指定することができますが、Webサイトでよく使うメディア特性の条件は「幅」の指定です。はじめは、幅の指定に関連するメディアクエリを使いこなせるようになりましょう。
メディア特性の例を示しながら使い方を解説していきます。

ビューポートの幅と高さ

メディアクエリで最も重視される条件が、ビューポート（viewport）です。
ビューポートとは、Webブラウザを見たときにWebサイトが表示されている領域のことです。

メディアクエリを使うときのイメージとしては、ビューポートの幅が、特定の幅よりも大きいか小さいかを判定してCSSを指定します。
ビューポートのとしては、次の6つの条件を指定できます。

• min-width（幅の最小値)
• max-width（幅の最大値）
• width（幅の値）
• min-height（高さの最小値）
• max-height（高さの最大値）
• height（高さの値）

ビューポートの書き方と例

条件であるmin-width、max-width、width、min-height、max-height、heightのあとに、:（コロン）を付けて単位付きの数値を設定します。

それぞれビューポートの6つの条件ごとに、幅768pxと高さ500pxの数値を使って書いたメディアクエリの例です。

@media (width: 768px){
　/* 幅が768pxの場合に適用するスタイルをここに記述します */
}

@media (min-width: 768px){
　/* 幅が768px以上のときに適用するスタイルをここに記述します */
}

@media (max-width: 768px){
　/* 幅が768px以下のときに適用するスタイルをここに記述します */
}

@media (height: 500px) {
  /* 高さが500pxのとき適用するスタイルをここに記述します */
}

@media (min-height: 500px) {
  /* 高さが500px以上のとき適用するスタイルをここに記述します */
}

@media (max-height: 500px) {
  /* 高さが500px以下のとき適用するスタイルをここに記述します */
}

特に、min-width、max-widthの2つは、@mediaルールにおいて頻繁に使いますので、もう少し詳しく見ていきます。

@mediaのmax-widthとmin-width 違い

@mediaで使用する max-width と min-width は、Webデザインにおいて画面幅に応じたCSSスタイルを適用する際に役立ちます。
max-width と min-widthの違いをCSSの例を挙げて説明します。

max-width

max-width は、指定した幅以下の画面幅のときに適用される条件です。
つまり、指定した幅を含む幅以下のデバイスやビューポートに適用するスタイルを書いて指定します。

例えば、画面幅が768pxを含み768pxより小さいときに、HTMLで書いたpタグのフォントサイズを16pxに指定したかったとしましょう。仮に通常のフォントサイズは、18pxとしておきます。
CSSでは、@mediaルールを使って、このように書くことができます。

p {
  font-size:18px;
}

@media (max-width: 768px) {
  p {
    font-size:16px;
  }
}

min-width

max-width は、指定した幅以上の画面幅のときに適用される条件です。
つまり、指定した幅を含む幅以上のデバイスやビューポートに適用するスタイルを書いて指定します。

例えば、画面幅が768pxを含み768pxより大きいときに、HTMLで書いたpタグのフォントサイズを18pxに指定したかったとしましょう。仮に通常のフォントサイズは、16pxとしておきます。
CSSでは、@mediaルールを使って、このように書くことができます。

p {
  font-size:16px;
}

@media (min-width: 768px) {
  p {
    font-size:18px;
  }
}

モバイルファーストデザインとデスクトップファーストデザイン

max-widthとmin-widthを使い分けることで、複数の画面幅に合わせたスタイルを制御することができます。

min-widthは、通常、モバイルファーストのデザインに適しており、小さなデバイス向けのスタイルを指定したあとに、@mediaで大きなデバイス向けのスタイルを追加します。

反対に、max-widthは、デスクトップ（PC）ファーストのデザインに適しており、大きなデバイス向けのスタイルを指定したあとに、@mediaで小さなデバイス向けのスタイルを追加します。

どちらも基本は、先にデフォルトで指定したいスタイルを書いて、その後方に@mediaで特定幅に指定するスタイルを書きます。

モバイルファーストデザインのCSSの書き方

/**　ここにモバイル優先のCSSを記述 **/

@media (min-width: 幅の値) {
  /** ここにモバイル以外に適用するCSSを記述 **/
}

デスクトップファーストデザインのCSSの書き方

/**　ここにデスクトップ優先のCSSを記述 **/

@media (max-width: 幅の値) {
  /** ここにデスクトップ以外に適用するCSSを記述 **/
}

モバイルファーストとデスクトップファーストどちらの書き方がいいの？と思った人がいるかもしれません。
結論としては、どちらを使ってもOKです。

以前は、ブラウザのIE対策としてデスクトップファーストデザインの書き方を主体にしていましたが、現在はIEを気にする必要がなくなったこと、スマートフォンユーザーが増加したことをふまえ、ターゲットとなるユーザーデバイスや商品・サービスを考慮して決定することが主流となっています。

スマホユーザーをターゲットにしたWebサイト、もしくはスマホユーザーの多い商品・サービスであれば、モバイルファーストからアプローチ。
PCユーザーをターゲットにしたWebサイト、もしくはPCユーザーの多い商品・サービスであれば、デスクトップファーストからアプローチ。
このような感じで使い分けることができればベストです。
モバイルファーストとデスクトップファースト、どちらの書き方も使えるようになっておきましょう。

メディアクエリの記述順番と優先度

幅のサイズを複数分ける際に気をつけなければならないのが、メディアクエリの記述順と優先度です。
min-widthとmax-width、それぞれ書く順番が異なりますので、基本知識として覚えておきましょう。

min-widthの場合

幅の値の小さい順にメディアクエリを記述します。

@media (min-width: 480px) {
}

@media (min-width: 768px) {
}

@media (min-width: 1280px) {
}

max-widthの場合

幅の値の大きい順にメディアクエリを記述します。

@media (max-width: 1280px) {
}

@media (max-width: 768px) {
}

@media (max-width: 480px) {
}

ビューポートの幅で適用したスタイルが思うように効かない場合は、メディアクエリの順番が間違っていないか確認しましょう。

メディアクエリは最適なブレイクポイントが重要

ブレイクポイント（breakpoint）とは、異なるデバイスや画面サイズに適応するための基準です。
これまで見てきた、@media(max-width: 数値) に指定した数値がブレークポイントに当たります。
この数値をどのように決めればよいのか見ていきましょう。

メディアクエリの最適なブレイクポイントは、ウェブデザインや開発要件、ターゲットオーディエンスなどに依存します。Web制作においては、まずはデバイスによるブレークポイントをおさえておくとよいでしょう。

現在は、スマートフォン、パソコンのモニター、ノートパソコン、タブレットなど、デバイスの種類・サイズも増え、移り変わりも激しいため、ブレークポイントもその都度修正していく必要があります。
また、現場ではWeb制作会社やプロジェクトチームでブレークポイントを決めているところもあります。
ここでは、一般的なブレイクポイントの決め方と実例を挙げて説明します。

ブレイクポイントの決め方で参考になるのが、デバイスと画面サイズのシェア（利用）率のデータです。

データは、以下のWebサイトを参考にしています。
参照：Statcounter GlobalStats
デバイスやブラウザの種類、地域、期間なども指定して検索できます。

シェア率で見るデバイス別の画面サイズ

今回は、2023年日本国内に絞って利用者の多い（シェア率の高い）画面サイズを例とします。

また、利用者の少ない（シェア率の低い）デバイスでも、最小幅や最大幅をチェックしておくことも大切です。
理由としては、少なからず利用者がいるため、Webサイトのブレイクポイントには不可欠です。

ブレイクポイント実例

これらのデータをもとに、よく使われるブレークポイントは以下になります。

ポイントは、タブレット向けのサイズで分岐し、基本的にPC限定のメディアクエリは設定しないことが多いです。
理由としては、最近のスマートフォンは大きい画面も出てきているため、あえてタブレットのサイズをブレークポイントにしています。部分的にスマートフォンのみに適用するときは、480pxをブレークポイントに設定します。
以下、これらのブレイクポイントを設定したときのメディアクエリのCSS例です。

スマートフォン基準の場合

/* ここに画面サイズ767px以下に適用するデフォルトのスタイルを記述 */

@media (min-width: 768px) {
 /* ここに画面サイズ768px以上に適用するスタイルを記述 */
}

パソコン基準の場合

/* ここに画面サイズ769px以上に適用するデフォルトのスタイルを記述 */

@media (max-width: 767px) {
/* ここに画面サイズ768px以下に適用するスタイルを記述 */
}

@media (max-width: 480px) {
/* ここに画面サイズ480px以下に適用するスタイルを記述 */
}

もう少し広範囲に細くブレークポイントを分ける場合は、以下のブレークポイントにしています。

データを参考にタブレットの最小サイズであろう600pxを基準にしています。
パソコンはシェア率の高さ且つ小さいサイズのモニターへの対応を考慮して1024pxを基準にしています。

スマートフォン基準の場合

/* ここに画面サイズ599px以下に適用するデフォルトのスタイルを記述 */

@media (min-width: 600px) {
 /* ここに画面サイズ600px以上 1024px未満に適用するスタイルを記述 */
}

@media (min-width: 1025px) {
 /* ここに画面サイズ1025px以上に適用するスタイルを記述 */
}

パソコン基準の場合

/* ここに画面サイズ1025px以上に適用するデフォルトのスタイルを記述 */

@media (max-width: 1024px) {
/* ここに画面サイズ600px以上 1024px以下に適用するスタイルを記述 */
}

@media (max-width: 599px) {
/* ここに画面サイズ599以下に適用するスタイルを記述 */
}

Web制作現場では、デバイステストに応じて、ブレイクポイントを適宜修正・追加する場合もあります。

メディア特性のいろいろ

メディアクエリは、これまで見てきたビューポートの指定以外にも、いろいろなメディア特性を指定することができます。
ここでは、一部のメディア特性を紹介します。名称・用途だけでも知っておくと、いざという時に便利です。

orientation

orientation（オリエンテーション）に指定できる値は、ポートレートモード（portrait mode）と、ランドスケープモード（landscape mode）の2つがあります。

portraitは、デバイスが縦向きを判定します。
landscapeは、デバイスが横向きを判定します。

@media (orientation: portrait){
 /* デバイスが縦向き限定のスタイルをここに記述します */
}

@media (orientation: landscape){
 /* デバイスが横向き限定のスタイルをここに記述します */
}

デバイスによっては、orientationが効かない場合もあるため挙動テストは必須です。

hover

hover（ホバー）は、ユーザーが要素の上にポインターを乗せることができるかどうかを判定することができます。
つまり、ユーザーがポインティングデバイスを使用しているか否かを対象とします。
ポスティングデバイスとは、画面上で入力位置や座標を指定する機器です。マウス、タッチパネル、ペンタブレット、タッチパッド、トラックボール、ジョイスティック、コントローラーなどがあります。

hoverに指定できる値は、noneと、hoverの2つがあります。
noneは、ホバー機能が使えないデバイスを判定します。
hoverは、ホバー機能が使えるデバイスを判定します。

@media (hover: none){
 /* ホバー機能が使えないデバイス限定のスタイルをここに記述します */
}

@media (hover: hover){
 /* ホバー機能が使えるデバイス限定のスタイルをここに記述します */
}

未対応のブラウザやホバーが使えないデバイス（スマートフォンなど）は、デフォルトでnone値となります。

prefers-color-scheme

prefers-color-schemeは、デバイス側の設定のライトモード、ダークモードを判定することができます。
prefers-color-schemeに指定できる値は、lightと、darkの2つがあります。

lightは、デバイス側の設定でライトモードにしているときを判定します。
darkは、デバイス側の設定でダークモードにしているときを判定します。

@media (prefers-color-scheme: light){
 /* ライトモードのデバイス限定のスタイルをここに記述します */
}

@media (prefers-color-scheme: dark){
 /* ダークモードのデバイス限定のスタイルをここに記述します */
}

device-width / device-height

widthやheightは、ビューポート（表示されている領域）が対象ですが、device-widthとdevice-heightは、デバイスそのものが対象です。
最小・最大は、min-device-width、max-device-width、min-device-height、max-device-heightとすることができます。

device-widthは、デバイスの幅を判定します。
device-heightは、デバイスの高さを判定します。

例えば、タブレットの横向き・縦向きに適用する場合はこのように書きます。

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
 /* タブレットが縦向き限定のスタイルをここに記述します */
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape){
 /* タブレットが横向き限定のスタイルをここに記述します */
}

デバイスによっては、device-widthとdevice-heightが効かない場合もあるため挙動テストは必須です。

aspect-ratio

aspect-ratioは、ブラウザの表示領域の幅対高さのアスペクト比を判定することができます。
最小値・最大値は、min-aspect-ratio、max-aspect-ratioとすることができます。
値には、ビューポートの幅と高さのアスペクト比を 「幅 / 高さ」 のように指定します。
例えば、 16:9 の画面サイズを対象としたいなら、16/9が値です。

resolution

resolutionは、デバイスのピクセル解像度を判定することができます。
値には、 dpi単位の数値を指定します。
最小値・最大値は、min-resolution、max-resolutionとすることができます。

prefers-reduced-motion

prefers-reduced-motionは、デバイスのアニメーションの動きを最小限にする設定しているかどうかを判定できます。
値には、 reduceまたはno-preferenceを指定します。
reduceは、デバイスのアニメーションの動きを最小限にするように設定されているときを判定します。no-preferenceは、ユーザーが設定を行っていないときを判定します。

color

colorは、デバイスの赤・緑・青の色成分あたりのビット数を判定することができます。
値には、 ビットの数値を指定します。
最小値・最大値は、min-color、max-colorとすることができます。
モノクロ（白黒）のデバイスの場合は、値は 0 となります。

color-index

color-indexは、デバイスのカラールックアップテーブルの項目数を判定することができます。
値には、 テーブルの数値を指定します。
最小値・最大値は、min-color-index、max-color-indexとすることができます。
デバイスがカラールックアップテーブルを使用してない場合は、値は0となります。

color-gamut

color-gamutは、デバイスがどこまで色域に対応しているか判定することができます。
値には、 srgb、p3、rec2020を指定します。
srgbは、デバイスが sRGBの色域にほぼ対応しているときを判定します。一般のカラーディスプレイはこれに該当します。
p3、rec2020の色域は sRGBの色域よりも広いときを判定します。

monochrome

monochromeは、デバイスがモノクロに対応した機器かどうかを判定することができます。
値には、 monochromeまたは0を指定します。モノクロ対応でない場合、値は0となります。
値には、フレームバッファのピクセルあたりのビット数値を指定することもできます。
最小値・最大値は、min-monochrome、max-monochromeとすることができます。

inverted-colors

inverted-colorsは、デバイスの設定で色が通常通りの設定になっているかどうかを判定することができます。
値には、 invertedまたはnoneを指定します。
invertedは、デバイスの設定で色が反転されるように設定されているときを判定します。
noneは、デバイスの設定で色が通常通りの設定されているときを判定します。

メディア特性は、他にもありますが、一般的なホームページでよく使用するメディア特性はほんの一部です。
すべてを覚える必要はありませんので、必要に応じて調べながら使いましょう。

メディアクエリの論理演算子

メディアクエリは、論理演算子を使って、複数の条件を追加・指定することができます。

and

andを使って、複数の条件をつなぐことができます。andは「且つ（かつ）」と覚えておくといいでしょう。
例として次の構文は、デバイスが横向き、且つ幅が768px以上の場合に制限できます。

@media screen and (min-width: 768px) and (orientation: landscape) {
 /* 適用するスタイルを記述 */
}

,カンマ

さらに、,（カンマ）で区切って、条件をいくつでも組み合わせることができます。
カンマは「または」と覚えておくといいでしょう。
カンマ区切りのリストを使うと、条件のいずれか1つに一致する場合にスタイルを適用させることができます。
例えば、次の構文は、デバイスの幅768px以上、または画面が横向きのときにスタイルが適用されます。

@media (min-width: 768px), screen and (orientation: landscape) {
 /* 適用するスタイルを記述 */
}

なお、新しい記法では、カンマをorに置換えて使用することもできます。
ただし、すべてのブラウザで対応していないため、様子を見ながら使う必要があります。

@media (min-width: 768px) or screen and (orientation: landscape) {
 /* 適用するスタイルを記述 */
}

not

notを使用して、メディアクエリ全体を否定することができます。
つまり、メディアクエリ全体の意味が逆になります。
notの範囲をクエリごとに制限したい場合は、,（カンマ）で区切って条件を組み合わせることができます。
なお、notを使う場合はメディアタイプ（screen, printなど）を指定する必要があります。
例えば、次の構文は、横幅が768px以上でない、またはデバイスが横向きのときにスタイルが適用されます。

@media not all and (min-width: 768px), (orientation: landscape){
 /* 適用するスタイルを記述 */
}

only

条件全体が一致する場合にのみスタイルを適用できます。
onlyを使用する場合は、メディアタイプ（screen, printなど）を指定する必要があります。
従来、古いブラウザ対策として使われていましたが、現在は必要ないと感じます。

@media only screen and (min-width: 768px){
 /* 適用するスタイルを記述 */
}

Range記法

新しい記法でRange記法と言います。今後、浸透していく可能性もありますので簡単に紹介しておきます。
従来の記法と異なるポイントは、2つです。

• 記号でつなげることができる
• 未満やより大きいを表現できる

Range記法で使える記号は以下の通りです。

以下、Range記法を使った例を紹介します。
例として、メディアクエリで、デバイスの幅が480px以上、且つ768px以下のときは、従来の書き方とRange記法で書いた場合を比較してみましょう。

従来の記法

@media (min-width: 480px) and (max-width: 768px) {
 /* 適用するスタイルを記述 */
}

Range記法

@media (480px <= width <= 768px) {
 /* 適用するスタイルを記述 */
}

このように意味のわかる記号でつなげてスッキリ書くことができます。
さらに、768px以下ではなく768px未満にしたかったとします。
この場合、Range記法ではこのように書くことができます。

@media (480px <= width < 768px) {
 /* 適用するスタイルを記述 */
}

Range記法は、Chrome, Edge, Firefox、Safariの2023年以降の最新バージョンで対応していますが、まだ対応していないブラウザやバージョンがありますので注意が必要です。
最新バージョンが浸透するまでは、様子を見ながら使いましょう。

メディアクエリの使用場所

メディアクエリは、CSSファイル内だけではなく、HTML要素などいくつかの場所で使うことができます。

CSSファイル

HTMLファイルで読み込んだCSSファイル内で使用します。

<link rel="stylesheet" href="style.css">

HTMLファイルで読み込むCSSファイル（例：style.css）内に、@mediaルールを書きます。

HTMLファイル

HTMLファイル内の <link> や <source> などのHTML要素で使用することができます。
例えば、mediaコンテンツ属性に書いてスタイルシートやページを指定したり切り替えたりできます。

//スマートフォン用のスタイルシートを指定する例
<link rel="stylesheet" href="style-sp.css" media="screen and (max-width:480px)" type="text/css">

//プリント用のファイルを指定する例
<link rel="alternate" href="print.pdf" media="print" title="印刷用">

また、<head>内にmeta要素を記述して、そのmeta要素のnameコンテンツ属性の属性値にviewportを記述することができます。
ここでは、基本的なことを紹介しておきます。

メディアクエリを指定しているときのmeta要素のviewportの正しい設定は、このように書きます。

<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

このように記述しておくことで、ブラウザ・デバイスの横幅に自動的に指定されます。
メディアクエリを使うとき、レスポンシブWebデザインを作るときは、必要な要素になりますので覚えておきましょう。

メディアクエリが効かないときチェックすること

設定したメディアクエリが効かないときは、以下のことをチェックしましょう。

• メディアクエリの構文
• meta要素のviewportの記述
• HTMLのスタイルシートの読み込み

1つ目は、メディアクエリの構文が間違っていないことが前提です。
全角ではなく半角文字で記述しているか。｛ ｝波括弧や( )括弧が正しく閉じられているか。などを確認してください。

2つ目は、HTMLファイルのhead内に記述するviewportです。
メディアクエリを使う前提として、<head>要素内に<meta>タグを指定する必要があります。

<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

3つ目は、HTMLで読み込むスタイルシートの正しい読み込みです。
読み込む<link>タグ内のコードと、スタイルシートのスペルが合っていることはもちろんですが、複数のCSSファイルが存在する場合は、読み込む順番も確認しましょう。
特に、リセットCSSなどのファイルを読み込んでいるときは注意です。

まとめ

メディアクエリは、異なる条件に合わせてスタイルを変更することができ、あらゆるWebデザインを実現することができます。
Webサイトにおいて大切なことは、様々な環境のユーザーに、気持ち良くWebサイトを利用してもらうことです。
メディアクエリを使うことで、異なるデバイスや条件に適したUX（ユーザーエクスペリエンス）を提供することが可能になり、Webサイトやアプリケーションの使いやすさを向上させるのに役立ちます。

特に、@mediaルールを用いたビューポートやブレイクポイントは、Web制作の標準スキルとして使いこなせるようになっておきましょう。