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

Web 体裁
勤怠管理システム「Dr.オフィスLookJOB2」は登録できる従業員数無制限で定額制

ホームページの画面全体を印刷したいという場面がありますよね。そんな時、ホームページを開きいつものように「印刷」をクリックすればプリントアウトは可能ですが、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. コロナ禍でも安心。SIAA認証の抗菌コピー機をご紹介

  2. 余白

    複合機でフチ無し印刷がしたい! そんなお悩みを解決する3つの方法を伝授

  3. 検定

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

  4. 複合機 掃除

    複合機のお手入れしていますか? 大掃除時や定期的なクリーニング方法を解説

  5. デジタル捺染を知らないなんて、ナッセンス? 進化し続けるプリント技術

  6. アイキャッチ

    ピンチ! 手元に資料が無い!? コンビニのマルチコピー機が救世主に

  7. 減価償却

    コピー機リース期間は法定耐用年数と減価償却で決まる?

  8. お金

    複合機の値段の相場とは?リース価格について徹底解説!

  9. barrier free

    ユニバーサルデザイン複合機 障がいをもつ人に優しいバリアフリー機5選

  10. 複合機構造

    複合機の中ってどうなっているの?構造・仕組みをわかりやすく解説!

  11. 画質調整でランニングコスト節約。適材適所で賢く使い分け。

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

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

コピー機リース見積
  1. セキュリティ 鍵

    コピー機の脆弱性にご注意!堅牢なセキュリティ対策にはUTMが必須。

  2. 用紙 反り返り

    湿気と用紙の仁義なき戦い!用紙の反り返り対策を徹底解説。

  3. 展示会 アート プロダウション機

    若手アーティストたちが富士フイルムのプロダクションプリンターで…

  4. imagePRESS C270/C265

    オフィス性能に加えてプロダクション機能が搭載、進化した二刀流の…

  1. ファクシミリ

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

  2. OKIショールームで聞いた『MICROLINE VINCI』

  3. モノカラー

    カウンター料金節約術!カラーでもモノクロでもないモノカラーとは?

  4. 悩む人

    複合機選びは販売店選びから。ヤンチャな営業と出逢ってしまった末路

  1. コンビニ マルチコピー機

    コンビニのマルチコピー機の実力とは…想像を超える機能が充実…

  2. 裏技

    複合機のちょっとした裏ワザ!知ってて損はありません。

  3. 複合機・プリンター選びのコンシェルジュ、事務機器ねっとのトリセツ

  4. jameswatt

    最古のコピー機はいつ、誰が、どうやって?コピー機の歴史ざっくり…

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