多くのサイトにはページの印刷可能なバージョンを表示する機能がありますが、それらを使用することは常に便利ですか？
文書を印刷する際の主な問題は、印刷の質の低さ、不必要な情報（インターフェイス要素など）の存在、および色の誤りです。 スタイリングには、 @ mediaルールを使用できます。
@media print { }
ユーザーが画面に表示されたデザインでページを印刷したい場合、スクリーンショットを撮って印刷します。 印刷バージョンは、紙からテキストを簡単かつ快適に読むために設計されています。 したがって、まず、ページから余分なものをすべて削除する必要があります：メニュー、大規模なヘッダーまたはフッター、背景画像など、ヘッダー、画像付きコンテンツ、ウェブサイトのロゴ、ページURLのみを残します。 たとえば、次のコードは、サイトのサイドバー、ヘッダー、フッターだけでなく、H1ヘッダーも非表示にします。
h1, div#header, div#sidebar, div#footer { display: none; }
ページ印刷ルール
1.最新のブラウザは背景画像を削除できます。 ただし、 background-image：noneを追加することをお勧めします。これにより、古いブラウザでもこれを行うことができます。
2.サイズをピクセル単位で割り当てると、印刷されたページと画面上の表示が一致しない場合があります。 したがって、インチ、センチメートル、またはパーセンテージを使用する価値があります。
3.次のコードを使用すると、用紙をクリックできないため、ハイパーリンクの代わりに完全なURLを表示できます。
a:after {content:" <" attr(href) ">";
コードを少し変更することにより、外部リンクのみにURL表示を追加できます。
a[href^=http]:after {content:" <" attr(href) ">";
4.大きなテキストの場合、部分に分割することが適切な場合があります。 次のコードは、各H3ヘッダーのコンテンツを分割し、新しいページに印刷します。
h3 { page-break-before: always; }
また、このコードは、新しいページから各記事を印刷するのに役立ちます;ブログエントリのリストを印刷するときに役立ちます。
article + article { page-break-before: always; }
5.暗いまたは明るいデザインのサイトのスタイルを、標準の配色（白い背景に黒のテキスト）に再割り当てすることをお勧めします。 これは読みやすく、消耗品をユーザーのプリンターに保存するのに便利です。
正しい表示
上記のように、最新のブラウザは印刷時に不要な要素を削除できますが、これは必ずしも必要ではありません。 Firefoxでは、ユーザーは結果の外観を制御できます。ChromeとSafariでは、以下のコードを使用して元のスタイルを表示できます。
* { -webkit-print-color-adjust: exact; }
実際の動作：
印刷品質
多くの場合、印刷結果は画面上の元の結果と非常に異なっています。 この一般的な理由の1つを簡単な例で分析します。 暗い背景に明るいテキストがあります。
次のCSSを使用します。
header { background: #000; color: #fff; padding: 1rem; font-family: Avenir, Arial, sans-serif; }
ブラウザは、印刷バージョンを通常にしようとします。
ページ上にロゴなどの画像がある場合、ブラウザはそれを一切修正せず、ひどく判明します。
透明性のあるベクター画像をロゴとして使用すると、すべてがさらに悪くなります。
この恐怖は、CSS3フィルターを使用することで回避できます。
@media print { header { background: none; color: #000; } header img { -webkit-filter: invert(100%); filter: invert(100%); } }
判明した：
Firefoxの場合、SVGを使用できます。
<svg xmlns="http://www.w3.org/2000/svg"> <filter id="negative"> <feColorMatrix values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0" /> </filter> </svg>
CSS：
@media print { header { background: none; color: #000; } header img { filter: url(inverse.svg#negative); -webkit-filter: invert(100%); filter: invert(100%); } }
IE9の場合、 Lea Verouのソリューション：
<!--[if IE 9]> <style> @media print { header:after { content:""; display: block; height: 1px; width: 1px; position: absolute; top: 100px; right: 100px; outline: 100px solid invert; } } </style> <![endif]-->
使用した材料：