CSS を使用して Web ページ上の特定の Div のみを印刷するにはどうすればよいですか?

Web ページ上の特定のコンテンツを印刷する

他のコンテンツに影響を与えずに Web ページ上の特定の div のみを印刷するのは、困難な作業となる場合があります。これに対処するために、CSS を利用した効果的なアプローチの 1 つを以下に示します。

CSS ソリューション:

@media print {
  body {
    visibility: hidden;
  }
  #section-to-print {
    visibility: visible;
    position: absolute;
    left: 0;
    top: 0;
  }
}

説明:

この CSS コードは @media 印刷ルールを使用して、特に印刷プレビューにスタイルを適用します。これは次のように機能します。

1. 可視性を非表示に設定して、ページの本文全体 (印刷する div を除く) を非表示にします。
2. ターゲット div の可視性を設定します (
3. ターゲット div をページの左上に絶対に配置します (左: 0; 上: 0;) を使用して、正しく印刷されることを確認します。

代替アプローチ:

表示を使用してコンテンツを非表示にするオプションのように思えるかもしれませんが、次の理由により困難な場合があります。 display:none で隠された要素は、その子孫も非表示になります。これには、大幅なページの再構築が必要になる場合があります。

このソリューションの利点:

この CSS のみのソリューション:

• 選択的に印刷できます。他のページ要素を無効にすることなく、必要な div のみを作成します。
• 新しい要素の作成を回避します。
• 適用されたスタイルが Web 表示用である場合でも、ターゲット div の視覚的なスタイルを印刷用に保持します。

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