Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

@media

概要

CSS@media @-規則は、波括弧 "{...}" で囲まれた CSS ブロックにネストされた規則セットと、メディアクエリで定義した条件を関連づけます。@media @-規則は CSS のトップレベルだけでなく、CSS 条件付きグループ規則の内部でも使用できます。

@media @-規則は、CSS オブジェクトモデルの CSSMediaRule インターフェイスを通してアクセスできます。

構文

@media <media-query-list> {
  <group-rule-body>
}

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

メディアタイプ

注記: 現在、Firefox には print および screen メディアタイプしか実装されていません。 アドオンの FullerScreen 拡張をインストールすると projection メディアタイプのサポートが有効になります。
all
すべてのデバイスに適合します。
print
印刷されたものや印刷プレビューに表示されるドキュメント向けです。ページ付けしたメディア固有の書式の問題については、ページ付けしたメディアおよびGetting Started チュートリアルの Media のセクションで調べてください。
screen
主に、カラーのコンピュータ画面向けです。
speech
スピーチ・シンセサイザ向けです。注記: CSS2 には、同じ目的の 'aural' と呼ばれる、これと似たメディアタイプがあります。詳細は aural スタイルシートの付録を参照してください。
注記: CSS2.1 および Media Queries 3 では追加で定義されているメディアタイプがいくつか (tty, tv, projection, handheld, braille, embossed, aural) ありますが、これらは Media Queries 4 で非推奨とされたため、使用すべきではありません。

メディア特性

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

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

@media print {
  body { font-size: 10pt }
}
@media screen {
  body { font-size: 13px }
}
@media screen, print {
  body { line-height: 1.2 }
}

仕様

仕様書 策定状況 コメント
Web Compatibility Standard
CSS Media Queries の定義
現行の標準 メディア特性 -webkit-device-pixel-ratio および -webkit-transform-3d を標準化。
CSS Conditional Rules Module Level 3
@media の定義
勧告候補 @media 規則の基本的な構文を定義。
Media Queries Level 4
@media の定義
草案 メディア特性 scripting, pointer, hover, light-level, update-frequency, overflow-block, overflow-inline を追加。
screen, print, speech, all を除くすべてのメディアタイプを非推奨に指定。
Media Queries
@media の定義
勧告 変更なし
CSS Level 2 (Revision 1)
@media の定義
勧告 最初期の定義

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本サポート (all, print, screen) 1.0 1.0 (1.7 or earlier) 6.0 9.2 1.3
speech 未サポート 未サポート 未サポート 9.2 未サポート
メディア特性 1.0 1.0 (1.7 or earlier) 9.0 9.2 1.3
display-mode メディア特性 ? 47 (47) ? ? ?
機能 Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本サポート (all, print, screen) 1.0 1.0 (1.7) (有) 9.0 3.1
speech 未サポート 未サポート 未サポート 9.0 未サポート
メディア特性 1.0 1.0 (1.7) (有) 9.0 3.1
display-mode メディア特性 ? (有) ? ? ?

関連情報

ドキュメントのタグと貢献者

タグ: 
 このページの貢献者: yyss, ethertank, Marsf
 最終更新者: yyss,