Internet Explorer（9 ~ 11）にて印刷時にレイアウト崩れが発生しかなり苦戦したので、共有 + 自分の後学の為に公開しておこうと思います。

 

1. 印刷時読み込むCSSの設定

レスポンシブサイトを構築しているとよくある話ですが、印刷時サイズって横幅約700px（A4）なのでスマホ版レイアウトが表示されがちですが、それを解消する為に下記のいずれかを記述すると思います。

//パターン1　印刷用CSSをheadタグに追記する
<link rel="stylesheet" type="text/css" media="print" href="print.css">

//パターン2　共通用CSSに印刷用CSSのインポートを追記
@import url("print.css") print;

//パターン3　各CSS内の該当部分にメディアクエリを使用した追記
@media print{
印刷用CSSの定義
}

だいたいこの3パターンだと思います。
初期段階で印刷も要件に入っていればパターン1が理想ですが、途中段階だとパターン2かパターン3にならざる終えないとも思います。

可能であればパターン1にする方がロード時間も多少早くなるので、ベストだと思います。

 

2. 印刷用CSSでPC版のレイアウトを常に表示

クライアントの希望次第ですが、大抵はPC版の表示に対応する形になると思います。
その時に印刷用CSSを使用せずそのままだとスマホ版レイアウトが表示されたり、非レスポンシブサイトであれば、はみ出たりする現象が起きます。

そんな時に下記の定義を行い解消します。

//共通用CSS
//印刷時の余白設定　今回は余白0にしましたが、数値を設定可能（pxではなくmmを使用）
@page {
margin: 0;
}

//印刷の向き設定
@page {
size: landscape; //横向き
size: portrait; //縦向き
}

//印刷用CSS
//画面サイズを印刷サイズに合わせる
body{
zoom: 72%;
}
//あとはスマホ用の定義を否定する定義をしたり、印刷用のレイアウト定義をします。

zoomの定義でbody自体の縮尺を小さくし、納めるという方法です。

大抵の場合これで解決します。

 

3. 改ページ定義

改ページ定義はホームページ次第で定義する必要がない場合もありますが、コンテンツの途中で切れてしまったりした際に定義すると綺麗に印刷出来る様になります。

//コンテンツの直前で改ページする場合
page-break-before: auto;　//制御しない （初期値）
always;　//改ページさせる
avoid;　//改ページを禁止

//コンテンツの直後で改ページする場合
page-break-after: auto;　//制御しない （初期値）
always;　//改ページさせる
avoid;　//改ページを禁止

※avoid の指定は、Opera以外では対応していないようです。

 

4. 今回起こった現象

body自体にzoomを当てる事により、どう頑張っても（zoomの縮尺サイズを変更しても）印刷プレビューで3/4辺りで切れてしまう現象が発生しました。

色々とググったりしましたが、解決策は見つからず時間と精神だけが削られる事に。

一旦、他のことをしている時に、ひらめきました。

レスポンシブ的に考えればいいんじゃね？

正解でした。

メインコンテンツの幅を1200pxにしていたのをまず印刷用CSSで100%に定義して、bodyのzoom値を95%にすると。

なんと理想の形になりました！

ちなみに2日間頑張って、嫌気がさしたので1週間放置してました。
（ただ頭の隅ではずっとありましたが。）

とりあえず解決したのでよかったです。
何でもそうですが、柔軟に考えることは大切だと改めて痛感しました。

 

ではこのへんで。