WEBサイトをプリントアウトして、そのまま持ち歩いたり、なにかにつけて印刷をする人って結構いたりします。パソコンなどのリテラシーがある方は、プリントアウト時に設定を変更したりしてA4サイズに収めたりすることができるのですが、わりと煩雑だったりします。できれば、印刷することを目的としたコンテンツの場合なら、それ向けにユーザーに提供したいところです。

実際のところやる事といえば、プリントアウトのイメージ作成時にヘッダーナビゲーションや、フッターナビゲーション、余分な装飾的な画像、サイト内バナーなどを消して、ページあるコンテンツだけ表示するということであります。

まずは、ヘッダ内に下記のように印刷時に適用するCSSを読み込みます。

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

印刷用のCSSの用意

と別途印刷用のスタイルシートを制作し、その中で印刷する際に不必要なナビゲーションなどの id を「display: none」で消します。この際に、レイアウトが崩れてしまったりすることがあるので、適当なID、クラスを選ぶ。また透過の画像などを利用しているときは、画像で表現しているテキストなどが見えなくなる恐れがあるので、そのあたりの調整も行います。必要に応じて背景画像や色も印刷して見た目を整えます。

黒を印刷すると大量のインクを使うことから、黒背景は印刷すべきではないとこご意見あったりしますので、黒背景でも白背景で印刷するのが、ユーザーフレンドリーでエコな考え方かな。
黒く印刷するのが、非省エネで、画面が白いのも非省エネ。印刷と画面ってここだけみるとエネルギーの使い方、というか表現の仕方が、正反対なんですね。印刷は白背景で、画面は黒背景でが省エネ。

背景画像を印刷時に印刷する方法

とはいいつつ、背景画像も含めて印刷して欲しい状況っていうのがありまして、そのさいにCSSに記述しておくと、背景も含めて印刷してくれるようです。まぁ、ブラウザの印刷設定で変更すればいいのですが、それもまたハードルが人によってありますので、ここではそんな必要がない、何もしなくて印刷できてしまうという方法があるようです。

背景画像もCSSで印刷するucky-bag::blog
Printing CSS background imagesp

リストの設定をして、その背景画像を指定するという方法で解決できるらしい。

ブラウザの設定で解決する場合は

ユーザーにその背景を印刷してもらうと言う事を、お願いする場合。ブラウザによって区々。

ちなみにwindowsのIEでの設定は

ツール　＞＞　インターネットオプション　＞＞　詳細設定

の画面一番下に"印刷"って項目がありますので、
"背景の色とイメージを印刷する"にチェックを入れれば言い訳です。

firefoxの場合は、印刷プレビューの画面で、ページ設定のなかにあります。

safari の場合は、プリントメニューのダイアログボックスのなかにある訳です。（背景もプリントするみたいな文言）

フォントサイズの調整

画面で見ているものと、印刷したときの文字の大きさのバランスはかなり違ってきます。おそらく、画面の方が大きなサイズが適当で、印刷したときに視認出来る適当な大きさは、画面のサイズよりも若干小さくなる筈であります。ですので、印刷用のフォントサイズは小さめでもいいです。ちなみに全体のバランスが崩れる場合とかは、調整しない方がよさそうです。

という印刷用のCSSですが、印刷時に余分な物を印刷しないようにするのは親切だ。なんて勝手に思っていたりしますが、一方で、見た目と違うものが印刷されるというユーザーに不親切とも受け取れる事でもあります。

印刷用のCSSについてそのほか参考にしたページ

http://d.hatena.ne.jp/aratako0/20080518/p1

ウェブページをきれいに印刷する為のこと
http://d.hatena.ne.jp/aratako0/20070421/p1

印刷用 CSS に必要なこと

印刷時のユーザービリティーに関して