ホームページを印刷したらレイアウトが崩れるのはなぜ? ブラウザ別解決方法を解説

Web 体裁

ホームページの画面全体を印刷したいという場面がありますよね。そんな時、ホームページを開きいつものように「印刷」をクリックすればプリントアウトは可能ですが、PCで見たままのレイアウトではなく、酷いものでは文字が端に寄っていたり、フォントがまるで違っていたり、画像が表示されていないということがあります。なぜこのような表示で印刷されるのでしょうか。

webデザインの体裁崩れ

レイアウトを崩さずに、PCに表示されたままの状態を印刷するにはどうしたら良いのでしょうか? 今回はホームページの体裁崩れをさせずに美しく印刷する方法を解説いたします。

<目次>
印刷したホームページが体裁崩れを起こす理由
Webサイトを画面のまま印刷する方法
Google Chromeの場合
Safariの場合
Firefoxの場合
Internet Explorerの場合
アプリケーション

印刷したホームページが体裁崩れを起こす理由

レスポンシブデザインもしかしたら自分の持っているPCが壊れてしまったからかもしれない、と思われるかもしれませんが、原因はPCやプリンター側ではなく、実はWebサイトの構造に原因があるのです。
最近のWebサイトは“レスポンシブWebデザイン”で作られていることが主流となっています。レスポンシブWebデザインとはWebサイトのデザインを、閲覧ユーザーが使用するデバイスの画面サイズに応じて表示レイアウトを最適化する、というWebデザイン構造を意味します。これまで多くのユーザーはPCからWebサイトを閲覧していましたが、近年はユーザーの使用デバイスにスマートフォンやタブレットなどが加わり、更にはテレビやビデオゲーム機に至るまで、多種多様な画面サイズの異なるデバイスが増えています。そのため、現在はあらゆる画面サイズで柔軟に可変させることで、使い勝手を向上させるレスポンシブWebデザインに注目が集まっているのです。
しかし、そのレスポンシブWebデザインという構造が裏目に出てしまい、印刷をした際には意図しないレイアウト崩れが起きてしまうのです。基本的にWebサイトはPCやスマートフォンなどのデバイスの画面上で見るものであって、ペーパーレス化を推進する現在においては、紙で印刷をすることは想定されていません。そのため、このようなWebサイトを見た目のまま印刷するためには、ほんの少しの工夫が必要なのです。

Webサイトを画面のまま印刷する方法

ホームページを画面で見たまま印刷したい! じゃあWebサイトの構造から変更しよう…! なんてことはできません。ですので、今回ご紹介する「Webサイトを画面で見たまま印刷」する方法としては、お使いのインターネットブラウザの設定の解決策をご紹介いたします。

Google Chromeの場合

<ソフトウェア・拡張機能>
Google ChromeまずはブラウザシェアNo.1のGoogle Chromeの場合です。「Awesome Screenshot」という機能拡張ソフトウェアを検索し、Chromeにインストールします。拡張機能とは、ブラウザに様々な機能を追加でき、使いこなすとWebサイトの閲覧がとても便利になる仕組みです。
この「Awesome Screenshot」なら、ホームページの体裁崩れなく印刷できます。印刷したいホームページを開いたら、右上の「Awesome Screenshot」のアイコンをクリックし、「Capture entire page」を選択します。画面が切り替わりますが、そこからはいつも通り印刷マークを押してプリントアウトしてください。この「Awesome Screenshot」という機能拡張の良いところは、複数ページにわたって印刷が可能な点です。文字が小さくなってしまうことを防ぐため、読みやすい状態での印刷が可能です。また、他にはホームページから「印刷」→「詳細設定」→「背景のグラフィック」のチェックボックスを設定すると、背景印刷の有無を選べます。

Safariの場合

<拡張機能>
SafariSafari(Mac)でホームページを印刷する場合も拡張機能を追加します。Google Chromeと同じ「Awesome Screenshot」をインストールして印刷を行ってください。こちらはGoogle Chromeでご紹介した操作方法と同じになります。

Firefoxの場合

<印刷設定・拡張機能>
Firefoxこちらも同じく、「印刷」→「ページ設定」→「背景色と背景画像を印刷」のチェックボックスにチェックを入れOKをクリックします。
また、FireShotというホームページ全体のスクリーンショットを撮影する拡張機能を利用してみると良いでしょう。
拡張機能であるFireShotをダウンロードすると、拡張機能としてFirefoxのブラウザページの右上にアイコンが表示されます。アイコンをクリックし、「ページ全体をキャプチャ」という項目が表示されるため「印刷」と書かれているボタンをクリックして印刷しましょう。

Internet Explorerの場合

<印刷設定・Adobe Acrobat>
Internet Explorerこちらも簡単な方法としては、「印刷」→「印刷プレビュー」→「ページ設定」ダイアログの「背景の色とイメージを印刷する」のチェックボックスにチェックしてOKボタンをクリックしましょう。
Acrobatがインストールされている場合は「Adobe Acrobat Create PDF Toolbar」を、Acrobat Readerがインストールされている場合は「Adobe PDF」を選択して有効にすることで体裁崩れなしの印刷が可能になります。
しかし、これらは印刷プレビューでホームページが適切に表示された場合です。もし印刷したいホームページがIE(Internet Explorer)の印刷プレビューで適切に表示されなかった場合は、Google Chromeや他のブラウザをインストールして印刷した方が良いでしょう。ちなみに、マイクロソフト社はIEのサポート提供を2022年6月15日(日本時間16日)に終了すると宣言しているため、まだIEをご利用の方はMicrosoft Edgeか、その他のブラウザへの切り替えをオススメします。Microsoft EdgeはPDFとして保存して印刷をすると画面の構成のまま印刷できるでしょう。もし体裁が崩れてしまった場合はGoogle Chromeに切り替え、Awesome Screenshotの方法を試すと良いでしょう。

アプリケーション

screen shot<スクリーンショット(アプリ)>
上記でご紹介してきた印刷方法は、拡張機能や印刷設定などでしたが、アプリケーションでホームページを綺麗に印刷することも可能です。下記のようにアプリケーションを使用して、Webサイトをスクリーンショットして印刷する方法もございます。

Mac

・WebScreenshot
Webサイトを長く一枚にしたキャプチャを印刷できます。
・Webキャプ
Webページを丸ごとキャプチャし、画像で保存が可能です。

Windows

・QuickCapture
日本語でわかりやすく、スクリーンショットの共有も可能です。
・Screenshot One Pro
英語ですが、Webページ全体をスクリーンショットできます。

※こちらのアプリケーションはMac、iPhone、iPadには対応しています。詳細はApp Storeをご覧ください。
以上がWebサイトを画面で見ているまま印刷する方法になります。このように何かをインストールしてまで時間をかけたくない、一枚に繋がっているなどの綺麗さは求めていないという方には、PC自体のスクリーンショットで解決すると良いでしょう。

<スクリーンショット(OSショートカットキー)>

Mac

スクリーンショットを撮るには、「Shift」「command」「4」の3つのキーを同時に長押しします。
また、切り取りたいときは、「Shift」「command」「4」の 3つのキーを同時に押すと切り取りカーソルが出てきます。これらはデスクトップに保存されます。

Windows

「Windows」キーを押しながら 「Print Screen」 キーを押すと、画面全体のスクリーンショットが撮れます。
また、「Windows」キー+「Shift」キー+「S」キーを同時に押し、「切り取り&スケッチ」を起動させて切り取るという方法もございます。

筆者の感想としては、Google Chromeの「Awesome Screenshot」ソフトウェアと、アプリケーションのWebキャプの使用感が簡単で良いと思いました。ホームページを紙資料として使用する際に、体裁が崩れてしまうホームページの場合は上記の方法を試してみてください!

富士ゼロックス 富士フィルムビジネスイノベーションApeos C6580コピー機リース シャープBP-60C26コピー機リース imageRUNNER ADVANCE DX C3835Fコピー機リース

この記事を読まれた人はこちらの記事もチェックしています

  1. 校閲のプロに学ぶ、見落としがちな資料の誤植を防止する方法

  2. 複合機マジック!?模様が消えて文字が浮かび上がる地紋コピーの種あかし

  3. 紙詰まり

    紙詰まりはローラーが原因かも?アナタでもできるお手入れ方法

  4. コロナ禍でも安心。SIAA認証の抗菌コピー機をご紹介

  5. documentcloud

    各メーカーの最新機能、ドキュメントクラウドを比較紹介!

  6. 検定

    目指せ!複合機博士。“事務機器ねっと検定”に挑戦

コピー機リース満足度No.1

最適な複合機選び承ります

    コピー機/複合機/プリンターのリース購入
    【クイックお問い合わせ】


    1. 販促物

      プロダクションプリンターが更に進化し業務効率UP!

      2022.06.17

    2. 受賞

      富士フイルムBI、全国発明表彰「朝日新聞社賞」「発明実施功績賞」を受賞

      2022.06.02

    3. モバイルスタンド スマホスタンド

      モバイルスタンド“もれなく”プレゼント!お見積りキャンペーン実施…

      2022.05.16

    4. パンドラの果実 美術提供

      ドラマ「パンドラの果実 科学犯罪捜査ファイル」に美術協力しました。

      2022.04.23

    1. 中古

      中古コピー機は“安物買いの銭失い”!? 気をつけたい3つの欠点

      2022.02.18

    2. 書類 検索

      コピー機のOCRでDX推進。紙資料のデータ化で検索が捗る!

      2021.12.20

    3. 複合機マジック!?模様が消えて文字が浮かび上がる地紋コピーの種あ…

      2021.05.19

    4. サテラ

      新型Satera登場!コンパクト機ながら良いとこ取りの特長8選

      2022.03.10

    1. レーザープリンター

      テレワークに最適なオススメ小型レーザープリンター特集

      2021.02.19

    2. ファクシミリ

      FAXの手間を大改革! 複合機を専有せずに大量送信する賢い方法

      2021.04.23

    3. インク2

      モノクロ印刷なのにカラーインクが減るのはなぜ?

      2020.10.21

    4. 見積書

      見積書の正しい見方と、信頼できる販売店の選び方

      2022.03.08

    お問い合わせはお気軽に!

      【クイックお問い合わせ】







      JIS Q 27001:2006(ISO/27001:2005)
      ISO/ISMS(適用範囲:HCグループ)
      一般人材派遣業:労働大臣許可 般13-01-0526
      人材紹介業:労働大臣許可 13-ュ-010435
      宅地建物取引業:東京都知事(2)第98397号
      一般建設業:東京都知事許可(般-1)第150856号
      高度管理医療機器等販売/貸与業第5502205165号

      プリンター・複合機リース等に関するご相談や見積依頼は無料。他店より1円でも高い場合はご相談下さい!
      ☎ 0120ー744−779