印刷 – WebブラウザでWYSIWYP（目に見えるものを印刷する）を取得するには？

ブラウザからウェブページを印刷するとき、私はブラウザで見ている内容と同じ内容を紙に印刷することを期待しています。正確に言うと。ブラウザが同じページの内容を、高さが無限にあるキャンバス上を除いて同じようにレンダリングし、その結果を紙の物理的なページ間でどのように分配するかを、印刷に特化した方法で決定することを期待しています

しかし、それは多くのウェブサイトで起こっていることは全くありません。全く違うものを印刷しているかもしれません。私はブラウザにこのようなことをお願いしたことはありませんし、そうなってほしくないと思っています

欲しいものを手に入れる方法はありますか？（スクリーンショットを撮って、丹念に切り取って貼り付けて、出来上がった画像を印刷する以外に）？私が使っているウェブブラウザ（Firefox、Chrome、Safari、IE、Opera）に伝える方法はありますか？”私が使っているウェブブラウザ（Firefox、Chrome、Safari、IE、Opera）に「このページを任意の高さのブラウザウィンドウでレンダリングするように印刷してください」と伝える方法はありますか？

(PS: も参照してください。Print From Browser Using Screen CSS?)

　 80　 None　 2014-11-28

ベストアンサー

Chromeにはこの機能が開発者ツールに組み込まれていますが、非常に目立たない場所にあります

デベロッパーツール（Windows：F12またはCtrl+Shift+I、Mac：Cmd+Opt+I）を開きます
カスタマイズと制御 DevTools ハンバーガーメニューボタンをクリックして、[その他のツール] を選択し、レンダリング設定（新しいバージョンではレンダリング）を選択します
レンダリング］タブの［印刷メディアをエミュレートする］チェックボックスにチェックを入れ、［画面メディアタイプ］を選択します

ほとんどがこの回答から引用しました。違いは以下を参照してください

これで、印刷時には、表示されている通りに印刷されます。印刷するまで開発者ツールを開いたままにしておいてください。開発者ツールを閉じると、レンダリングの設定が通常の状態に戻ります

注：この回答のインスピレーションは、https://superuser.com/a/568847/176146から来ています。しかし、この回答の実際のテキストは、lmeurs‘ answerからのものです。これはほとんど同じですが、私たちは彼らの答えの真逆のことをしようとしているので、オーバーライドをPrintに設定する代わりに、Screenに設定されています

47　 Benjamin　 2017-11-26

なぜ私のウェブページはブラウザで見たものが印刷されないのですか？

あなたのウェブページの一部の印刷が異なるのは、印刷スタイルシートがあるからです

プリントスタイルシートとは？

印刷スタイルシートはウェブページをフォーマットするもので、印刷時には自動的にユーザーフレンドリーなフォーマットで印刷されます。印刷スタイルシートは何年も前から存在し、多くのことが書かれてきました。しかし、それを実装しているウェブサイトは非常に少なく、紙に適切に印刷できないウェブページを放置しているのが現状です
印刷スタイルシートを使用しているウェブサイトが非常に少ないのは驚くべきことです
印刷スタイルシートは、特に多くのコンテンツ（このようなもの！）を持つページのユーザビリティを非常に向上させます
彼らは驚異的に迅速で簡単に設定することができます
いくつかのウェブサイトでは、印刷に適したページへのリンクを提供していますが、もちろんこれは設定して維持する必要があります。また、ユーザーが画面上でこのリンクに気付き、通常の印刷方法（例えば、画面上部の印刷ボタンを選択するなど）よりも先にこのリンクを使用する必要があります。しかし、複数のウェブページにまたがる記事のように、複数のウェブページを同時に印刷する場合には、印刷に適したバージョンが便利です

出典ウェブサイトを印刷するときに印刷スタイルシート（CSS）を無効にする

印刷スタイルシートを無効にするには？

私は最近、それが私の画面に表示されているように正確にウェブサイトのスナップショットを取得する必要がありました。つまり、私は背景色が欲しかった、広告が欲しかった、フルレイアウトが欲しかった
ページをスクロールしながら連続したスクリーンショットを撮影し、Photoshopで元に戻すという方法もあります。これは時間がかかり、低解像度(72dpi)の画像になってしまいます
これを行うもう一つの方法は、ページを印刷してから、実際に印刷するのではなく、PDFとして「保存」することです。これは、ページを印刷するときとページを表示するときに異なるレイアウトが定義されていないページでは、非常にうまく機能します
私にとっては残念なことに、ユーザーがウェブサイトを印刷しようとしたときに新しいページスタイルを定義する「印刷」スタイルシートをウェブサイトに含めることがますます一般的になってきています。これはヘッダーで定義されており、以下のように見えます
私は本当に私のニーズを満たす唯一のオプションを見つけました。Chris Pederick.
このプラグインを使うと、すべてのスタイル、デフォルトスタイル、インラインスタイル、埋め込みスタイル、そして印刷スタイルを非常に簡単に無効にすることができます！このプラグインを使うと、すべてのスタイル、デフォルトスタイル、インラインスタイル、埋め込みスタイル、そして印刷スタイルを無効にすることができます
現在はFirefoxとChromeに対応しています。私は主にSafariを使用しているので、いつかSafariの拡張機能が来ることを心から願っています。私が見つけたSafariの唯一の選択肢は、すべてのスタイルを無効にすることです – ブラウザの最新バージョン(5.0.3)ではデフォルトで搭載されている機能です。これは開発中にテキストのみのブラウザでサイトがどのように表示されるかを確認するのに便利ですが、どのスタイルを無効にしているかを選択する機能がないと、実用性が限られてしまいます

Firefoxで上記の拡張機能を使って印刷スタイルを無効にした例を紹介します

ソース印刷スタイルシート – 決定版ガイド印刷スタイルシート

24　 DavidPostill　 2014-11-28

Firefox用のプラグインなしのソリューションです。Web Developer Tools を開き、Default Developer Tools (ギアアイコン) の “Take a screenshot of the entire page.” にチェックを入れます。この部分は一度だけやってください

次に、デベロッパーツールでカメラのアイコンをクリックします。ページ全体が.pngとして保存されます。ここから印刷したり、pdfに変換したりすることができます

10　 Russ　 2017-05-09

私はChromeの拡張機能を使用しています。ウェブページのスクリーンショット2回クリックするだけで、ウェブページ全体がjpgやpdfに変換されます。もう自分でスクリーンショットを貼り付ける必要はありません。このページは次のようになります。 Webpage screenshot demo