シェアオフィス6F
貸会議室6F

レスポンシブで制作したWebサイトを印刷しようとしたら、レイアウトが崩れてる!

 

なんてこと間々ありますよね。
印刷前提のページであれば専用のcssを用意したりしますが、そうでなければ印刷のことはあまり考えませんよね。
で、最近はほとんどレスポンシブで制作していくので、いざ出来上がったサイトをお客さんが検証して印刷プレビューをしようものなら、なんじゃこりゃとなるわけです。
レスポンシブで作ったサイトが全てそうなるわけではないのですが、cssの書き方によっては印刷時にレイアウトが崩れたりします。
 

今回は下記の記述が原因でした。

@media only screen and (min-width: 768px) { }

 

レスポンシブ対応するときのよくあるメディアクエリの書き方ですよね。
この「only screen」ってやつが悪さをしてます。
読んで字の如く、「画面のみ」指定になっているんです。だから印刷時にはこのスタイルが無視されてしまってました。
なので記述を修正です。

@media print, screen and (min-width: 768px) { }

 

これで印刷時にもスタイルが適用されます。
もちろん印刷用CSSを用意する場合は「only screen」でないとバッティングするので、状況に応じたメディアクエリを記述しましょう。
また、min-width,max-width の指定にも注意してください。ここを考慮せず一律「print,screen」としてしまうと、モバイルだけに適用したいスタイルまで反映されてしまい、想定と異なるレイアウトになってしまいます。
 

ここまでやってプレビューで確認していると、ところどころ画像が出てないなーってこともよくありますよね。
原因は単純で、ブラウザのデフォルト設定が「背景の色・画像を印刷しない」となっているためです。
余計なインクを消費しない省エネ設定なんですかね?基本どのブラウザでもデフォルトはこうなっています。
そんな時はこの一文を。

-webkit-print-color-adjust: exact;

ただし、このスタイルはChrome用にしかなく、Firefox、Safariでは用意されていないので、これらの場合は他の方法で対応しなきゃです。「display:list-item」を利用するとか。
また、IE8もいうこと聞いてくれません。
 

上記をいれて対応終わったーと思ったら、いつものあいつがやってきます。そうIE君です。。。
ご存じのとおり、IE8はそのままではレスポンシブで制作したサイトがきれいに表示されません。
そこで多くの方は対応が簡単なJS実装をされているかと思いますが、これが印刷までは対応していなかったりします。
なので印刷まで考慮されたJSに切り替えます。今回は「html5shiv-printshiv.min.js」を適用しました。
 

以上で対応は完了です。

今回のケースはあくまで一例です。もちろん他に原因があることもありますし、対応方法ももっといいものがあるかもしれません。
ただ他の箇所に影響を与えず対応工数もそんなにかけたくないってときには、この方法を試してみては如何でしょうか。

スポンサーリンク

スポンサーリンク

この記事を書いた人

7Fを運営している株式会社コミュニティコムでプログラマーをしています。担当はWeb制作ですが、受付にもフワッと座ってます。呼称は「ゆーすけ」なので気軽に呼んでください。7F受付にあるチェックインシステムを作った人だったりします。好きなものはお酒です。でも痛風なのでビールは与えないでください!だんだん年齢に抗えなくなってきたので、イイ感じにできる運動があれば紹介してください。



メールマガジン登録

週1回程度でメールマガジンにて、コワーキングスペース7Fのイベントや勉強会情報や近況、Web関係や地域情報などを配信しています。
もし良ければ以下のフォームにメールアドレスを入力して登録してくださいね!

7F情報をぜひフォローください!


スポンサーリンク

月額会員募集中の申し込みフォーム
イベント情報
会議室ご予約
オープンスペースご予約
無料見学ご予約
お問い合わせ
メールマガジン登録フォーム
フロアマップ
よくある質問
Amazonコワーキングスペース7Fのほしい物リスト
一時託児施設利用
7F大学
リブライズ
Eightどこでもスキャン計画
7Fスタッフ募集のお知らせ
シェアオフィス6F
貸会議室6F

混雑状況やイベント情報

サイト内検索