印刷用スタイルシートについて
- 2018/8/30
- CSS
データでのやり取りが主流になりつつある昨今ですが、
中にはそうでないケースもあって、
「このサイトのこのページだけ印刷したい」
なんてことも割とまだあります。
そんな時、サイトに共通でサイドメニューが入っていたりすると
紙のサイズに収まらなかったり、スタイルが崩れたりすることがあります。
そんな時に使うのがprint.cssです。
正確にはcssのmedia type指定の一つである「print」なんですが、
これは印刷時にのみ適用されるスタイルになります。
上記の例でいくなら
サイドメニューのIDかクラス[display:none;}
みたいに書けば、印刷の時はサイドメニューが非表示になります。
後、printもメディアクエリ―なので、head内に
<link href=”../css/print.css” media=”print”/>
とmediaの指定をしてやる必要があります。
もしくは他のスタイルとファイルを統一するのであれば、
@media print{}で囲む必要があります。
また、ファイル統一の場合はいいですが、
print.cssのようにファイルを分ける場合は、
既存のスタイルが印刷時に適用されない可能性があります。
その場合は、
<link href=”../css/style.css” media=”screen print”/>
みたいに既存のスタイルのmediaプロパティにprintを追加すると、うまく表示されます。
print.cssを使うと印刷時に改ページ位置を選んだり、
「印刷だとこうしたほうがきれいかも」みたいなところを他のスタイルへの影響を考えずに入力することができます。
印刷する機会はあまりないかもしれませんが、機会があったら是非ご活用ください!