ホームページの制作が進んでいくと、ページを印刷して直接修正内容を書きこまれる方も多くいらっしゃいます。

その時にお客様の用意された「ウェブページを印刷したもの」がとにかく崩れていて、元のデザインがどんなものだったか判断もむつかしいケースが多々あります。

ホームページは印刷物ではないので、印刷用の作り方（CSSというファイルを印刷用に別途用意する）をしていないと、見たままに印刷することができません。

そこで、ホームページ（WEBページ）を見たままに印刷する方法をお伝えします。

ホームページ制作途中で、修正やアイデアなどを直接書き込みたい方は是非ご一読ください。

色々な方法がありますが、完全に見たままに印刷するにはこれが一番確率が高い　という方法です。

WEBページのスクリーンショットを撮って
それを画像として印刷する

WEBページの印刷で一番厄介なのはCSSで背景に設定された画像が表示されないところです。　これは印刷時の「印刷」→「背景」→「背景のグラフィック」へチェック入れることで解決されます。

しかし、背景だけではなくレイアウト的に崩れてしまうところはサイトによって多々出てきます。「できるだけ見たままに」印刷をするにはページを丸ごとスクリーンショットおってしまうのが一番です。

まずはページを１枚の画像にしてしまい、それを印刷するといった流れです。

WEBページのスクリーンショットを撮る方法（ブラウザ別）

Google Chromeの場合

クロームの場合デベロッパーツールからスクリーンショットを撮るのが早いのですが、これはこれでけっこう手間なので「拡張機能」を使います。ここhttps://chrome.google.com/webstore/category/extensions?hl=ja 　から、クロームで使える様々な拡張機能が探せます。

その中でこれ

「ウェブページ全体をスクリーンショット-FireShot」

https://chrome.google.com/webstore/detail/take-webpage-screenshots/mcbpblocgmgfnpjjppndjkmgjaogfceg?hl=ja

右上の「Chromeに追加」をクリックしてインストールするだけ。

するとブラウザの右上にこんなアイコンが表示されます。

あとは、スクリーンショットを撮りたいページを開いて、この「S」をクリックするだけ。

クリックすると

• ページ全体をキャプチャ
• 表示部分をキャプチャ
• 選択範囲をキャプチャ

と表示され、表示のまま全体を保存したい場合は「ページ全体をキャプチャ」をクリックする　といった具合です。

１か所のために全体をキャプチャするのもバカらしいな　という時は、表示部分をキャプチャしたり、選択範囲のみをキャプチャしたり使い分けると良いでしょう。

これ、慣れるとすごく使えます。

マイクロソフトEdgeの場合

エッジはすごく楽です。最初から上記の機能が付いています。

1. Edgeで印刷したい画面（スクリーンショットを撮りたい画面）を開いたら、右上の３つの点をクリック
   または、ページ上の何もないところで右クリックをしても表示されます。
2. 開いた中にWEBキャプチャという項目があるので、これをクリック

そうすると

• 無料選択（任意のエリア）
• ページ全体

と表示されるので、どちらか好きな方でスクリーンショットを撮ります。

Fire foxの場合

Firefoxもとても簡単です。使い勝手もFirefoxが一番良いように思います。

1. ウェブページの何もないところで右クリック
2. 「スクリーンショットを撮る」をクリック

これだけです。

同じく、全体を保存するのか表示範囲を保存するのか聞かれますので、その時の利用方法に合わせてクリックします。

とりあえずこれでスクリーンショットは撮れました。

スクリーンショット＝ほぼウェブページ見た目のままになっていると思います。

WEBページを印刷する方法

小さいページならそのまま画像印刷でOK

上記でページを画像として保存しました。小さいWEBページならこれを普通の画像印刷で印刷してもOKです。

しかし、WEBページは時にすごく大きく縦長になっていたりします。縦長のページを普通に画像印刷すると、全領域を印刷するため、すっごい細い小さなページとして印刷されてしまいます。

そういう場合は、画像で保存したスクリーンショットをPDFで開きます。

大きいページ、長いページの任意の箇所のみを印刷する方法

• 画像が保存されているフォルダのなかで画像を右クリックし、「Adobe PDFに変換」をクリック

すると画像がPDFで開きます。

PDFで印刷したい箇所を表示します。PDFを全画面で表示しているかたは一度全画面表示をやめて、ウインドウサイズをいろいろと変えながら、できるだけ印刷したい領域がちょうどPDF上表示されているようにします。

1. 印刷アイコンをクリック
2. 「印刷するページ」内の「詳細オプション」をクリック
3. 「現在の表示範囲」をクリック
4. 右下のプレビューで意図したところのみが表示されているかを確認し、問題なければ「印刷」をクリック

これで、任意の場所のみが印刷できました。

↓動画はこちら↓