CSS を使用して、Web ページを印刷するときに表示される要素を制御するにはどうすればよいですか?

CSS を使用した印刷時に選択したコンテンツを表示する

多くの Web ページには、広範なデータ、レイアウト、コンテンツが含まれています。印刷を最適化するために、特定の要素のみを表示したい場合があります。印刷用に別のページを作成するという解決策もありますが、CSS は「@media print」機能を備えた強力な代替手段を提供します。

「@media print」のブラウザ サポート

「@media print」機能は、最新のブラウザーで広くサポートされています。これにより、特にページの印刷時に CSS ルールを適用できます。 「@media print」をサポートするブラウザは次のとおりです:

• Chrome
• Firefox
• Safari
• Edge

印刷対象の要素

印刷したい要素以外のすべての要素を非表示にするには、「display:none」プロパティを使用します。次に、印刷時に表示したい要素に「printable」クラスを追加し、「@media print」ブロック内のこれらの要素に「display:block」を適用します。

CSS:

@media print {
    * {
        display: none;
    }
    .printable,
    .printable > * {
        display: block;
    }
}

ただし、印刷時にのみ要素を表示し、ブラウザーでは非表示にしたい場合は、逆のアプローチを使用することを検討してください:

CSS:

@media print {
    body *:not(.printable *) {
        display: none;
    }
}

この手法では、印刷時に「printable」クラスの要素以外のすべてが非表示になります。

追加の考慮事項

• リンクされたコンテンツが表示されないようにするには印刷するには、「noPrint」クラスを適切な要素またはリンクに追加します。
• ロゴ、レターヘッド、または印刷時にのみ表示されるその他の要素を表示するには、「onlyPrint」クラスを使用してセクションを作成します。

CSS:

@media print {
    .noPrint {
        display: none;
    }
}
@media screen {
    .onlyPrint {
        display: none;
    }
}

HTML:

<div class="noPrint">

これらのメソッドに従うことで、簡単に可視性を制御できますWeb ページを印刷するときに特定の要素を削除し、乱雑さを減らし、印刷効率を最適化します。

以上がCSS を使用して、Web ページを印刷するときに表示される要素を制御するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。