今日紹介するのは、極めて初歩的なテクニック。しかし、ご存じない方も多いかもしれません。
通常の 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]を印刷用のスタイルシートとして設定することができます。