サイトをプリントアウトして使いたい、との要望が、たまにあります。

こちらの環境では問題なくプリントできるのでOK!と思っていたら、

ページが半分までしか表示されない。

切り目の部分が画像と文字が重なっておかしくなっている。

など、ブラウザによって、さらに設定によって不具合があることがしばしば。

 

そこで備忘録として、私なりにもっとも無難に対処できる方法を記載します。

 

 

 

印刷時の余白幅指定

IEはデフォルトの余白幅が広いため、

印刷プレビューで表示が収まりきらない場合、

ページの横幅に合わせてCSSで余白を調整します。

 

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

 

“縮小して全体を印刷する”機能がないIE6の対応

IE6についてまだ書かなければならなのは残念ですが、それでも対応が必要なケースがあります。

IE6は用紙サイズに合わせて縮小表示を行ってくれませんので、以下のCSSハックで対応するようにします。

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

”_zoom: 0.75;”で印刷時の倍率を指定します。
上記では75%で表示されます。

GoogleChromeでの印刷対応

 背景画像はプリントできるようになりましたが、

調節できる項目がなく、印刷には不向きなブラウザです。

現時点ではおすすめしません。

Firefoxでの印刷対応

Firefoxでは、2~3カラムレイアウトでページが長い場合、

フッターが2枚目の最上部に表示されたり、

コンテンツの親要素にoverflor: auto;を使うと、 間のページが表示されないことがあります。

そのため、Firefoxのみに適応する印刷表示用のCSSを作成します。

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

コンテンツを囲んでいる要素に”display: table;”、 floatを適応している要素に

”display:table-cell;”・”float:none;”・”vertical-align:top;”を指定することで回避できます。

/* 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;
}
}