【CSS】印刷時にのみ有効となるスタイルシートを設定する方法。

Ads by Google

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

こちらの記事もいかがですか?

アナタにオススメ!
同じカテゴリーの他の記事です。

Ads by Google

Leave a Replyコメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です