@media

概要

@media は、CSS 規則セットの対象のメディアタイプを (カンマ区切りで) 指定します。規則セットの範囲は波括弧 "{ ... }" で囲みます。

構文

@media <media types> {
  /* 指定したメディア用の CSS 規則 */
}

メディアタイプ

注記: 現在、Firefox には print および screen メディアタイプしか実装されていません。 アドオンの FullerScreen 拡張をインストールすると projection メディアタイプのサポートが有効になります。
all
すべてのデバイスに適合します。
braille
点字触覚フィードバックデバイス向けです。
embossed
ページ付けした点字プリンタ向けです。
handheld
携帯デバイス (小さい画面で通信帯域が制限されたもの) 向けです。
print
印刷されたものや印刷プレビューに表示されるドキュメント向けです。ページ付けしたメディア固有の書式の問題については、ページ付けしたメディアのセクションで調べてください。
projection
プロジェクタなどで映写されるプレゼンテーション向けです。ページ付けしたメディア固有の書式の問題については、ページ付けしたメディアのセクションで調べてください。
screen
主に、カラーのコンピュータ画面向けです。
speech
スピーチ・シンセサイザ向けです。注記: CSS2 には、同じ目的の 'aural' と呼ばれる、これと似たメディアタイプがあります。詳細は aural スタイルシートの付録を参照してください。
tty
固定ピッチ幅の文字グリッド (テレタイプやターミナル、表示領域が狭いポータブルデバイスなど) を使用するメディア向けです。ページ作者は "tty" メディアタイプで pixel 単位を使用すべきではありません。
tv
テレビジョン型 (低解像度、カラー、スクロールが制限された画面、音声利用可能) のデバイス向けです。

メディアグループ

各メディアタイプは、異なるメディアグループ (Media Groups) の一部でもあります。下表は、各メディアタイプがどのメディアグループに含まれるかを示します。

  グループ
タイプ continuous paged visual audio speech tactile grid bitmap interactive static
braille          
embossed            
handheld  
print            
projection            
screen        
speech            
tty          
tv      

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

補足

マルチモーダルなメディアタイプは、まだ一つしかありません。例えば、'tv' メディアタイプは映像と音声を一つのキャンバスに描画できるマルチモーダルなメディアタイプです。

仕様書

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本サポート 1.0 1.0 (1.7 or earlier) 9.0 9.2 1.3
機能 Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本サポート 1.0 1.0 (1.7) 9.0 9.0 3.1

関連情報

Document Tags and Contributors

Contributors to this page: ethertank, Marsf
最終更新者: ethertank,
サイドバーを隠す