Webページを画面どおりそのまま印刷する方法

2016-07-202024-05-04

この記事にはプロモーションが含まれています

ミーティングや打ち合わせの資料用にWebページを印刷して！とか言われることってないですか？いまだにあるのです。ノートPCやタブレットを持ち歩いて見せればいいじゃんっていう話なんですが、どうしても紙にして持っていきたいということがあります。

そんな時にブラウザから普通に印刷しても期待通りに印刷されないことが多々あります。テキストが小さすぎたり、画像が表示されていなかったり、レイアウトが崩れたり。このような場合、イライラしてしまいますよね。

この記事ではWebページを印刷するときの以下のような悩みを解決します。

Webページのいらない部分は印刷しない、広告なしで印刷したい、という場合はこちらの記事で詳しく解説しています。
Webページいらない部分は印刷しない、広告削除して印刷する方法。PrintWhatYouLikeの使い方。

Webページを見たまま印刷できない原因

WebページのデザインにはCSSスタイルシートが使われています。通常、CSSはPCモニターやスマホ画面に合わせて設定されていてプリント用には最適化されていない場合、印刷するとWebページのレイアウトが崩れることがあります。

また最近のWebサイトはほとんどがレスポンシブデザインで、デバイス（PC、スマホ、タブレット）の幅に合わせて、レイアウトを調整するようになっています。

しかし印刷時のレイアウトは想定されていない場合があるため、画像やテキストの配置が変わってしまたり、画像の解像度が低いと印刷でぼやけたりという問題が起きることがあります。

見た目通りそのまま印刷できないという問題でよくあるのは、Webサイトのメインビジュアル画像や、背景画像が印刷できないということです。

これはブラウザの設定で解決できることが多いです。

Webサイトで背景画像として配置されている画像は、初期状態では印刷されない設定になっています。

例としてAppleのホームページです。Mac SafariでのAppleのWebサイトはこのように表示されています。

このページを印刷しようとすると。。。印刷プレビューは無残なイメージが表示されています。

印刷設定にある「背景をプリント」にチェックを入れます。これで背景画像がプリントされます。（Mac Safariの場合）

Firefoxでは、プリントプレビュー画面の下へスクロールしていくと「背景画像をプリントする」があります。

Google Chromeの場合は、印刷プレビューで「詳細設定」をクリックすると新たな設定項目が表示されます。その中のオプションにある「背景のグラフィック」にチェックを入れます。

Google Chromeでは背景画像を印刷できるCSSがあるため、背景のグラフィックにチェックが入っていなくても背景画像が印刷できる場合があります。（Webサイトの設定によって異なります）

上記のAppleサイトの印刷プレビューをみると、背景画像の印刷はできますがレイアウトは画面で見た通りにはなっていません。このような場合は、ページ全体をスクリーンショットを撮って画像化して印刷する方法があります。

Webサイトのような縦に長いページのスクリーンショットを撮る場合は、ブラウザの拡張機能を使うのが一番手軽です。

スクリーンショットが撮れる拡張機能

Awesome Screenshot（Google Chrome, Edge, Firefox, Safari ）
スクリーンショット以外にも画面録画もできる多機能なスクリーンショット拡張機能。
FireShot（Chrome, Firefox, Safari）
ページ全体、見えている部分、選択した範囲でスクリーンショットを撮ってPNG JPG, PDFに出力できる。
Save Page WE （Chrome, Firefox）
以前はPearl Crescent Page Saverという名前でしたが変わったようです。固定されたナビゲーションバーが繰り返さずキャプチャできるようです。
GoFullPage – Full Page Screen Capture （Chrome）
ページ全体のスクリーンショットを撮るのみのシンプルな拡張機能。画像以外にPDFにも出力可能。