@mediaルール

TOPページに戻る > CSS

スポンサード リンク

@mediaルール

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

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

使い方(書式)css
@media メディア名;{ プロパティ:値; };
対応ブラウザ ie6 ie7 ie8 ie9 ie10 ie11 google Chrome safari fire fox opera

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

実際の指定方法

css

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

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

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

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

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




(C)2012 ホームページ作成無料