WEBサイトが印刷崩れした時の対処法3選

WEBサイトを作成し、印刷をすると表示画面やレイアウト等が崩れいたという事はないですか？

WEBサイトはパソコンで見るものですが、中にはWEBサイトのページを印刷して、取引先に商品やサービスを見てもらう資料にしたりするクライアントもいらっしゃいます。

そんな時にWEBサイトを印刷したら表示が崩れるので直してほしいという要望は以外とあったりします。

WEBサイトを印刷すると崩れてしまう現象は、プリンタやブラウザにも問題がある場合もありますが、

今回はWEBサイトを印刷した時に表示が崩れてしまった時の対処法をご紹介していきます。

ブラウザでの印刷設定を変更する

まずはブラウザで印刷設定を変更する事で、ある程度WEBサイトの印刷崩れを防ぐ事ができます。

ここでは主にgooglechromeとFirefoxを基に手順をご紹介いたします。

googlechromeで印刷をする場合

googlechromeで印刷をする場合では以下の手順で行います。

1. 右クリックで印刷をクリック
2. 印刷画面で詳細設定をクリックし「背景のグラフィック」にチェックを入れます

Firefoxで印刷をする場合

Firefoxでは以下の手順で印刷設定を行います。

1. ブラウザの右上のメニューアイコンから印刷をクリック
2. 印刷画面で詳細設定をクリックし「背景画像を印刷」してチェックを入れます

ブラウザの拡張機能(アドオン機能)を使う

ブラウザの拡張機能でWEBサイトをキャプチャ(スクリーンショット)して画像にする事でWEBサイトの印刷崩れを防ぐ方法があります。

こちらも主にgooglechromeとFirefoxを基に手順をご紹介いたします。

googlechrome・Firefoxの拡張機能(アドオン機能)

以下の拡張機能を使う事でWEBサイトをキャプチャ(スクリーンショット)して画像にし、印刷をする事ができます。

「Nimbus Screenshot & Screen Video Recorder」　※Firefoxでは「Nimbus Screen Capture: Screenshot, Edit, Annotate」という名前になります

この拡張機能をインストールすると、右クリックに「Nimbus Screenshot」という項目が追加され、「ページ全体」「表示されている部分」「選択したエリア」とキャプチャ(スクリーンショット)したい部分を選んで画像にしてくれます。
また、この拡張機能以外でも同じような機能を持った拡張機能がありますので、好きなものを選んでWEBサイトをキャプチャ(スクリーンショット)し、画像にして印刷する事で印刷崩れを防ぐ事ができます。

@media printを使ってCSSで印刷崩れを制御する

WEBサイトの印刷崩れを防ぐ方法として、CSSの「@media print」を使う事で印刷時にのみスタイルを効かせる方法があります。

参考コード

.text{
  font-size: 20px;
}
/* 以下の設定で.textはWEB上では20px、印刷時は15pxのサイズで表示されます */
@media print{
  .text{
    font-size: 15px;
  }
}

WEBサイトが印刷崩れした時の対処法まとめ

WEBサイトが印刷崩れをした時の対処方を3選ご紹介いたしましたが、いかがだったでしょうか？

WEBサイトの印刷時に表示崩れが気になる場合には是非お試し下さい！