@media

概要

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

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

構文

@media <media-query-list> {
  <group-rule-body>
}
where 
<media-query-list> = <media-query>#
where 
<media-query> = <media-condition> | [ not | only ]? <media-type> [ and <media-condition-without-or> ]?
where 
<media-condition> = <media-not> | <media-and> | <media-or> | <media-in-parens>
<media-type> = <ident>
<media-condition-without-or> = <media-not> | <media-and> | <media-in-parens>
where 
<media-not> = not <media-in-parens>
<media-and> = <media-in-parens> [ and <media-in-parens> ]+
<media-or> = <media-in-parens> [ or <media-in-parens> ]+
<media-in-parens> = ( <media-condition> ) | <media-feature> | <general-enclosed>
where 
<media-feature> = ( [ <mf-plain> | <mf-boolean> | <mf-range> ] )
<general-enclosed> = [ <function-token> <any-value> ) ] | ( <ident> <any-value> )
where 
<mf-plain> = <mf-name> : <mf-value>
<mf-boolean> = <mf-name>
<mf-range> = <mf-name> [ '<' | '>' ]? '='? <mf-value> | <mf-value> [ '<' | '>' ]? '='? <mf-name> | <mf-value> '<' '='? <mf-name> '<' '='? <mf-value> | <mf-value> '>' '='? <mf-name> '>' '='? <mf-value>
where 
<mf-name> = <ident>
<mf-value> = <number> | <dimension> | <ident> | <ratio>

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

メディアタイプ

all

すべてのデバイスに適合します。

print

印刷されたものや印刷プレビューに表示されるドキュメント向けです。ページ付けしたメディア固有の書式の問題については、ページ付けしたメディアおよびGetting Started チュートリアルの Media のセクションで調べてください。

screen

主に、カラーのコンピュータ画面向けです。

speech

スピーチシンセサイザ向けです。注記: CSS2 には、同じ目的の 'aural' と呼ばれる、これと似たメディアタイプがあります。詳細は aural スタイルシートの付録を参照してください。

メディア特性

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

例

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

仕様

ブラウザ実装状況

関連情報

• メディアクエリ
• CSSOM CSSMediaRule