対応するブラウザ・バージョンを選定する

全てのブラウザに対応できるのが望ましいのですが、それぞれのブラウザに実装されている印刷機能に関しても把握しておく必要があります。

●Internet Explorer
印刷対応状況○　バージョンごとに表示が異なる場合が多い

[特徴]

• バージョン6では”縮小して全体を印刷する”機能がない
  そのため、ページの横幅がプレビュー時の横幅より大きい場合、｢横幅が収まらない｣｢レイアウトが崩れる｣等の現象が発生してしまいます。
• 印刷時の余白幅が広い
  Firefoxでは、デフォルトの余白幅が12.7mmであるのに対して、Internet Explorerでは、約7mm程余白が広く取られています。そのため、｢印刷前に余白幅をドラッグ操作で設定｣したり、｢CSSで余白幅を設定｣することが必要になってくる場合があります。
  ※ただし、CSSの余白幅設定に対応しているのは、バージョン8以降です。
• バージョン9での3カラムレイアウト時のカラム落ち
  3カラムレイアウトの場合、｢中央のコンテンツが長い場合(同一コンテンツを複数リピート表示したような場合)、中央のコンテンツがカラム落ちし、2ページ目以降に表示される｣という現象が発生することがあります。
  バージョン8では問題ないので、CSSをこれ用に工夫する必要があります。

●Firefox
印刷対応状況○　印刷表示に独自の対応が必要

[特徴]

• 2~3カラムレイアウトでページが長い場合、フッターが2枚目の最上部に表示される
  2~3カラムレイアウトで印刷枚数が2枚以上に渡るページで発生する現象です。
• 間のページが表示されない
  例えば、5ページ印刷されるようなページだと、1ページ目と5ページ目しか表示されないという現象が発生することがあります。
  これは、｢コンテンツの親要素にoverflor: auto;を使うと、間のページが表示されない｣というFirefox独自の現象です。

●Chrome
印刷対応状況△　背景画像が印刷できない

[特徴]

• “背景を印刷する”機能がブラウザにない
  CSSを使用する上でも、背景画像を使う機会は多いと思いますので、現状での印刷対応はちょっと厳しい気がします…。
  [参考サイト]
  Google Chromeで背景を印刷したいときには -みブログ-
  
  ｢どうしてもChromeで背景画像を印刷したい！｣という方は、以下をご覧ください。
  実際使うかどうかは別として、このような発想には驚きです。
  [参考サイト]
  印刷用CSSで背景画像を印刷させるサンプル -lucky bag-

●Safari
印刷対応状況△　Windows版が印刷対応されていない

[特徴]

• Windows版Safariで印刷対応されていない
  Mac版Safariは印刷対応されていますが、Windows版Safariは印刷対応されていないようです(※Windowsからブラウザ経由で直接印刷はできませんが、iPhoneやiPadを使ってAirPrint印刷は可能なようです)。
  [参考サイト]
  (Windows編)CANONやEPSONのプリンタでAirPrint印刷をする -paraches lifestyle lab-

上記の内容を見てみると、Internet ExplorerとFifefoxは、比較的印刷対応しやすいブラウザだといえます。Internet Explorerでは、バージョンごとに印刷表示が異なる場合が多い点を考えると、対応バージョンを指定してもよいかもしれません。

上記を踏まえて、Internet ExplorerとFifefoxに絞って、印刷対応する際に注意しておきたい点を紹介していこうと思います(サイト制作する際、｢できる限り印刷対応も意識した作りにしたい…｣という時に覚えておきたいTipsですね)。

2012.8.30時点の情報をもとに掲載しております点、予めご了承ください。

Internet Explorerでの印刷対応

Internet Explorerでは、”縮小して全体を印刷する”機能がないバージョン6の対応、余白設定、バージョン9での3カラムレイアウト時の調整等が必要になります(※対応するInternet Explorerのバージョンやサイトの作りによって調整してください)。

“縮小して全体を印刷する”機能がないバージョン6の対応

バージョン6は、用紙サイズに合わせて縮小表示を行ってくれませんので、以下のCSSハックで対応するようにします。
※CSSハックを推奨するものではありませんので、その点ご理解ください。

CSS

/* IE6で印刷時の倍率を指定 */
@media print {
body {
  _zoom: 0.75;
}
}

補足

●IE6で印刷時の倍率を指定
2行目と6行目の”@media print {～}”は、印刷用にCSSを適応する際に使用します。

印刷用のCSSファイルを作成し、htmlのヘッダーに以下を記述しても構いません。
<link href=”print.css” rel=”stylesheet” type=”text/css” media=”print” />
この場合、CSSファイル上に”@media print {～}”は必要ありません。
「極力手間をかけず印刷対応もしたい」という点から、本記事内では、WEBページで使用しているCSSに一緒に書けるよう”@media print {～}”を使用しています。

4行目の”_zoom: 0.75;”で印刷時の倍率を指定します。
上記では75%で表示されます(※印刷プレビューで確認しながら調節してください)。
また、プロパティzoomの前に”_”を記述することで、Internet Explorer6にのみ適応させることができます。

印刷時の余白幅指定

Internet Explorerは、Firefoxと比べてデフォルトの余白幅が広いため、印刷プレビューで表示が収まりきらない場合、スクロールバーが表示されてしまいます。
印刷時、ユーザー側で余白幅をドラッグ操作し、調整してもらっても構わないのですが、普通しませんよね…。ですから、ページの横幅に合わせてCSSで余白幅を調整してやります。

▼横幅が広いサイトだとスクロールバーが表示されてしまう

CSS

/* 印刷時の余白幅指定 */
@page {
        margin: 12.7mm 9.7mm;
}

補足

●印刷時の余白幅指定
Internet Explorer8以降では、”@page”に対応していますので、用紙まわりの余白サイズを指定することができます。上記では、上下に12.7mmの余白、左右に9.7mmの余白を指定しています(※“@page”は、Firefoxでは認識しないようです)。

バージョン9での3カラムレイアウト時のカラム落ち対策

バージョン9で3カラムレイアウトを使用する場合、｢中央のコンテンツが長いと(同一コンテンツを複数リピート表示すると)、中央のコンテンツがカラム落ちし、2ページ目以降に表示される｣という現象が発生することがあります。
バージョン8では3カラムレイアウトで中央のコンテンツが長くても問題ないのですが、バージョン9ではカラム落ちして表示されてしまいます(※中央のコンテンツの表示件数を少なくすれば問題ないのですが、それでは使い勝手がよくありません…)。

float配置した”サイドメニュー(float: left;)”・”中央のコンテンツ(float: left;)”・”右側のコンテンツ(float: right;)”で、中央のコンテンツに対して”float: left;”を適応していることが問題のようです(でも、これをしないと横に並んでくれません…)。
CSS3のbox系プロパティを使うと解決できるのですが、現状ではInternet Explorerには対応していないプロパティです。

これを解決するには、印刷用のCSSで以下のようにします。
中央のコンテンツ(例えば、#center_contents)内に入れている要素(例えば、.topics_entry)にfloatが適応されている場合、それを解除してやります。

▼バージョン9で3カラムレイアウトを使用するとカラム落ちしてしまう(印刷時のみ)

CSS

/* 印刷対応 */
@media print {
.topics_entry {
        width: 350px; 
        height: auto;
        margin: 0px 0px 30px 15px;
        padding: 0px;
        float:none;  /* 印刷時のカラム落ち対策 */
        clear:both;  /* 印刷時のカラム落ち対策 */
}
}

補足

●印刷対応
先程と同じように”@media print {~}”で印刷時にのみCSSを適応します。
8行目でfloatを解除します。
9行目で回り込みを解除します。

ここで気になるのが｢Internet Explorerの以前のバージョンでは問題ないの？｣｢Firefoxではどうなの？｣という点です。
Internet Explorerでは、上記のような場合にfloatを解除しても印刷ページでは問題ありません。Firefoxは、｢floatが解除される前にその箇所が2ページ目に渡ると、それ以降のページが印刷表示できなくなる｣という特性があります。これは、”display: table;”や”display: table-cell;”で回避できます。
ですが、”display: table;”や”display: table-cell;”は、Internet Explorer7以前には対応していませんので、Firefoxのみに適応するCSSハック”x:-moz-any-link”を使います(※Firefoxでの印刷対応の項で説明します)。
要するに、”Internet Explorerでは問題ないのでCSSハックを使わず、FirefoxのみCSSハックを使う”ということです。

marginやpaddingが印刷表示ではうまく反映されない場合、”.topics_entry”ではなく、その中の要素に適応すれば、ほとんどの場合対応できます。

Firefoxでの印刷対応

Firefoxでは、”2~3カラムレイアウトでページが長い場合、フッターが2枚目の最上部に表示される”や”コンテンツの親要素にoverflor: auto;を使うと、間のページが表示されない”という独自の特性があります。
そのため、Firefoxのみに適応する印刷表示用のCSSを作成します。

フッターが2枚目の最上部に表示される・間のページが表示されない現象を回避する

この現象は、コンテンツを囲んでいる要素に”display: table;”、floatを適応している要素に”display:table-cell;”・”float:none;”・”vertical-align:top;”を指定することで回避できます(印刷時のみテーブルレイアウトにするってことですね)。

▼フッターが2枚目の最上部に表示される

▼間のページが表示されない

CSS

/* Firefox印刷対応 */
/* コンテンツ枠 */
@media print {
#contents, x:-moz-any-link {
        width: 900px;
        height: auto;
        margin: 0px auto;
        padding: 20px;
        clear: both;
        overflow: auto;
        display:table;
}
}

/* サイドナビゲーション */
@media print {
#sidenavi, x:-moz-any-link {
        width: 220px;
        height: auto;
        margin: 0px 0px 20px 0px;
        padding: 0px;
        display:table-cell;
        float:none;
        vertical-align:top;
}
}

/* センターコンテンツ */
@media print {
#center_contents, x:-moz-any-link {
        width: 380px;
        height: auto;
        margin: 0px auto;
        padding: 0px;
        display:table-cell;
        float:none;
        vertical-align:top;
}
}

/* ライトコンテンツ */
@media print {
#right_contents, x:-moz-any-link {
        width: 220px;
        height: auto;
        margin: 0px;
        padding: 0px;
        display:table-cell;
        float:none;
        vertical-align:top;
}
}

補足

先程と同じように”@media print {~}”で印刷時にのみCSSを適応します。
“, x:-moz-any-link”は、Firefoxのみに適応するCSSハックです。

4～12行目のコンテンツを囲んでいる要素に”display: table;”を指定します。

17～25行目のサイドナビゲーション、30～38行目のセンターコンテンツ、43～51行目のライトコンテンツに”display:table-cell;”・”float:none;”・”vertical-align:top;”を指定します(※コンテンツを囲んでいる要素”#contents”内のfloatが適応されている要素に指定すればOKです)。
要素をtdとして処理し、floatを解除、”上下中央揃え”を”上揃え”にするという意味合いになります。

これで、Firefoxでの印刷表示のズレを回避することができます。