@mediaルール

TOPページに戻る > CSS

@mediaルール

メディアごとにスタイルを設定できます
WEBサイトをパソコン以外で閲覧してくるユーザーのために携帯やテレビ、印刷用などメディアごとの専用のスタイルを適用できます

種類	メディア名
パソコン	screen
印刷	print
携帯端末	handheld
テレビ	tv
文字幅固定端末	tty
プロジェクター	projection
点字出力ディスプレイ	braille
音声出力	aural　(css2.1ではspeechに変更)
点字印刷	embossed
全てのメディア	all

使い方（書式）css

@media メディア名;{ プロパティ:値; };

対応ブラウザ

※全てのブラウザで対応しています

実際の指定方法

css

@media print{ color:red; }; /* webページを印刷する時にはこのcssを適用 */

複数のメディアを一括指定

@media print, screen{ color:red; }; /* 印刷とパソコンのスタイルを指定 */

順番は特にないので普通のセレクタの下に@mediaを書くこともできます

p{ color:red; }             /* 普通のセレクタ */
@media print{ color:red; }; /* @mediaの記述場所はセレクタの下に書けます */