XHTML/CSS・トップ | CSS基礎知識・目次

●media属性を使った媒体別のスタイルシート

 link要素やstyle要素にmedia属性を配置し、属性値にprintやscreenなどの媒体を指定することにより、印刷用(プリンタ)、パソコン画面など、メディア用のスタイルシートを用意することができます。

CSS2で指定できるメディアタイプ
all 指定できるメディアのすべて
aural 音声出力
braille 点字ディスプレイなどの点字出力
embossed 点字プリンタ
handheld 携帯用機器
print プリンタ(印刷用)
projection プロジェクタ
screen パソコン画面
tty 文字幅が固定された機器
tv テレビ

【style要素/CSS】

<style type="text/css" media="print">
<!--
body {
 background-color: #ffffff;
 color: #000000;
 margin-top: 5%;
 margin-left: 10%;
 margin-right: 10%;
 margin-bottom: 5%;
}
h2 {
 color: #0000ff;
}
p {
 font-size: 1em;
 line-height: 1.5;
}
-->
</style>

【解説】

 メディアタイプに printを指定し、印刷用のスタイルシートを作成しています。XHTML(HTML)の<head>〜</head>間にlink要素を配置して、外部のスタイルシートに適用させるときは次のように指定します。カンマ(,)で区切ることにより、複数のメディアを指定することもできます。

<link rel="stylesheet" type="text/css" href="sample.css" media="screen,print" />

【補足】

 ここのページは黒背景の白文字のWebページですが、印刷用のスタイルシートを指定しなくても白背景の黒系のフォントで印刷されます。これはOSまたはソフトウェア(ブラウザなど)自身がデフォルトで印刷用のスタイルシートを用意しているためです。ですが、こうしてメディアタイプを指定することにより、作者が意図したメディア別のスタイルシートを用意することができます。メディアタイプの指定は@mediaルールを使った方法もあります。(「@を使った指定」ご参照。)

XHTML/CSS・目次 | CSS基礎知識・目次

Copyright (C) 2006-2008 http://www.xml.vc/