WebブラウザでWYSIWYP（あなたが見るものを印刷する）を入手するにはどうすればいいですか？

Question

ブラウザからWebページを印刷するときには、ブラウザに表示されている内容とまったく同じ紙に書き込もうとしています。正確には：私は、ブラウザが同じページの内容を同じように、高さが無限のキャンバスを除いて同じようにレンダリングしてから、印刷特有の方法で物理的な紙のページに結果を分配する方法を決定すると思います。

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

私が欲しいものを手に入れる方法はありますか（スクリーンショットを撮ること、それらを切って貼り付けること、そして結果として生じる画像を印刷すること以外に）。私が使っているウェブブラウザ（Firefox、Chrome、Safari、IE、またはOpera）に「このページを任意の高さのブラウザウィンドウに表示するように印刷する」と伝える方法はありますか。

（PS：また見なさい：スクリーンCSSを使用してブラウザから印刷するか。）

Benjamin · Accepted Answer

Chromeの開発者ツールにはこの機能が組み込まれていますが、非常にわかりにくい場所にあります。

開発者ツールを開きます（Windows： F12 または Ctrl+Shift+I、マック： Cmd+Opt+I）

DevToolsのカスタマイズと制御メニューボタンをクリックし、その他のツール>レンダリング設定を選択します。 - ）（または新しいバージョンではレンダリング）。

レンダリングタブの印刷メディアのエミュレートチェックボックスをオンにしてスクリーンメディアタイプ。

これからほとんど引用した答え。違いについては下記を参照してください。

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

注：この回答のためのインスピレーションは https://superuser.com/a/568847/176146 から来ました。しかし、この答えの実際のテキストは lmeurs ' answer からのものです。それはほとんどまったく同じですが、我々は彼らの答えと正反対のことをしようとしているので、オーバーライドをPrintに設定する代わりに次のように設定されます。画面。

DavidPostill · Answer

ブラウザに表示されるものがWebページに印刷されないのはなぜですか。

一部のWebページの印刷方法が異なるのは、印刷スタイルシートがあるためです。

印刷スタイルシートとは

印刷スタイルシートはWebページをフォーマットするので、印刷時に自動的にユーザーフレンドリーな形式で印刷されます。印刷スタイルシートは何年も前から出回っていて、たくさん書かれています。それでも、それらを実装しているWebサイトはほとんどなく、欲求不満なことに紙に正しく印刷できないWebページが残されています。

印刷スタイルシートを次のように使用しているWebサイトはほとんどありません。

印刷スタイルシートを使用すると、特に大量のコンテンツを含むページ（このようなもの）の使い勝手が大幅に向上します。

それらは驚くほど早くセットアップが簡単です

一部のWebサイトではページの印刷用バージョンへのリンクが提供されていますが、もちろんこれを設定して維持する必要があります。また、ユーザーが画面上のこのリンクに気付いてから、ページを印刷する通常の方法よりも先にそれを使用することを要求します（たとえば、画面上部の印刷ボタンを選択することによって）。ただし、複数のWebページにまたがる記事など、多数のWebページを同時に印刷する場合は、印刷用のバージョンが便利です。

ソース Webサイトを印刷するときに印刷スタイルシート（CSS）を無効にする

印刷スタイルシートを無効にする方法

私は最近、Webサイトのスナップショットを自分の画面に表示されているとおりに正確に取得する必要がありました。つまり、背景色、広告、フルレイアウトが必要でした。

1つの選択肢は、ページを下にスクロールしながら順次スクリーンショットを撮り、それをPhotoshopでつなぎ合わせることです。これには時間がかかり、低解像度（72dpi）の画像が残ります。

これを行うもう1つの方法は、ページを印刷してから実際に印刷するのではなくPDFとして "名前を付けて保存"することです。これは、ページを印刷するのとページを表示するのとで異なるレイアウトを定義していないページには非常に有効です。

私にとって残念なことに、ユーザーがWebサイトを印刷しようとしたときに新しいページスタイルを定義する「印刷」スタイルシートをWebサイトに含めることがますます一般的になっています。これはヘッダで定義されており、次のようになります。

私は自分のニーズに本当に応える唯一の選択肢を見つけました： Chris Pederickによって開発された "Web Developer"アドオン/拡張。

このプラグインを使用すると、すべてのスタイル、デフォルトスタイル、インラインスタイル、埋め込みスタイル、そして印刷スタイルを簡単に無効にすることができます。

現在FirefoxとChromeで利用可能です。私は主にSafariを使用しているので、私は本当にSafari拡張がいつか来ることを願っています。私がSafari用に見つけた唯一のオプションは、すべてのスタイルを無効にすることです - ブラウザの最新バージョン（5.0.3）にデフォルトで来る機能。これは開発中にあなたのサイトがテキストのみのブラウザでどのように表示されるかを見るのに便利ですが、無効にしているスタイルを選択する機能はありません。