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

前回のソースを再掲します。ソースファイルは、これが完成形、今回は説明だけです。

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

media属性の適用方法

共有:

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル