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


関連コンテンツ

スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください