path: root/files/ja/web/guide/css/media_queries/index.html

---
title: メディアクエリ
slug: Web/Guide/CSS/Media_queries
tags:
  - CSS
  - CSS Reference
---
<p>{{ gecko_minversion_header("1.9.1") }}</p>

<p>CSS 3 ではメディア依存のスタイルシートのサポートが強化され、よりメディアの特性に適したスタイルシートを適用できます。メディアクエリは、メディアタイプと、メディア特性を利用してスタイルシートの適用条件を決定 (limits the style sheets' scope) する一つ以上の式からなります。メディア特性には、メディアの幅と高さ、色数などがあります。メディアクエリにより、コンテンツそのものを変更せずに、出力デバイスに合わせてコンテンツを表現することができます。</p>

<h2 id="Syntax" name="Syntax">構文</h2>

<p>メディアクエリは、<a class="internal" href="/ja/CSS/@media" title="ja/CSS/@media">メディアタイプ</a>と、メディア特性を必要とする一つ以上の式からなります。この式の結果は、true または false になります。クエリの結果は、ドキュメントが表示されるデバイスの種類がメディアクエリで指定されたメディアタイプにマッチし、<strong>さらに</strong>メディアクエリのすべての式が true のとき、true になります。</p>

<h3 id="Logical operators" name="Logical operators">論理演算子</h3>

<p>論理演算子を使用して複雑なメディアクエリを記述できます。論理演算子には、<code>not</code> および <code>and</code>, <code>only</code> があります。</p>

<p>また、複数のメディアクエリをカンマ区切りのリスト形式で併記することもできます。リスト内のいずれかのメディアクエリが true であれば、関連付けられたスタイルシートが適用されます。これは論理演算子の "or" と等価です。</p>

<p><code>not</code> キーワードは、クエリの結果を否定します。例えば、"<span style="font-family: monospace;">all</span><code> and (not color)</code>" のクエリは、モノクロデバイスではメディアタイプに関係なく true になります。</p>

<p><code>only</code> キーワードは、メディアクエリに対応していない古いブラウザからスタイルシートを隠します:</p>

<pre>&lt;link rel="stylesheet" media="only screen and (color)" href="example.css" /&gt;
</pre>

<h3 id="Pseudo-BNF_(for_those_of_you_that_like_that_kind_of_thing)" name="Pseudo-BNF_(for_those_of_you_that_like_that_kind_of_thing)">擬似 BNF (この表記を好む方のために)</h3>

<pre>media_query_list: &lt;media_query&gt; [, &lt;media_query&gt; ]*
media_query: [[only | not]? &lt;media_type&gt; [ and &lt;expression&gt; ]*]
  | &lt;expression&gt; [ and &lt;expression&gt; ]*
expression: ( &lt;media_feature&gt; [: &lt;value&gt;]? )
media_type: all | aural | braille | handheld | print |
  projection | screen | tty | tv | embossed
media_feature: width | min-width | max-width
  | height | min-height | max-height
  | device-width | min-device-width | max-device-width
  | device-height | min-device-height | max-device-height
  | aspect-ratio | min-aspect-ratio | max-aspect-ratio
  | device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio
  | color | min-color | max-color
  | color-index | min-color-index | max-color-index
  | monochrome | min-monochrome | max-monochrome
  | resolution | min-resolution | max-resolution
  | scan | grid</pre>

<p>メディアクエリは大文字と小文字を区別しません。メディアクエリに書かれた未知のメディアタイプは常に false になります。</p>

<div class="note"><strong>注記:</strong> 式 (expression) の前後には括弧が必要です。括弧を書かないとエラーになります。</div>

<h2 id="Media features" name="Media features">メディア特性</h2>

<p>ほとんどのメディア特性には、特性が式の値 "以上" または "以下" であることを明示的に制約する "min-" または "max-" 前置詞を付けられます。これは、HTML や XML に干渉する "&lt;" および "&gt;" 記号の使用を避けるためのものです。値を指定せずにメディア特性を使用した場合、特性の値が 0 でなくても、式の結果は true になります。</p>

<div class="note"><strong>注記:</strong> メディア特性がブラウザを実行中のデバイスに適用されない場合、メディア特性に記述された式の値は常に false になります。例えば、音声デバイスに対するアスペクト比の問い合わせは常に false になります。</div>

<h3 id="color">color</h3>

<p><strong>値:</strong> {{cssxref("&lt;color&gt;")}}<br>
 <strong>メディア:</strong> {{cssxref("Media/Visual", "visual")}}<br>
 <strong>min/max 前置詞の使用:</strong> 可</p>

<p>出力デバイスのカラーコンポーネントあたりのビット数を指示します。デバイスがカラー表示可能なものでない場合、この値は 0 になります。</p>

<div class="note"><strong>注記:</strong> カラーコンポーネントがカラーコンポーネントごとに異なるビット数を持つ場合、最も小さな数値が使用されます。例えば、ディスプレイが、青は 5 ビット、赤と緑は 6 ビットのカラーコンポーネントで構成されている場合、デバイスはカラーコンポーネントあたり 5 ビット使用するものとみなされ、color テーブルではビット数の最小値が使用されます。</div>

<h4 id="Examples" name="Examples">例</h4>

<p>すべてのカラー表示可能なデバイスにスタイルシートを適用するには:</p>

<pre>@media all and (color) { ... }
</pre>

<p>カラーコンポーネントあたり最低 4 ビットのデバイスにスタイルシートを適用するには:</p>

<pre>@media all and (min-color: 4) { ... }
</pre>

<h3 id="color-index">color-index</h3>

<p><strong>値:</strong> 整数<br>
 <strong>メディア:</strong> {{cssxref("Media/Visual", "visual")}}<br>
 <strong>min/max 前置詞の使用:</strong> 可</p>

<p>出力デバイスのカラー検索テーブルのエントリ数を指示します。</p>

<h4 id="Examples" name="Examples">例</h4>

<p>インデックス化されたカラーを使用するすべてのデバイスにスタイルシートを適用するよう指示するには:</p>

<pre>@media all and (color-index) { ... }
</pre>

<p>最低 256 色を持つインデックス化されたカラーデバイスにスタイルシートを適用するには:</p>

<pre>&lt;link rel="stylesheet" media="all and (min-color-index: 256)" href="http://foo.bar.com/stylesheet.css" /&gt;
</pre>

<h3 id="aspect-ratio">aspect-ratio</h3>

<p><strong>値:</strong> 整数 / 整数<br>
 <strong>メディア:</strong> {{cssxref("Media/Visual", "visual")}}, {{cssxref("Medium/Tactile", "tactile")}}<br>
 <strong>min/max 前置詞の使用:</strong> 可</p>

<p>出力デバイスの対象とする表示領域のアスペクト比を記述します。この値は、スラッシュ文字 ("/") で区切られた 2 つの正の整数です。これは、水平ピクセル数 / 垂直ピクセル数を表します。</p>

<h4 id="Examples" name="Examples">例</h4>

<p>以下は、表示領域が、その高さよりも幅が広い場合に使用される、特別なスタイルシートを選択します。</p>

<pre>@media screen and (min-aspect-ratio: 1/1) { ... }</pre>

<p>これは、アスペクト比が 1:1 以上の場合のスタイルを選択します。</p>

<h3 id="device-aspect-ratio">device-aspect-ratio</h3>

<p><strong>値:</strong> 整数 / 整数<br>
 <strong>メディア:</strong> {{cssxref("Media/Visual", "visual")}}, {{cssxref("Medium/Tactile", "tactile")}}<br>
 <strong>min/max 前置詞の使用:</strong> 可</p>

<p>出力デバイスのアスペクト比を記述します。この値は、スラッシュ文字 ("/") で区切られた 2 つの正の整数です。これは、水平ピクセル数 / 垂直ピクセル数を表します。</p>

<h4 id="Examples" name="Examples">例</h4>

<p>以下は、ワイドスクリーンディスプレイに使用する特別なスタイルシートを選択します。</p>

<pre>@media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) { ... }</pre>

<p>これは、アスペクト比が 16:9 または 16:10 の場合のスタイルを選択します。</p>

<h3 id="device-height">device-height</h3>

<p><strong>値:</strong> {{cssxref("&lt;length&gt;")}}<br>
 <strong>メディア:</strong> {{cssxref("Media/Visual", "visual")}}, {{cssxref("Medium/Tactile", "tactile")}}<br>
 <strong>min/max 前置詞の使用:</strong> 可</p>

<p>出力デバイスの高さを記述します (ドキュメントウィンドウなどの描画領域ではなく、スクリーンや用紙全体を意味します)。</p>

<h4 id="Examples" name="Examples">例</h4>

<p>幅 800 ピクセル未満のスクリーンに表示されるドキュメントにスタイルシートを適用するには:</p>

<pre>&lt;link rel="stylesheet" media="screen and (max-device-width: 799px)" /&gt;
</pre>

<h3 id="device-width">device-width</h3>

<p><strong>値:</strong> {{cssxref("&lt;length&gt;")}}<br>
 <strong>メディア:</strong> {{cssxref("Media/Visual", "visual")}}, {{cssxref("Medium/Tactile", "tactile")}}<br>
 <strong>min/max 前置詞の使用:</strong> 可</p>

<p>出力デバイスの幅を記述します (ドキュメントウィンドウなどの描画領域ではなく、スクリーンや用紙全体を意味します)。</p>

<h3 id="grid">grid</h3>

<p><strong>値:</strong> 整数<br>
 <strong>メディア:</strong> all<br>
 <strong>min/max 前置詞の使用:</strong> 不可</p>

<p>出力デバイスがグリッドデバイスとビットマップデバイスのどちらなのかを決定します。デバイスがグリッドベース (tty ターミナルや電話機のディスプレイなど表示部が一行ずつ) の場合、値は 1 になります。ビットマップデバイスの場合は 0 になります。</p>

<div class="note"><strong>注記:</strong> Gecko (および Firefox) は現在グリッドデバイスに対応していないため、このメディア特性はサポートされていません。</div>

<h4 id="Examples" name="Examples">例</h4>

<p>ディスプレイの表示幅が 15 文字以下の handheld デバイスにスタイルを適用するには:</p>

<pre>@media handheld and (grid) and (max-width: 15em) { ... }
</pre>

<div class="note"><strong>注記:</strong> "em" 単位はグリッドデバイスで特別な意味を持ちます。"em" 単位の正確な幅を特定することができないため、1em はグリッドセル一つ分の幅と高さであると仮定されます。</div>

<h3 id="height">height</h3>

<p><strong>値:</strong> {{cssxref("&lt;length&gt;")}}<br>
 <strong>メディア:</strong> {{cssxref("Media/Visual", "visual")}}, {{cssxref("Medium/Tactile", "tactile")}}<br>
 <strong>min/max 前置詞の使用:</strong> 可</p>

<p><code>height</code> メディア特性には、出力デバイスの描画域の高さを記述します (viewport の高さやプリンタのページ印刷領域の高さなど)。</p>

<div class="note"><strong>注記:</strong> ユーザがウィンドウの大きさを変更すると、<code>width</code> や <code>height</code> メディア特性を使用したメディアクエリを基に、Firefox がスタイルシートを適切なものに切り替えます。</div>

<h3 id="monochrome">monochrome</h3>

<p><strong>値:</strong> 整数<br>
 <strong>メディア:</strong> {{cssxref("Media/Visual", "visual")}}<br>
 <strong>min/max 前置詞の使用:</strong> 可</p>

<p>モノクロ (グレースケール) デバイス上のピクセルあたりのビット数を指示します。デバイスがモノクローム表示でない場合、デバイスの値は 0 になります。</p>

<h4 id="Examples" name="Examples">例</h4>

<p>すべてのモノクロデバイスにスタイルシートを適用するには:</p>

<pre>@media all and (monochrome) { ... }
</pre>

<p>ピクセルあたり最低 8 ビットのモノクロデバイスにスタイルシートを適用するには:</p>

<pre>@media all and (min-monochrome: 8) { ... }
</pre>

<h3 id="orientation">orientation</h3>

<p><strong>値:</strong> <code>landscape</code> | <code>portrait</code><br>
 <strong>メディア:</strong> {{cssxref("Media/Visual", "visual")}}<br>
 <strong>min/max 前置詞の使用:</strong> 不可</p>

<p>デバイスが横置き (landscape: 高さより幅が広い表示) と縦置き (portrait: 幅より高さが高い表示) のどちらのモードなのかを指示します。</p>

<h4 id="Examples" name="Examples">例</h4>

<p>縦置き方向のときにだけスタイルシートを適用するには:</p>

<pre>@media all and (orientation: portrait) { ... }</pre>

<h3 id="resolution">resolution</h3>

<p><strong>値:</strong> {{cssxref("&lt;resolution&gt;")}}<br>
 <strong>メディア:</strong> {{cssxref("Media/Bitmap", "bitmap")}}<br>
 <strong>min/max 前置詞の使用:</strong> 可</p>

<p>出力デバイスの解像度 (ピクセル密度) を指示します。解像度は、1 インチあたりのドット数 (dpi) または 1 センチメートルあたりのドット数 (dpcm) で指定されます。</p>

<h4 id="Examples" name="Examples">例</h4>

<p>解像度が最低 300 dpi のデバイスにスタイルシートを適用するには:</p>

<pre>@media print and (min-resolution: 300dpi) { ... }
</pre>

<h3 id="scan">scan</h3>

<p><strong>値:</strong> <code>progressive</code> | <code>interlace</code><br>
 <strong>メディア:</strong> {{cssxref("Media/TV", "tv")}}<br>
 <strong>min/max 前置詞の使用:</strong> 不可</p>

<p>テレビ出力デバイスの走査方式を記述します。</p>

<div class="note"><strong>注記:</strong> Gecko (および Firefox) は現在 <code>tv</code> メディアタイプをサポートしていないため、このメディア特性も同様にサポートされていません。</div>

<h4 id="Examples" name="Examples">例</h4>

<p>プログレッシブ方式で走査するテレビにだけスタイルシートを適用するには:</p>

<pre>@media tv and (scan: progressive) { ... }
</pre>

<h3 id="width">width</h3>

<p><strong>値:</strong> {{cssxref("&lt;length&gt;")}}<br>
 <strong>メディア:</strong> {{cssxref("Media/Visual", "visual")}}, {{cssxref("Medium/Tactile", "tactile")}}<br>
 <strong>min/max 前置詞の使用:</strong> 可</p>

<p><code>width</code> メディア特性には、出力デバイスの描画域の幅を記述します (viewport の幅やプリンタのページ印刷領域の幅など)。</p>

<div class="note"><strong>注記:</strong> ユーザがウィンドウの大きさを変更すると、<code>width</code> や <code>height</code> メディア特性を使用したメディアクエリを基に、Firefox がスタイルシートを適切なものに切り替えます。</div>

<h4 id="Examples" name="Examples">例</h4>

<p>幅 20 em 以上の handheld デバイスまたは screen デバイスにスタイルシートを指定したいときは:</p>

<pre>@media handheld and (min-width: 20em), screen and (min-width: 20em) { ... }
</pre>

<p>次のメディアクエリは、印刷された幅が 8.5 インチ以上のメディアに適用されるスタイルシートを指定します:</p>

<pre>&lt;link rel="stylesheet" media="print and (min-width: 8.5in)"
    href="http://foo.com/mystyle.css" /&gt;
</pre>

<p>次のメディアクエリは、viewport の幅が 500 ピクセルから 800 ピクセルの場合に使用されるスタイルシートを指定します:</p>

<pre>@media screen and (min-width: 500px) and (max-width: 800px) { ... }
</pre>

<h2 id="Mozilla-specific media features" name="Mozilla-specific media features">Mozilla 独自のメディア特性</h2>

<p>{{ gecko_minversion_header("1.9.2") }}</p>

<p>Mozilla はいくつかの Gecko 独自のメディア特性を提供しています。これらの一部は公式のメディア特性として提案される予定です。</p>

<h3 id="-moz-images-in-menus">-moz-images-in-menus</h3>

<p><strong>値:</strong> 整数<br>
 <strong>メディア:</strong> {{cssxref("Media/Visual", "visual")}}<br>
 <strong>min/max 前置詞の使用:</strong> 不可</p>

<p>メニューに画像が表示できるデバイスの場合、この値は 1 になります。そうでない場合は 0 になります。これは、{{ cssxref(":-moz-system-metric(images-in-menus)") }} CSS 擬似クラスに相当します。</p>

<h3 id="-moz-mac-graphite-theme">-moz-mac-graphite-theme</h3>

<p><strong>値:</strong> 整数<br>
 <strong>メディア:</strong> {{cssxref("Media/Visual", "visual")}}<br>
 <strong>min/max 前置詞の使用:</strong> 不可</p>

<p>Mac OS X で、ユーザがデバイスのアピアランスを "Graphite" に設定している場合、この値は 1 になります。ユーザが標準の青色のアピアランスを使用しているか Mac OS X でない場合、この値は 0 になります。</p>

<p>これは、{{ cssxref(":-moz-system-metric(mac-graphite-theme)") }} CSS 擬似クラスに相当します。</p>

<h3 id="-moz-maemo-classic">-moz-maemo-classic</h3>

<p><strong>値:</strong> 整数<br>
 <strong>メディア:</strong> {{cssxref("Media/Visual", "visual")}}<br>
 <strong>min/max 前置詞の使用:</strong> 不可</p>

<p>ユーザが Maemo でオリジナルのテーマを使用している場合、この値は 1 になります。新しい Fremantle テーマを使用している場合は 0 になります。</p>

<p>これは、{{ cssxref(":-moz-system-metric(maemo-classic)") }} CSS 擬似クラスに相当します。</p>

<h3 id="-moz-scrollbar-end-backward">-moz-scrollbar-end-backward</h3>

<p><strong>値:</strong> 整数<br>
 <strong>メディア:</strong> {{cssxref("Media/Visual", "visual")}}<br>
 <strong>min/max 前置詞の使用:</strong> 不可</p>

<p>デバイスのユーザインタフェースが、戻る矢印ボタンをスクロールバーの終わりに表示する場合、この値は 1 になります。そうでない場合は 0 になります。</p>

<p>これは、{{ cssxref(":-moz-system-metric(scrollbar-end-backward)") }} CSS 擬似クラスに相当します。</p>

<h3 id="-moz-scrollbar-end-forward">-moz-scrollbar-end-forward</h3>

<p><strong>値:</strong> 整数<br>
 <strong>メディア:</strong> {{cssxref("Media/Visual", "visual")}}<br>
 <strong>min/max 前置詞の使用:</strong> 不可</p>

<p>デバイスのユーザインタフェースが、進む矢印ボタンをスクロールバーの終わりに表示する場合、この値は 1 になります。そうでない場合は 0 になります。</p>

<p>これは、{{ cssxref(":-moz-system-metric(scrollbar-end-forward)") }} CSS 擬似クラスに相当します。</p>

<h3 id="-moz-scrollbar-start-backward">-moz-scrollbar-start-backward</h3>

<p><strong>値:</strong> 整数<br>
 <strong>メディア:</strong> {{cssxref("Media/Visual", "visual")}}<br>
 <strong>min/max 前置詞の使用:</strong> 不可</p>

<p>デバイスのユーザインタフェースが、戻る矢印ボタンをスクロールバーの始めに表示する場合、この値は 1 になります。そうでない場合は 0 になります。</p>

<p>これは、{{ cssxref(":-moz-system-metric(scrollbar-start-backward)") }} CSS 擬似クラスに相当します。</p>

<h3 id="-moz-scrollbar-start-forward">-moz-scrollbar-start-forward</h3>

<p><strong>値:</strong> 整数<br>
 <strong>メディア:</strong> {{cssxref("Media/Visual", "visual")}}<br>
 <strong>min/max 前置詞の使用:</strong> 不可</p>

<p>デバイスのユーザインタフェースが、進む矢印ボタンをスクロールバーの始めに表示する場合、この値は 1 になります。そうでない場合は 0 になります。</p>

<p>これは、{{ cssxref(":-moz-system-metric(scrollbar-start-forward)") }} CSS 擬似クラスに相当します。</p>

<h3 id="-moz-scrollbar-thumb-proportional">-moz-scrollbar-thumb-proportional</h3>

<p><strong>値:</strong> 整数<br>
 <strong>メディア:</strong> {{cssxref("Media/Visual", "visual")}}<br>
 <strong>min/max 前置詞の使用:</strong> 不可</p>

<p>デバイスのユーザインタフェースが、スクロールバーのトンボのサイズを変化させる (ドキュメント全体に対する表示部分の割り合いによる) 場合、この値は 1 になります。そうでない場合は 0 になります。</p>

<p>これは、{{ cssxref(":-moz-system-metric(scrollbar-thumb-proportional)") }} CSS 擬似クラスに相当します。</p>

<h3 id="-moz-touch-enabled">-moz-touch-enabled</h3>

<p><strong>値:</strong> 整数<br>
 <strong>メディア:</strong> {{cssxref("Media/Visual", "visual")}}<br>
 <strong>min/max 前置詞の使用:</strong> 不可</p>

<p>デバイスが (タッチスクリーンの) タッチイベントをサポートしている場合、この値は 1 になります。そうでない場合は 0 になります。</p>

<p>これは、{{ cssxref(":-moz-system-metric(touch-enabled)") }} CSS 擬似クラスに相当します。</p>

<h4 id="Examples" name="Examples">例</h4>

<p>例えば、ユーザがタッチスクリーンデバイスで操作している場合に、指で押しやすくするため、ボタンを大きめに描画することが考えられます。</p>

<h3 id="-moz-windows-classic">-moz-windows-classic</h3>

<p><strong>値:</strong> 整数<br>
 <strong>メディア:</strong> {{cssxref("Media/Visual", "visual")}}<br>
 <strong>min/max 前置詞の使用:</strong> 不可</p>

<p>ユーザが Windows でテーマを適用していない (uxtheme を使用する代わりにクラシックモードで使用している) 場合、この値は 1 になります。そうでない場合は 0 になります。</p>

<p>これは、{{ cssxref(":-moz-system-metric(windows-classic)") }} CSS 擬似クラスに相当します。</p>

<h3 id="-moz-windows-compositor">-moz-windows-compositor</h3>

<p><strong>値:</strong> 整数<br>
 <strong>メディア:</strong> {{cssxref("Media/Visual", "visual")}}<br>
 <strong>min/max 前置詞の使用:</strong> 不可</p>

<p>ユーザが Windows で DWM compositor を使用している場合、この値は 1 になります。そうでない場合は 0 になります。</p>

<p>これは、{{ cssxref(":-moz-system-metric(windows-compositor)") }} CSS 擬似クラスに相当します。</p>

<h3 id="-moz-windows-default-theme">-moz-windows-default-theme</h3>

<p><strong>値:</strong> 整数<br>
 <strong>メディア:</strong> {{cssxref("Media/Visual", "visual")}}<br>
 <strong>min/max 前置詞の使用:</strong> 不可</p>

<p>ユーザが現在 Windows の既定のテーマ (Luna, Royale, Zune または Vista Basic, Vista Advanced, Aero Glass を含む Aero) の一つを使用している場合、この値は 1 になります。そうでない場合は 0 になります。</p>

<p>これは、{{ cssxref(":-moz-system-metric(windows-default-theme)") }} CSS 擬似クラスに相当します。</p>

<h2 id="See_also" name="See_also">参照</h2>

<ul>
 <li><a class="external" href="http://www.w3.org/TR/css3-mediaqueries/" title="http://www.w3.org/TR/css3-mediaqueries/">CSS 3 media query specification</a></li>
 <li><a class="internal" href="/ja/CSS/@media" title="ja/CSS/@media">Media types</a></li>
</ul>