通常のスタイルとは別に、印刷時のみに有効となるスタイルを作成する方法

2010年12月03日

通常、何も意識せずに記述したCSSは、画面表示時と印刷時で同じように適用されます。しかし、メディアタイプを指定して記述することで、それらを別々に分割することが可能です。

CSS内に直接記述する方法

「@media print」という記述以降に書かれたスタイルは、印刷時のみ有効になります。例えば、

1#contents {
2    font-size: 14pt;
3}
4@media print {
5    #contents {
6        font-size: 12pt;
7    }
8}

この場合だと、画面表示時はフォントサイズが14ptに指定されますが、印刷時には12ptに指定されます。

注意点として、古いMac IEではバグにより@media type { ～ }でくくられた部分の記述が無視されたます。そういった古いブラウザもサポートする場合はご注意ください。

外部CSSを読み込む際にmediaを指定する

link要素にmedia属性を指定することで、印刷時に適用されるCSSを指定することが出来ます。通常では、

`1`	`<link rel="stylesheet"` `href="default.css"` `type="text/css"` `/>`

このように記述しますが、例えばこの下に、

`1`	`<link rel="stylesheet"` `href="print.css"` `type="text/css"` `media="print"` `/>`

このように記述することで、print.cssを印刷用のスタイルとして適用させることが可能です。

注意点として、IE5.5以前のブラウザでは、mediaを指定して外部CSSを読み込む際に、その外部CSSで指定した@mediaのキーワードが無視されてしまうというバグが存在します。そういった古いブラウザもサポートする場合はご注意ください。

これら方法を使うことで、例えばサイドバーやヘッダ要素を非表示にしてコンテンツ部分のみを印刷するように設定したり、印刷時に崩れてしまう問題を回避することが可能です。

サンプル

最後に、サイドバーやヘッダ要素を非表示にして、コンテンツ部分のみを印刷するサンプルを掲載します。それぞれの要素の内容やスタイルは割愛します。

HTML

01<html>
02 
03<head>
04<link rel="stylesheet" href="default.css" type="text/css" />
05<link rel="stylesheet" href="print.css" type="text/css" media="print" />
06</head>
07 
08<body>
09<div id="header">
10    <p>ヘッダ要素です。</p>
11</div>
12<div id="contents">
13    <p>コンテンツ要素です。</p>
14</div>
15<div id="side">
16    <p>サイドバー要素です。</p>
17</div>
18<div id="footer">
19    <p>フッタ要素です。</p>
20</div>
21</body>
22 
23</html>

default.css

01#header {
02    /* ヘッダのスタイルを記述 */
03}
04#contents {
05    /* コンテンツのスタイルを記述 */
06}
07#side {
08    /* サイドバーのスタイルを記述 */
09}
10#footer {
11    /* フッタのスタイルを記述 */
12}

print.css

1#header,
2#side,
3#footer {
4    display: none;
5}

サンプルページ

検証ブラウザ：IE6～IE8、Firefox 3.x