先日、データの最終チェックをしていたクライアントから、プリントプレビューが崩れているので、修正してほしいと連絡がありました。
プリントアウトして細かく校正するクライアントも多いのに、完全にチェック漏れでした。
プリントプレビューを納品前のチェック項目に追加。
スマホの普及によりかなり数は減りましたが、内容によっては「こちらのページをプリントアウトしてお持ちください」などとするキャンペーン等もあり得ます。
大事な情報はプリントアウトして保存しておきたいとするユーザーもいるでしょう。
必ず最後にプリントもチェック項目として追加することにしました。
では印刷時、表示崩れの対処法について書いていきます。
印刷時、表示崩れが起きたときの対処法
まず最初に、media属性を確認
まず、基本的なことですがCSSのmedia属性が、allまたはprintになっていることを確認します。
PC/SPのどちらか印刷させたい方のCSSにprintを設定します。
@media only screen and (max-width: 767px) { /*SP*/}（ブラウザだけに適用）
@media only screen and (min-width: 768px) { /*タブレット*/}（印刷とブラウザに適用）
@media print, screen and (min-width: 1200px) { /*PC*/}（印刷とブラウザに適用）中途半端に次ページにいってしまう場合
同じ情報グループの一部のみ次ページに配置されてしまうケースがあります。
そういった場合は、page-break-beforeや、page-break-afterプロパティを記述します。
要は、前のページに収めるか、次ページに収めるかを指示します。
今回の私のケースは、画像のみが次のページにいってしまい、関連テキストが前ページに収まった状態でした。
この場合、page-break-afterで、テキストと画像を含めるブロックを次メージに収めるか、画像のみを次ページに収めるかを指示します。（画像とテキスト両方を前ページに収めることができないので崩れているため、画像とテキストを前ページに指示することはできません。）
p{
page-break-before: always; /*強制的に直前で改ページさせる*/
}
p{
page-break-after: always;/* 強制的に直後で改ページさせる */
} これでレイアウト崩れは避けられます。
また、背景を印刷したいケースについても書いてきます。
背景を印刷したい場合
個人的には、ALTをつけられない画像については、インライン画像ではなく、CSSで背景として設置しています。そのため、あまり意味を持たない装飾画像が背景となっています。
ですので、印刷時に背景がなくても内容が成立することになりますので、背景が印刷されなくても問題ないと思っていますが、どうしても背景も印刷させたいと言う場合は、少々手間となりますが、下記の方法を備忘録として残しておきます。
ブラウザのページ設定で背景を印刷するよう設定してもらう
インクの無駄になるだけなので、ユーザーにとっては無駄な画像や背景色を印刷させられるのは、ありがた迷惑かなと思います。
どうしても、と言う場合にはブラウザ設定（ページ設定）で個別で指定して印刷してもらうのが良いでしょう。
例えば、クライアントが校正に使用するなどの場合は、わざわざCSSを書かなくて済むこちらがベスト。
ブラウザによって設定方法は違いますが、こちらはググれば簡単に出てくる情報ですので割愛します。
CSSで指定する
【方法1】下記コードを追加する。
chromeのみ有効のこの方法。
他ブラウザでは無効だったら、あまり意味のない方法ですね。
body {
-webkit-print-color-adjust: exact;
}【方法2】印刷時のみ背景画像をインライン画像として表示する
HTMLにインライン画像として設置し、CSSで背景として画像を設置します。
通常時はインライン画像をdisplay: none;にしておき、印刷用CSSでdisplay:inline;とします。
ただこの方法、SEO的にはどう評価されるかが気になるところ。
印刷用CSSの書き方
@media print{
.test img{
display:inline;
}
}と、背景印刷については、こちら側での簡単な解決方法がなく、個人での設定による印刷が推奨されているようです。
印刷時の表示については、クライアントすら気にしていないケースも多いのではないかと思いますので、制作側で注意しましょう。
今後はキャンペーンページやinformation系の情報などは特に印刷用CSSを設置するなど気をつけていきたいと思います。
