印刷 印刷用css css print.css

質問

cssを勉強中なんですがいまいち印刷用cssがよくわかりません。
このcssを適用させれば背景で設定した画像もすべてwebと同じように印刷されるのでしょうか？
印刷用のcssを読み込むことはわかるんですがこの印刷用のcss（仮にprint.css）には何を
記述すればいいのでしょうか？
どうもいろんなサイトを見てもよくわかりません。
よろしくお願いします。

回答No.3

steel_gray · ベストアンサー

#2です。
印刷用(media)のスタイルを指定する方法は３種類あります。
(1)リンクしたスタイルシートをmediaを指定して読み込む
<LINK rel="stylesheet" type="text/css"
media="print" href="print.css">
(2)インポート時にmediaを指定する
@import url("print.css") print;
(3)一部分（ブロック単位）にmediaを指定する
@media print {
}

#2の例は(3)のケースです。
mediaを指定していないCSSファイルやHTMLのヘッダ部のstyle要素内で一部分をprint用に追加する書き方です。プリント用のcssに記述するのかというと、そうではないです。

http://www.y-adagio.com/public/standards/tr_css2/media.html

回答No.2

steel_gray

背景の印刷をする/しないはブラウザの機能ですから、印刷用CSSを用意しても印刷されない環境では印刷されません。（インク代も結構高いですから）
むしろ、背景なしでも困らないようなスタイルを書いておくと親切かもしれません。

例-通常は黒字に白、印刷時には白地に黒にする。
body{background:url(黒っぽい背景画像) black;color:white;}
@media print {
　body{background:white;color:black;}
}

補足

body{background:url(黒っぽい背景画像) black;color:white;}はメインのcssで

@media print {
　body{background:white;color:black;}
}はプリント用のcssに記述するということでしょうか？

回答No.1

mochitora

基本的には、
・文字の体裁を変える(大きめに・読みやすく黒に統一等)
・印刷しなくても良いものを削る(ナビ用メニューやFlash、画像など)
ために使います。

例えば、こんな感じに使います。

印刷はA4でされることが多いのを考慮して、
横にメニューを作っている場合はそれを削る
(メニューがあるとA4で印刷しきれない場合があるので)。

見出しと本文の大きさをバランスよく変更したり、
アンダーラインをつけたりして、
「印刷物」として読みやすくする。

参考URL：

http://allabout.co.jp/internet/hpcreate/closeup/CU20050728A/

お礼

ありがとうございました。
とても参考になりました。