メディア属性 - HTML5で縦書き年賀状4のつづき、最終回です。
前回のソースを再掲します。ソースファイルは、これが完成形、今回は説明だけです。
<!DOCTYPE html> <html><head> <meta charset="UTF-8"/><style type="text/css" media="all"> html,body{ width:10cm; height:14.8cm; } body{ font: 12px/1.2 'HG正楷書体-PRO'; margin: 0; padding: 0; background:url('URL') bottom right no-repeat; writing-mode:tb-rl; } p{ margin: 0; font-weight:bold; font-size:2em; } p.big{ font-size:6em; color:#d00; margin:20px 20px 0 0; } p.new_year{ font-size:1.6em; margin-top:1em; } p.name{ font-size:2em; margin-top:6em; } div{ margin:17em 15em 0 0; padding:0; } </style><style type="text/css" media="screen"> body{ border:1px solid #00f; /* 青い枠線をつけます */ } </style><style type="text/css" media="print"> body{ border:none; /* 枠線をなくす */ } </style><title>年賀状</title> </head><body> <p class="big">謹賀新年</p> <p class="new_year">慎んで新年のお喜びを申し上げます</p> <div> <p>東京都千代田区永田町一ノ一</p> <p class="name">やまだ たろう</p> </div> </body></html>
headタグの中（青い部分）に、<style>と</style>で囲まれたブロックが３ヵ所あります。（赤、緑、青）
この３つの<style>が、それぞれの役割を担うスタイルシートです。赤い部分が、ブラウザに表示する時も、印刷する時も適用されるスタイルシート、緑がブラウザで表示する時だけ適用されるスタイルシート、青が印刷の時だけ適用されるスタイルシートです。
media属性の適用方法
それぞれのstyleタグの中にmediaと書かれた場所があります。この部分がメディア属性といって、スタイルシートの適用範囲を決めるものです。
- media="all"
- すべてのメディアに適用されるスタイルシート
- media="screen"
- パソコンのモニタ表示に適用されるスタイルシート
- media="print"
- 印刷に適用されるスタイルシート
そのほかに次のものがあります。
- tv （テレビ）
- projection （プロジェクタ）
- handheld （携帯デバイス）
- braille （点字用）
- embossed （点字用プリンタ）
- speech（音声合成機器）
- tty （文字しか表示できない画面）
ブラウザはまず、一番最初に書かれている<style type="text/css" media="all">から</style>までを適用します。今回の場合、これはある意味リセットCSSと同じ機能を果たしています。
media="all"のスタイルシートはすべて、つまりパソコン画面の表示にも、印刷にも適用されます。
そしてパソコン画面に表示する時だけ、media="screen"のスタイルシートを追加します。
印刷の時には、media="screen"のスタイルシートは適用せず、media="print"のスタイルシートを追加します。
こうして、メディアに応じて表示を変えるのがメディア属性です。
以上、簡単ですがmedia属性の説明を終了します。シリーズを通してリセットCSSとメディア属性という、あまり一般的でないスタイルシートの機能を説明させていただきました。