特定の要素を非表示にして Web ページを印刷するにはどうすればよいですか?

特定の要素を表示せずに Web ページを印刷する方法

印刷用に Web ページを準備するとき、多くの場合、表示されない特定の要素を非表示にすることが望ましいです。印刷ページに表示されることを目的としています。これには、ナビゲーション ボタンや著作権表示などの要素が含まれます。

解決策

これを実現するには、CSS メディア クエリと HTML クラス属性の組み合わせを利用できます。ステップバイステップのガイドは次のとおりです:

1.スタイルシートの変更

Web サイトのスタイルシートに、次の CSS コードを追加します:

@media print {
    .no-print, .no-print * {
        display: none !important;
    }
}

2. HTML クラス属性

HTML コードで、クラス属性 'no-print' を追加して、印刷中に非表示にする要素を特定します。

サンプル HTML :

<a href="#" class="no-print">Print This Page</a>
<p>Good Evening</p>

3.結果

Web ページが印刷されると、CSS メディア クエリは、ページ自体を印刷するリンクを含む、「no-print」クラスを持つすべての要素を非表示にします。その結果、印刷​​出力には、「Print」ラベルなしで「Good Evening」というテキストのみが表示されます。

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