CSS @mediaルール

定義と用法

メディアクエリ内で異なるメディアタイプ/デバイスに異なるスタイルを適用するために使用される@mediaルール。

メディアクエリは多くのことがチェックできるため、以下のようなものが含まれます：

  • ビューポートの幅と高さ
  • デバイスの幅と高さ
  • 方向（スマートフォンやタブレットが横向きか縦向きかのモード？）
  • 解像度

メディアクエリを使用することは、デスクトップ、ラップトップ、タブレット、スマートフォンにカスタムスタイルシートを提供するための人気のある技術です（レスポンシブウェブデザイン）。

印刷のドキュメントやスクリーンリーダー（mediatype：print、screen、またはspeech）にのみ適用されるスタイルを定義するためにメディアクエリを使用できます。

メディアタイプに加えて、メディア特性もあります。メディア特性は、ユーザーエージェントやディスプレイデバイスの具体的な特性をテストすることで、メディアクエリに詳細な特定の情報を提供します。例えば、特定の幅以上または以下のスクリーンにのみスタイルを適用することができます。

参照先：

CSSチュートリアル：CSS メディアクエリ

CSSチュートリアル：CSSメディアクエリインスタンス

RWDチュートリアル：メディアクエリを通じてレスポンシブWebデザインを実現

JavaScriptリファレンスマニュアル：window.matchMedia()メソッド

インスタンス

例1

ブラウザのウィンドウの幅が600pxまたはそれ以下の場合、<body>要素の背景色を「ライトブルー」に変更します：

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

自分で試してみてください

詳細なTIYインスタンスはページの下部に見つけることができます。

CSS文法

@media not|only mediatype and (mediafeature and|or|not mediafeature) {
  CSS-Code;
}

not、only、andキーワードの意味：

not：notキーワードは、メディアクエリの全体の意味を逆転させます。

only：onlyキーワードは、メディア特性をサポートしていない旧版ブラウザに指定されたスタイルを適用させないようにします。これは現代のブラウザには影響しません。

and：andキーワードはメディア特性とメディアタイプ、または他のメディア特性を組み合わせます。

これらはすべてオプションです。ただし、notやonlyを使用する場合、メディアタイプも指定する必要があります。

異なるメディアに異なるスタイルシートを使用することもできます。例えば：

<link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen.css">
<link rel="stylesheet" media="screen and (max-width: 600px)" href="smallscreen.css">
....

メディアタイプ

値 説明
all デフォルト。すべてのメディアタイプのデバイスに使用。
print プリンタ用。
screen コンピュータスクリーン、タブレット、スマートフォンなどに使用。
speech ページを読み上げるスクリーンリーダー用。

メディア特性

値 説明
any-hover

使用可能な入力メカニズムにユーザーが（マウスなど）要素上にヒエラルキーできるものが含まれているか？

Media Queries Level 4 で追加されました。
any-pointer

使用可能な入力メカニズムに指设备が含まれているかどうか、あればその精度はどうか？

Media Queries Level 4 で追加されました。
aspect-ratio ビューポート（viewport）の幅と高さの比率。
color

出力デバイスの各ピクセルのビット値、一般的には8、16、32ビット。

デバイスが彩色の出力をサポートしていない場合、この値は0です。
color-gamut

ユーザーエージェントと出力デバイスがサポートする色域の概略。

Media Queries Level 4 で追加されました。
color-index

出力デバイスの色のクエリテーブル（color lookup table）のエントリ数。

デバイスが色のクエリテーブルを使用していない場合、この値は0です。
device-aspect-ratio

出力デバイスの幅と高さの比率。

Media Queries Level 4で廃止されています。
device-height

出力デバイスがレンダリングする表面（例えばスクリーン）の高さ。

Media Queries Level 4で廃止されています。
device-width

出力デバイスがレンダリングする表面（例えばスクリーン）の幅。

Media Queries Level 4で廃止されています。
display-mode

アプリケーションの表示モード、例えばweb appのmanifestのdisplayメンバーで指定されています。

Web App Manifest specで定義されています。
forced-colors

ユーザーエージェントがパレットを制限しているかどうかを検出。

Media Queries Level 5 で追加されました。
grid 出力デバイスがグリッドスクリーンかポイントスクリーンを使用しているかどうか？
height ビューポート（viewport）の高さ。
hover

主な入力メカニズムがユーザーが要素上にマウスを合わせることを許可しているかどうか？

Media Queries Level 4 で追加されました。
inverted-colors

ブラウザまたは下層オペレーティングシステムが色を反転しているかどうか。

Media Queries Level 5 で追加されました。
light-level

現在の環境光レベル。

Media Queries Level 5 で追加されました。
max-aspect-ratio 表示領域の幅と高さの間の最大比率。
max-color 出力デバイスの各色成分の最大ビット数。
max-color-index デバイスが表示できる最大の色数。
max-height 表示領域の最大高さ、例えばブラウザのウィンドウ。
max-monochrome 単色（グレースケール）デバイス上でそれぞれの「色」の最大ビット数。
max-resolution デバイスの最大解像度、dpiまたはdpcmで指定。
max-width 表示領域の最大幅、例えばブラウザのウィンドウ。
min-aspect-ratio 表示領域の幅と高さの間の最小比率。
min-color 出力デバイスの各色成分の最小ビット数。
min-color-index デバイスが表示できる最小の色数。
min-height 表示領域の最小高さ、例えばブラウザのウィンドウ。
min-monochrome 単色（グレースケール）デバイス上でそれぞれの「色」の最小ビット数。
min-resolution デバイスの最低解像度、dpiまたはdpcmを使用して指定します。
min-width 表示エリアの最小幅、例えばブラウザのウィンドウ。
monochrome

出力デバイスのモノクロフレームバッファーの各ピクセルのビット深度。

デバイスがモノクロスクリーンでない場合、この値は 0 です。
orientation 視窗（viewport）の回転方向（横画面か縦画面モード）。
overflow-block

出力デバイスがブロック軸に溢れた視口（viewport）の内容をどのように処理するかを確認します。

Media Queries Level 4 で追加されました。
overflow-inline

インライン軸に溢れた視口（viewport）の内容がスクロールできるかどうかを確認します。

Media Queries Level 4 で追加されました。
pointer

主な入力メカニズムは指先デバイスでしょうか？その場合、精度はどの程度ですか？

Media Queries Level 4 で追加されました。
prefers-color-scheme

ユーザーが明るい色か暗い色の配色パターンを選ぶ傾向があるかどうかを検出します。

Media Queries Level 5 で追加されました。
prefers-contrast

ユーザーが似た色の間の明度を高めたり低めたりするようにシステムに要求するかどうかを検出します。

Media Queries Level 5 で追加されました。
prefers-reduced-motion

ユーザーがページ上により少ない動きのある効果を希望するかどうかを確認します。

Media Queries Level 5 で追加されました。
prefers-reduced-transparency

ユーザーが低い透明度を選ぶ傾向があるかどうかを確認します。

Media Queries Level 5 で追加されました。
resolution 出力デバイスの解像度、dpiまたはdpcmを使用して指定します。
scan 出力デバイスのスキャンプロセス（テレビなどに適用されます）。
scripting

スクリプト（例えば JavaScript）が利用可能かどうかを検出します。

Media Queries Level 5 で追加されました。
update

出力デバイスがコンテンツのレンダリング結果を更新する頻度。

Media Queries Level 4 で追加されました。
width 視窗（viewport）の幅。

更多实例

例 2

ブラウザの幅が 600ピクセル以下であれば、要素を非表示にします：

@media screen and (max-width: 600px) {
  div.example {
    display: none;
  }
}

自分で試してみてください

例 3

視口の幅が 800ピクセル以上であれば、メディアクエリを使用して背景色を薄紫色に設定してください；視口の幅が 400ピクセルから 799ピクセルの間であれば、メディアクエリを使用して背景色を薄緑色に設定してください。視口の幅が 400ピクセル未満であれば、背景色は薄青色です：

body {
  background-color: lightblue;
}
@media screen and (min-width: 400px) {
  body {
    background-color: lightgreen;
  }
}
@media screen and (min-width: 800px) {
  body {
    background-color: lavender;
  }
}

自分で試してみてください

例 4

レスポンシブなナビゲーションメニューを作成します（大画面では水平に表示され、小画面では垂直に表示されます）：

@media screen and (max-width: 600px) {
  .topnav a {
    float: none;
    width: 100%;
  }
}

自分で試してみてください

例5

メディアクエリを使用してリスポンシブ列レイアウトを作成します：

/* 992ピクセル以下のスクリーン上では、4列から2列に変更 */
@media screen and (max-width: 992px) {
  .column {
    width: 50%;
  }
}
/* 幅が600ピクセル以下のスクリーン上では、各列を並べ替えではなく積み重ねます */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

自分で試してみてください

例6

メディアクエリを使用してリスポンシブウェブサイトを作成します：

自分で試してみてください

例7

メディアクエリは、ブラウザの方向に応じてページのレイアウトを変更するためにも使用できます。ブラウザウィンドウの幅が高さを超える場合（つまり「横向き」方向）にのみ適用されるCSS属性のセットを書きます。

横向きモードにある場合、浅い青色の背景色を使用します：

@media only screen and (orientation: landscape) {
  body {
    background-color: lightblue;
  }
}

自分で試してみてください

例8

メディアクエリを使用して、スクリーン上で文書を表示する際に緑色、印刷時に黒色のテキスト色を設定します：

@media screen {
  body {
    color: green; 
  }
}
@media print {
  body {
    color: black; 
  }
}

自分で試してみてください

例9

カンマ区切りのリスト：カンマを使って、既存のメディアクエリに別のメディアクエリを追加します（OR演算子の動作に似ています）：

/* 幅が600pxから900pxまでか、1100px以上の時に<div>の外観を変更 */
@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {
  div.example {
    font-size: 50px;
    padding: 50px;
    border: 8px solid black;
    background: yellow;
  }
}

自分で試してみてください

ブラウザのサポート

テーブルの数字は、@mediaルールを完全にサポートする最初のブラウザバージョンを示しています。

Chrome IE / Edge Firefox Safari Opera
21 9 3.5 4.0 9