今日紹介するのは、極めて初歩的なテクニック。しかし、ご存じない方も多いかもしれません。
通常の CSS とは別に、印刷時にのみ有効となるスタイルシートを設定する方法です。

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

このときに使用するキーワードが［@media print］で、この要素内に記述されたスタイルが、印刷時のみ有効になります。

例えば、以下のように記述すると…

#sidebar {float:left; width:200px;}
#content {float:right; width:600px;}

@media print {
	#sidebar {display:none}
	#content {float:none; width:100%;}
}

この場合だと、通常スクリーンに表示されているときは［id=sidebar］で指定されたボックスが描画されますが、印刷時には［id=sidebar］が非表示になり、さらに［id=content］の横幅が 100% になります。

注意点として、一部の古いブラウザ（もちろん Internet Explorer なのですが…）では不具合により［@media type］内の記述が無視されたます。
どこまでも劣悪なブラウザなんです。IE は。

さて。
スタイルシートの内部に記述する方法の他に<head> 〜 </head>内で外部 CSS を読み込む際に media を指定して対応することも可能です。

以下、通常の記述方法

<link rel="stylesheet" href="style.css">

こちらは印刷時にのみスタイルシートを適応させる方法。

<link rel="stylesheet" href="print.css" media="print">

簡単ですね。つまり［media=”print”］をの指定を追加するだけで、［print.css］を印刷用のスタイルシートとして設定することができます。