前回、新規作成したprint.cssをHTMLファイルから読み込ませます。
印刷専用のスタイルシートですから、印刷時にだけprint.cssが適用されるように指定します。
index に以下の記述を追加してください。
<!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属性の初期値はallです。
そのため、media属性の指定を省略するとすべてのメディアでスタイルが適用されるようになります。
第4章でCSSで文字スタイルを指定した際、
スタイルシートとウェブページを関連付けるために、HTMLファイルからbase.cssを読み込ませました。
そのときには、以下のように記述しました。
<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属性に指定できる値には、以下のものがあります。
メディアタイプを指定することで、スクリーン表示用（screen）やプリント用（print）など、メディアごとにスタイルシートを指定し分けることができます。
複数のメディアタイプに同じCSSを適用する場合には、メディアタイプの値をカンマ（ , ）で区切って指定します。
以下の例では、スクリーンとテレビにはbrowse.css、ハンドヘルドデバイスにはmobile.css、プリント時にはprint.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の具体的なスタイル内容を指定していないため、この時点でサンプルサイトを印刷してもこれまでとの違いはありません。
次回、印刷用スタイルシートの具体的な内容を指定していきましょう。
| <前へ | 目次へ | 次へ> |