Revision 1133119 of @media

<div>{{CSSRef}}</div>

<h2 id="Summary" name="Summary">概要</h2>

<p><a href="/ja/docs/CSS" title="CSS">CSS</a> の <code>@media</code> <a href="/ja/docs/CSS/At-rule" title="CSS/At-rule">@-規則</a>は、波括弧 "{...}" で囲まれた CSS ブロックにネストされた規則セットと、<a href="/ja/docs/CSS/Media_queries" title="CSS media queries">メディアクエリ</a>で定義した条件を関連づけます。<code>@media</code> @-規則は CSS のトップレベルだけでなく、<a href="/ja/docs/CSS/At-rule#Conditional_Group_Rules" title="CSS/At-rule#Conditional_Group_Rules">CSS 条件付きグループ規則</a>の内部でも使用できます。</p>

<p><code>@media</code> @-規則は、CSS オブジェクトモデルの {{domxref("CSSMediaRule")}} インターフェイスを通してアクセスできます。</p>

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

<pre class="syntaxbox">
{{csssyntax}}</pre>

<p><code>&lt;media-query&gt;</code> は、メディアタイプやいくつかのメディア特性で構成されます。</p>

<h2 id="Media_types" name="Media_types">メディアタイプ</h2>

<div class="note"><strong>注記:</strong> 現在、Firefox には <code>print</code> および <code>screen</code> メディアタイプしか実装されていません。 アドオンの <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/4650" title="https://addons.mozilla.org/en-US/firefox/addon/4650">FullerScreen</a> 拡張をインストールすると <code>projection</code> メディアタイプのサポートが有効になります。</div>

<dl>
 <dt>all</dt>
 <dd>すべてのデバイスに適合します。</dd>
 <dt>print</dt>
 <dd>印刷されたものや印刷プレビューに表示されるドキュメント向けです。ページ付けしたメディア固有の書式の問題については、<a href="/ja/docs/CSS/Paged_Media" title="CSS/Paged_Media">ページ付けしたメディア</a>および<a href="/ja/docs/CSS/Getting_Started/Media" title="CSS/Getting_Started/Media">Getting Started チュートリアルの Media</a> のセクションで調べてください。</dd>
 <dt>screen</dt>
 <dd>主に、カラーのコンピュータ画面向けです。</dd>
 <dt>speech</dt>
 <dd>スピーチシンセサイザ向けです。注記: CSS2 には、同じ目的の 'aural' と呼ばれる、これと似たメディアタイプがあります。詳細は aural スタイルシートの付録を参照してください。</dd>
</dl>

<div class="note"><strong>注記:</strong> CSS2.1 および Media Queries 3 では追加で定義されているメディアタイプがいくつか (<code>tty</code>, <code>tv</code>, <code>projection</code>, <code>handheld</code>, <code>braille</code>, <code>embossed</code>, <code>aural</code>) ありますが、これらは <a href="https://dev.w3.org/csswg/mediaqueries/#media-types">Media Queries 4</a> で非推奨とされたため、使用すべきではありません。</div>

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

<p>それぞれの<em>メディア特性</em>は、ブラウザやデバイスの特定の特性を調査します。</p>

<table>
 <thead>
  <tr>
   <th>名称</th>
   <th>概要</th>
   <th>備考</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><a href="/ja/docs/Web/CSS/@media/width"><code>width</code></a></td>
   <td>ビューポートの幅</td>
   <td>&nbsp;</td>
  </tr>
  <tr>
   <td><a href="/ja/docs/Web/CSS/@media/height"><code>height</code></a></td>
   <td>ビューポートの高さ</td>
   <td>&nbsp;</td>
  </tr>
  <tr>
   <td><a href="/ja/docs/Web/CSS/@media/aspect-ratio"><code>aspect-ratio</code></a></td>
   <td>ビューポートの幅と高さのアスペクト比</td>
   <td>&nbsp;</td>
  </tr>
  <tr>
   <td><a href="/ja/docs/Web/CSS/@media/orientation"><code>orientation</code></a></td>
   <td>ビューポートの向き</td>
   <td>&nbsp;</td>
  </tr>
  <tr>
   <td><a href="/ja/docs/Web/CSS/@media/resolution"><code>resolution</code></a></td>
   <td>出力デバイスの画素密度</td>
   <td>&nbsp;</td>
  </tr>
  <tr>
   <td><a href="/ja/docs/Web/CSS/@media/scan"><code>scan</code></a></td>
   <td>出力デバイスのスキャン方式</td>
   <td>&nbsp;</td>
  </tr>
  <tr>
   <td><a href="/ja/docs/Web/CSS/@media/grid"><code>grid</code></a></td>
   <td>グリッドデバイスであるか、ビットマップデバイスであるか?</td>
   <td>&nbsp;</td>
  </tr>
  <tr>
   <td><a href="/ja/docs/Web/CSS/@media/update-frequency"><code>update-frequency</code></a></td>
   <td>出力デバイスが、コンテンツの表示をどれだけの頻度で更新できるか</td>
   <td>Media Queries Level 4 で追加</td>
  </tr>
  <tr>
   <td><a href="/ja/docs/Web/CSS/@media/overflow-block"><code>overflow-block</code></a></td>
   <td>ブロック軸に沿ってビューポートからはみ出すコンテンツを、出力デバイスはどのように扱うか?</td>
   <td>Media Queries Level 4 で追加</td>
  </tr>
  <tr>
   <td><a href="/ja/docs/Web/CSS/@media/overflow-inline"><code>overflow-inline</code></a></td>
   <td>インライン軸に沿ってビューポートからはみ出したコンテンツはスクロールできるか?</td>
   <td>Media Queries Level 4 で追加</td>
  </tr>
  <tr>
   <td><a href="/ja/docs/Web/CSS/@media/color"><code>color</code></a></td>
   <td>出力デバイスの色成分ごとのビット数、あるいはカラー非対応デバイスである場合は 0</td>
   <td>&nbsp;</td>
  </tr>
  <tr>
   <td><a href="/ja/docs/Web/CSS/@media/color-index"><code>color-index</code></a></td>
   <td>出力デバイスのカラールックアップテーブルのエントリ数、あるいはそのようなテーブルを使用しないデバイスである場合は 0</td>
   <td>&nbsp;</td>
  </tr>
  <tr>
   <td><code><a href="/ja/docs/Web/CSS/@media/display-mode">display-mode</a></code></td>
   <td>アプリマニフェストの <a href="/ja/docs/Web/Manifest#display">display メンバ</a>で指定する、アプリケーションのディスプレイモード</td>
   <td><a href="https://w3c.github.io/manifest/#the-display-mode-media-feature">Web App Manifest 仕様</a>で定義</td>
  </tr>
  <tr>
   <td><a href="/ja/docs/Web/CSS/@media/monochrome"><code>monochrome</code></a></td>
   <td>出力デバイスのモノクロームフレームバッファのビット数、あるいはモノクロームのデバイスではない場合は 0</td>
   <td>&nbsp;</td>
  </tr>
  <tr>
   <td><a href="/ja/docs/Web/CSS/@media/inverted-colors"><code>inverted-colors</code></a></td>
   <td>ユーザエージェントまたは OS が色を反転しているか?</td>
   <td>Media Queries Level 4 で追加</td>
  </tr>
  <tr>
   <td><a href="/ja/docs/Web/CSS/@media/pointer"><code>pointer</code></a></td>
   <td>第一入力装置がポインティングデバイスであるか、およびそうである場合は、デバイスの精度はどの程度か?</td>
   <td>Media Queries Level 4 で追加</td>
  </tr>
  <tr>
   <td><a href="/ja/docs/Web/CSS/@media/hover"><code>hover</code></a></td>
   <td>第一入力装置は、ユーザが要素の上にホバーする{{Yakuchu("マウスポインタを載せるなど")}}ことができるか?</td>
   <td>Media Queries Level 4 で追加</td>
  </tr>
  <tr>
   <td><a href="/ja/docs/Web/CSS/@media/any-pointer"><code>any-pointer</code></a></td>
   <td>使用可能な入力装置にポインティングデバイスが含まれているか、およびそうである場合は、デバイスの精度はどの程度か?</td>
   <td>&nbsp;</td>
  </tr>
  <tr>
   <td><a href="/ja/docs/Web/CSS/@media/any-hover"><code>any-hover</code></a></td>
   <td>使用可能な入力装置のいずれかは、ユーザが要素の上にホバーする{{Yakuchu("マウスポインタを載せるなど")}}ことができるか?</td>
   <td>&nbsp;</td>
  </tr>
  <tr>
   <td><a href="/ja/docs/Web/CSS/@media/light-level"><code>light-level</code></a></td>
   <td>現在の環境光の強さ</td>
   <td>Media Queries Level 4 で追加</td>
  </tr>
  <tr>
   <td><a href="/ja/docs/Web/CSS/@media/scripting"><code>scripting</code></a></td>
   <td>スクリプティング (JavaScript など) が可能か?</td>
   <td>Media Queries Level 4 で追加</td>
  </tr>
  <tr>
   <td><a href="/ja/docs/Web/CSS/@media/device-width"><code>device-width</code></a> {{obsolete_inline}}</td>
   <td>出力デバイスの表示面の幅</td>
   <td>Media Queries Level 4 で非推奨</td>
  </tr>
  <tr>
   <td><a href="/ja/docs/Web/CSS/@media/device-height"><code>device-height</code></a> {{obsolete_inline}}</td>
   <td>出力デバイスの表示面の高さ</td>
   <td>Media Queries Level 4 で非推奨</td>
  </tr>
  <tr>
   <td><a href="/ja/docs/Web/CSS/@media/device-aspect-ratio"><code>device-aspect-ratio</code></a> {{obsolete_inline}}</td>
   <td>出力デバイスの幅と高さのアスペクト比</td>
   <td>Media Queries Level 4 で非推奨</td>
  </tr>
  <tr>
   <td><a href="/ja/docs/Web/CSS/@media/-webkit-device-pixel-ratio"><code>-webkit-device-pixel-ratio</code></a> {{non-standard_inline}}</td>
   <td>CSS ピクセルあたりの、物理デバイスのピクセル数</td>
   <td>非標準であり、WebKit/Blink 特有。可能であれば、代わりに <a href="/ja/docs/Web/CSS/@media/resolution"><code>resolution</code></a> メディア特性を使用する。</td>
  </tr>
  <tr>
   <td><a href="/ja/docs/Web/CSS/@media/-webkit-transform-3d"><code>-webkit-transform-3d</code></a> {{non-standard_inline}}</td>
   <td>CSS 3D {{cssxref("transform")}} をサポートするか?</td>
   <td>非標準であり、WebKit/Blink 固有。</td>
  </tr>
  <tr>
   <td><a href="/ja/docs/Web/CSS/@media/-webkit-transform-2d"><code>-webkit-transform-2d</code></a> {{non-standard_inline}}</td>
   <td>CSS 2D {{cssxref("transform")}} をサポートするか?</td>
   <td>非標準であり、WebKit 固有。</td>
  </tr>
  <tr>
   <td><a href="/ja/docs/Web/CSS/@media/-webkit-transition"><code>-webkit-transition</code></a> {{non-standard_inline}}</td>
   <td>CSS {{cssxref("transition")}} をサポートするか?</td>
   <td>非標準であり、WebKit 固有。</td>
  </tr>
  <tr>
   <td><a href="/ja/docs/Web/CSS/@media/-webkit-animation"><code>-webkit-animation</code></a> {{non-standard_inline}}</td>
   <td>CSS {{cssxref("animation")}} をサポートするか?</td>
   <td>非標準であり、WebKit 固有。</td>
  </tr>
 </tbody>
</table>

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

<pre class="brush: css">
@media print {
  body { font-size: 10pt }
}
@media screen {
  body { font-size: 13px }
}
@media screen, print {
  body { line-height: 1.2 }
}
</pre>

<h2 id="Specifications" name="Specifications">仕様</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">仕様書</th>
   <th scope="col">策定状況</th>
   <th scope="col">コメント</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('Compat', '#css-media-queries', 'CSS Media Queries')}}</td>
   <td>{{Spec2('Compat')}}</td>
   <td>メディア特性 <code>-webkit-device-pixel-ratio</code> および <code>-webkit-transform-3d</code> を標準化。</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Conditional', '#at-media', '@media')}}</td>
   <td>{{Spec2('CSS3 Conditional')}}</td>
   <td><code>@media</code> 規則の基本的な構文を定義。</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS4 Media Queries', '#media', '@media')}}</td>
   <td>{{Spec2('CSS4 Media Queries')}}</td>
   <td>メディア特性 <code>scripting</code>, <code>pointer</code>, <code>hover</code>, <code>light-level</code>, <code>update-frequency</code>, <code>overflow-block</code>, <code>overflow-inline</code> を追加。<br />
    <code>screen</code>, <code>print</code>, <code>speech</code>, <code>all</code> を除くすべてのメディアタイプを非推奨に指定。</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Media Queries', '#media0', '@media')}}</td>
   <td>{{Spec2('CSS3 Media Queries')}}</td>
   <td>変更なし</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'media.html#at-media-rule', '@media')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>最初期の定義</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ実装状況</h2>

<div>{{CompatibilityTable}}</div>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>機能</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>基本サポート (<code>all</code>, <code>print</code>, <code>screen</code>)</td>
   <td>1.0</td>
   <td>{{CompatGeckoDesktop(1.7)}}</td>
   <td>6.0</td>
   <td>9.2</td>
   <td>1.3</td>
  </tr>
  <tr>
   <td><code>speech</code></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>9.2</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td>メディア特性</td>
   <td>1.0</td>
   <td>{{CompatGeckoDesktop(1.7)}}</td>
   <td>9.0</td>
   <td>9.2</td>
   <td>1.3</td>
  </tr>
  <tr>
   <td><code>display-mode</code> メディア特性</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoDesktop(47)}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>機能</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>基本サポート (<code>all</code>, <code>print</code>, <code>screen</code>)</td>
   <td>1.0</td>
   <td>{{CompatGeckoMobile(1.7)}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>9.0</td>
   <td>3.1</td>
  </tr>
  <tr>
   <td><code>speech</code></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>9.0</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td>メディア特性</td>
   <td>1.0</td>
   <td>{{CompatGeckoMobile(1.7)}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>9.0</td>
   <td>3.1</td>
  </tr>
  <tr>
   <td><code>display-mode</code> メディア特性</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="See_also" name="See_also">関連情報</h2>

<ul>
 <li><a href="/ja/docs/CSS/Media_queries" title="CSS/Media queries">メディアクエリ</a></li>
 <li>CSSOM {{domxref("CSSMediaRule")}}</li>
</ul>