ホームページを印刷した時に、ブラウザと見た目がまったく違うものが印刷されてしまった事ってありませんか？
今回は、そんな印刷時の見た目の違いを解消するCSSの技術「印刷対応」についてご紹介したいと思います。
印刷対応とは
印刷対応とは、各ブラウザに内蔵されている印刷機能を使った印刷時に、可能な限りデザインされた状態で印刷を行えるように調整する事を言います。どのように対応するのか
印刷対応を行うには、一般的に印刷用のCSSを用意します。例えば：
- （htmlコーディング）
- <link href="/css/print.css" rel="stylesheet" type="text/css" media="print" />
media="print"と書くと、それは印刷（印刷プレビュー）時にしか使用されません。
普段は media="all" になっているはず。指定しなくても all が指定されていることになります。
注意点
印刷対応でもっとも注意しなければならないのは、背景画像の対応についてです。これは印刷対応時ではなく、最初のコーディング時点で確認する必要があります。これを怠ると、下手をすれば、全部はじめからやり直しなんて事になりかねません。
■背景画像の対応とは
大体のブラウザでは、印刷時に背景画像を印刷するか、しないかを選択出来るようになっています。で、デフォルトは背景画像を印刷しません。
背景画像を印刷しない場合、ページのタイトルを背景画像で指定している場合などに印刷時のみタイトルが分からなくなってしまいます。
リテラシーの高いひとなら、背景を印刷するように設定を変えて、印刷することなど容易に出来ますが
そうでない方が多い（設定を変える方法が分かりにくいのもあります）ため、背景を印刷する設定でなくても問題が無いように対応を行う必要があるのです。
各ブラウザの印刷対応について
続いて、各ブラウザの印刷についてです。どのブラウザもイマイチな感じです。
IE
ページの横幅が、プレビュー時の横幅よりも大きい場合に、はみ出た部分にfloatが掛かっていると、表示が崩れてしまう場合がある■IE6
用紙のサイズに合わせて縮小が使えないIE6の対応は「用紙のサイズに合わせて縮小する」機能がないその点をどうするかを考える必要があります。
IE7以降は、縮小出来るので、IE6向けの対応となります。
Firefox
floatがclearされる前にページをまたぐと、それ以降のページが正しく印刷出来なくなるこの点が無ければほぼ完璧なFirefoxさん。
mainとsubで分けて、2カラムにしている場合などに、よく発生します。
その他
Chrome、SafariなどのWebKit?系ブラウザでは、今現在、対応を行っていません。理由は「印刷プレビューが出来ないから」ですが、Chromeについては、そのうち実装されそうなので、実装された後は、何かしら対応が必要になるかもしれません。
次回の私の記事では、
印刷対応について
実装方法をご紹介します。
