ブラウザ印刷対策としてprint.cssを設置する方法

ブラウザで印刷すると、モニタで見るレイアウトの通りに印刷できずに、内容が欠けたり、レイアウトが崩れることが多々あります。

原因としては、Webページの横幅のサイズなんて千差万別なので、ブラウザが対応しかねているという点があります。
そもそも、ブラウザは対応する気がないのかもしれません。Webページなんて印刷することを前提としてはいない、逆に印刷物にはないメリットがあってこそのWebコンテンツということでしょうか。

しかし、地図やクーポンなど、そこはどうしてもうまく印刷したいというコンテンツもあります。そんな時は、print cssを設置すればある程度解消できます。

記述方法としてはスタイルシートの宣言にmediaプロパティでprintを指定します。

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

そうすれば、通常の「common.css」に、印刷する時に「print.css」でスタイルが上書かれた状態で印刷されます。
一般的に「print.css」で指定するのは、表示させたくない「.image{ display: none; }」とか、サイズを変更したい「.header{ width: 850px }」程度でしょう。

他にもimportの際に、print cssを適応させたい場合に

@import  " print.css "  print;

また、common.cssの中にまとめて記述したい場合には

@media print{
.image{ display: none;    }
}

といった書き方もあります。

これまでに述べたとおり、print cssは万全ではありません。どうしても崩れるところは崩れます。特に改ページに弱く、CMSなど動的で可変なサイトでは、どんなにがんばってもおかしなことになります。
それを熟知した上でprint cssの仕様を調整しないと、プロジェクトとしては破滅へ向かうことになるかもしれれません。。。