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

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 固定幅文字の機器

コメント

タイトルとURLをコピーしました