ウェブ初心者のおぼえがきスマートフォン用の表示で見るwebかたつむりウェブデザインを勉強中2017-07-19画面レイアウトのまま印刷ができない、、というご指摘が。考えたことなかったですね。キットそんなに大変なことにはならない、と感じていたので調べてみると思いのほかサクッと片付きました。screen」に変更しました。して、とりあえずは大きな崩れが解消しました。(max-width:767px)">きちんとA4にプリントできるようにするにはもうひと手間が必要です。!IMPORTANT;}}レスポンシブで制作したWebサイトを印刷しようとしたら、レイアウトが崩れてる!なんてこと間々ありますよね。印刷前提のページであれば専用のcssを用意したりしますが、そうでなければ印刷のことはあまり考えませんよね。最近はほとんどレスポンシブで制作していくので、いざ出来上がったサイトをお客さんが検証して印刷プレビューをしようものなら、なんじゃこりゃとなるわけです。レスポンシブで作ったサイトが全てそうなるわけではないのですが、cssの書き方によっては印刷時にレイアウトが崩れたりします。今回は下記の記述が原因でした。}レスポンシブ対応するときのよくあるメディアクエリの書き方ですよね。screen」ってやつが悪さをしてます。読んで字の如く、「画面のみ」指定になっているんです。印刷時にはこのスタイルが無視されてしまってました。}これで印刷時にもスタイルが適用されます。screen」でないとバッティングするので、状況に応じたメディアクエリを記述しましょう。指定にも注意してください。ここを考慮せず一律「print,screen」としてしまうと、モバイルだけに適用したいスタイルまで反映されてしまい、想定と異なるレイアウトになってしまいます。ここまでやってプレビューで確認していると、ところどころ画像が出てないなーってこともよくありますよね。原因は単純で、ブラウザのデフォルト設定が「背景の色・画像を印刷しない」となっているためです。余計なインクを消費しない省エネ設定なんですかね?基本どのブラウザでもデフォルトはこうなっています。そんな時はこの一文を。exact;ただし、このスタイルはChrome用にしかなく、Firefox、Safariでは用意されていないので、これらの場合は他の方法で対応しなきゃです。「display:list-item」を利用するとか。IE8もいうこと聞いてくれません。上記をいれて対応終わったーと思ったら、いつものあいつがやってきます。ご存じのとおり、IE8はそのままではレスポンシブで制作したサイトがきれいに表示されません。そこで多くの方は対応が簡単なJS実装をされているかと思いますが、これが印刷までは対応していなかったりします。印刷まで考慮されたJSに切り替えます。今回は「html5shiv-printshiv.min.js」を適用しました。以上で対応は完了です。今回のケースはあくまで一例です。他に原因があることもありますし、対応方法ももっといいものがあるかもしれません。他の箇所に影響を与えず対応工数もそんなにかけたくないってときには、この方法を試してみては如何でしょうか。sliderお役立ち記事は保存したい。2上のPC用ページをレスポンシブに変える。