【CSS】印刷時のみ有効となる設定にする

公開日： 2016/03/09 : 最終更新日：2016/03/24 css

CSSを使って、印刷時のみ有効となる設定をします。これを使用すれば、わざわざ印刷専用のページを作らなくても、印刷に適したデザインを印刷時のみ適用させることができます。

CSSファイルに記述する方法

スクリーン用に記述しているCSSファイル（スクリーン用とも印刷用とも、特に使い分けせず普通に書いてるCSSファイル）に印刷時に適用するCSSファイルを一緒に記述しちゃいます。印刷用のときに指定したいCSSが数少なければ、これでOK。

「@media print」要素内にCSSスタイルを記述すると、印刷時のみ有効となります。CSSは一般的に旗上げゲームと一緒で（赤上げといて赤下げる…みたいな）、後ろの位置に書いたスタイルが最終結果として採用されるので、「@media print」は普段使いのスタイルの後ろの位置に記述します。

@media print {
#sub {display:none}
}

この設定で、スクリーンには「id=sub」は表示されますが、印刷時には「id=sub」が非表示になります。IDだけでなく、クラスにも設定可。

一部の古いIEなどでは「@media type」内の記述が無視されます。

外部CSSファイルをリンクする方法

印刷時のCSSが多いときは印刷用のCSSファイルを1枚作ってリンクさせた方が分かりやすくてよいかも。

まず、印刷用のCSSファイルを作り（例/print.css）、<head>～</head>内に記述します。

<head>
<link rel="stylesheet" href="css/base.css" type="text/css" />
<link rel="stylesheet" href="css/print.css" type="text/css" media="print">
</head>

上記のように「media="print"」の記述を追加すると、印刷用のCSSとして設定できます。

MEMO

スタイルシートには、他にもメディアタイプが用意されています。

プロパティ	CSSの適用メディア
all	全て
screen	スクリーン
print	プリンター
projection	プロジェクター
tv	テレビ
aural	音声合成機器
speech	音声合成機器
braille	点字ディスプレイ
embossed	点字プリンタ
handheld	携帯端末
tty	固定幅文字の機器