CSS は印刷動作を制御して印刷効率をどのように高めることができますか?

選択印刷用の CSS

広範囲の Web ページを印刷するのは面倒で、不要な要素を含める必要がある場合があります。 CSS は、「@media print」機能を通じてソリューションを提供します。その仕組みを理解すると、印刷プロセスを合理化するのに役立ちます。

ブラウザのサポート

ほとんどの最新のブラウザは「@media print」をサポートしています。 Chrome、Firefox、Safari、Edge などの人気のあるブラウザで広く採用されています。この機能は、印刷動作​​を制御するための信頼できる標準となっています。

特定の要素の表示

印刷中に要素を選択的に表示するには、次の 2 つの方法のいずれかを利用できます。

1. ホワイトリスト手法 (表示: ブロック):

   • CSS クラス (例: "printable") を作成します。
   • 「printable」クラスを持つ要素を除く、メディア印刷クエリ内のすべての要素に「display: none」を適用します。
   • これにより、印刷中に「printable」クラスを持つ要素のみが表示されたままになります。

2. ブラックリスト手法 (非):

   • メディア印刷クエリ内のすべての要素に「display: none」を適用します。
   • 「display: none」ルールから「printable」クラスの要素を除外するには、「not」セレクターを使用します。
   • このアプローチは論理的ですが、制限によりすべてのブラウザーで機能するとは限りません。 CSS サポート内。

コード例

ホワイトリスト手法の使用:

閲覧中に要素を非表示にする

閲覧中に特定の要素を非表示にし、印刷中に表示するには、次のコードを使用できます。

このコードは、「noPrint」を使用して要素を非表示にします。閲覧時は「onlyPrint」クラスで要素を表示し、印刷時は「onlyPrint」クラスで要素を表示します。

以上がCSS は印刷動作を制御して印刷効率をどのように高めることができますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。