広告

posted by fanblog
「ここにブログの名前を入れます」は更新を終了しました。記事はすべて新ブログ「Big Bang」に移転済みです。記事のタイトルをクリックすると新ブログの該当記事に移動します。そちらでお楽しみください。

メディア属性後編 - HTML5で縦書き年賀状5

メディア属性 - 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>で囲まれたブロックが3ヵ所あります。(赤、緑、青)

この3つの<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メディア属性という、あまり一般的でないスタイルシートの機能を説明させていただきました。

新ブログ「Big Bang」で続きを読む