メディアがprintの場合に印刷用CSSを適用する

トップページ > ウェブ制作チュートリアル > メディアがprintの場合に印刷用CSSを適用する

第26章　印刷用のスタイル

★メディアがprintの場合に印刷用CSSを適用する

メディアがprintの場合に印刷用CSSを適用する

前回、新規作成したprint.cssをHTMLファイルから読み込ませます。印刷専用のスタイルシートですから、印刷時にだけprint.cssが適用されるように指定します。

index.htmlに以下の記述を追加してください。

HTMLソース（index.html）

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="base.css">
<link rel="stylesheet" media="screen and (max-width:800px)" href="base_sp.css">
<link rel="stylesheet" media="print" href="print.css">
<title>ウェブサンプル株式会社</title>
</head>
　　：
（以下略）
　　：

上記の一行を追加することで、印刷される場合にだけprint.cssが読み込まれて適用されるようになります。

注目して欲しいのは、link要素にmedia="print"という属性値を指定している点です。 link要素のmedia属性を使用すると、指定した値に応じて特定メディア向けのスタイルシートを指定することができます。

link要素のmedia属性でメディアを指定する

link要素のmedia属性の初期値はallです。そのため、media属性の指定を省略するとすべてのメディアでスタイルが適用されるようになります。

第4章でCSSで文字スタイルを指定した際、スタイルシートとウェブページを関連付けるために、HTMLファイルからbase.cssを読み込ませました。そのときには、以下のように記述しました。

link要素のmedia属性を省略した例

<link rel="stylesheet" href="base.css">

上記のlink要素では、media属性の指定が省略されています。 media属性の指定を省略するとmedia="all"と解釈されて、すべてのメディアでそのCSSソースが適用されます。つまり、パソコンのモニタ上であっても、印刷時であっても同じスタイルが適用されることになります。

一方、以下は印刷時にのみ適用されるようにmedia属性の値にprintを指定しています。 media="print"の場合にprint.cssを指定することで、ウェブページが印刷される場合とそれ以外の場合とで、適用するCSSファイルを振り分けることができます。

印刷メディア用スタイルシートを読み込ませた例

<link rel="stylesheet" media="print" href="print.css">

メディアごとにスタイルシートを指定し分ける

現在のところ、ウェブページはパソコンやスマホなどのスクリーン上で、ブラウザを使用して表示されることがほとんどですが、 CSSの仕様では、スクリーン以外にもテレビ・プロジェクタ・携帯機器・印刷・音声・点字などの様々なメディアにウェブページが出力されて利用されることが想定されています。

メディアの種類は、link要素やstyle要素のmedia属性で指定します。 media属性に指定できる値には、以下のものがあります。

all …… すべてのメディア（初期値）
screen …… 一般的なディスプレイ
print …… 通常のプリンタ
projection …… プロジェクタ
tv …… テレビ
handheld …… ハンドヘルドデバイス
tty …… 固定文字サイズの端末
embossed …… 点字プリンタ
braille …… 点字の触角デバイス
speech …… 読み上げブラウザ

メディアタイプを指定することで、スクリーン表示用（screen）やプリント用（print）など、メディアごとにスタイルシートを指定し分けることができます。複数のメディアタイプに同じCSSを適用する場合には、メディアタイプの値をカンマ（ , ）で区切って指定します。

以下の例では、スクリーンとテレビにはbrowse.css、ハンドヘルドデバイスにはmobile.css、プリント時にはprint.css、音声による再生時には男性の声で読み上げるように指定しています。

メディアタイプに合わせてCSSファイルを振り分けた例

<html>
<head>
<link rel="stylesheet" type="text/css" media="screen, tv" href="browse.css">
<link rel="stylesheet" type="text/css" media="handheld" href="mobile.css">
<link rel="stylesheet" type="text/css" media="print" href="print.css">
<style type="text/css" media="aural, speech">
<!--
p {voice-family:male;}
-->
</style>
</head>
<body>
<p>段落となります。</p>
</body>
</html>

いま作成中のサンプルサイトでは、media="print"の場合にprint.cssを指定するところまで進めました。しかし、まだprint.cssの具体的なスタイル内容を指定していないため、この時点でサンプルサイトを印刷してもこれまでとの違いはありません。

次回、印刷用スタイルシートの具体的な内容を指定していきましょう。

まとめ

media属性の値にprintを指定すると、印刷時にのみprint.cssが適用される
media属性の初期値はallなので、指定を省略するとすべてのメディアでスタイルが適用される
media属性の値には、all・screen・print・projection・tv・handheld・tty・embossed・braille・speechを指定できる

<前へ

目次へ

次へ>