印刷対応ページ

 

XHTML+CSS2.0で作成されたホームページは、多くの画像が背景画像として指定されています。主要ブラウザは印刷の際、「背景を印刷しない」設定になっています(デフォルトの場合)。よって、プリントアウトされる可能性の高いページは、そのことに留意して作成する必要があります。


<img>タグを使う
アクセスマップや、テキストのみでは表現しづらい図などは従来どおり<img>タグ を使用することで、印刷にも対応できます。

PDFファイルや、印刷専用ページを作成し画像を表示する
印刷用に別途 ページを作成するやり方です。PDFファイルの場合はPDFファイルが開くこと、サイズなどを記述しておくとよいでしょう。

印刷用 CSS
重要な画像を<img>タグで記述した上で、さらに細かい印刷指定をCSSで行うことができます。 印刷用CSSはlink要素のメディアタイプをmedia="print"と指定します。
<link rel="stylesheet" type="text/css" href="css/print.css" media="print" />

CSSには、印刷 に必要のない部分にdisplay: none;を指定し消していきます。必要に応じて、文字色や文字サイズの変更も指定します。 印刷用CSSは印刷プレビューでも適用されますので、確認は印刷プレビューで行うのがよいでしょう。最終的には実際に印刷してチェックします。