なぜ私のウェブページはブラウザで見たとおりに印刷されないのでしょうか?
一部のウェブページの印刷が異なるのは、**印刷スタイルシート*を使用しているためです。
プリントスタイルシートとは何ですか？
プリントスタイルシートとは、ウェブページをフォーマットするもので、印刷時には自動的にユーザーフレンドリーなフォーマットで印刷されます。印刷スタイルシートは何年も前から存在し、多くのことが書かれてきました。しかし、それを実装しているWebサイトは非常に少なく、悔しいことに紙に正しく印刷されないWebページが残っていることを意味します。
印刷スタイルシートを使用しているウェブサイトが非常に少ないのは驚くべきことです。
- 印刷スタイルシートはユーザビリティを非常に向上させます。また、ユーザーが画面上でこのリンクに気付き、通常のページの印刷方法(画面上部の印刷ボタンを選択するなど)よりも先にこのリンクを使用する必要があります。しかし、印刷に適したバージョンは、複数のウェブページにまたがる記事のように、複数のウェブページを同時に印刷する場合に便利です。
ソース ウェブサイトの印刷時に印刷スタイルシート(CSS)を無効にする
印刷スタイルシートを無効にするには？
最近、ウェブサイトのスナップショットを画面に表示されている通りに取得する必要がありました。つまり、背景色、広告、フルレイアウトが欲しかったのです。
1つのオプションは、ページをスクロールしながら連続したスクリーンショットを撮影し、Photoshopでそれらを元に戻すことです。これは時間がかかり、低解像度（72dpi）の画像が残ります。
これを行うもう一つの方法は、ページを印刷し、実際に印刷する代わりに PDF として「保存」することです。これは、ページを印刷するのとページを表示するのでは異なるレイアウトを定義していないページに対して非常にうまく機能します。
私にとって残念なことに、ユーザーがウェブサイトを印刷しようとしたときに新しいページスタイルを定義する「印刷」スタイルシートをウェブサイトに含めることは、ますます一般的になってきています。これはヘッダーで定義されており、以下のように見えます。
私のニーズに真に対応するオプションは1つしか見つかりませんでした。このプラグインを使用すると、すべてのスタイル、デフォルトスタイル、インラインスタイル、埋め込みスタイル、そしてご想像の通りの印刷スタイルを非常に簡単に無効にすることができます。
現在FirefoxとChromeに対応しています。私は主にSafariを使っているので、いつかSafariの拡張機能が来ることを心から願っています。私が見つけたSafariの唯一の選択肢は、すべてのスタイルを無効にすることです - ブラウザの最新バージョン(5.0.3)ではデフォルトで搭載されている機能です。これは開発中にテキストのみのブラウザでサイトがどのように表示されるかを確認するのに便利ですが、どのスタイルを無効にするかを選択する機能がないため、実用性は限られています。
以下は、Firefox で上記の拡張機能を使用して印刷スタイルを無効にした例です。
ソース 印刷スタイルシート - 決定版ガイド
