レスポンシブ PDF のために C# で HTML と CSS を使用する方法

なぜ正しい CSS メディア タイプを選択することが重要なのでしょうか

IronPdfはC#でHTMLからPDFを生成し、デフォルトでスクリーンスタイルシートをPDFにレンダリングします。 これは便利です。なぜなら、印刷用スタイルシートはスクリーン用スタイルシートに比べて、文書化されていることも少なく、使用されることも開発されることも少ないからです。 しかし、これらのメディアタイプの違いを理解することは、Pro品質のPDFを作成する上で非常に重要です。

IronPDF で CSS (Screen & Print) を使用する場合、スクリーンと印刷のメディアタイプの選択は最終的なPDF出力に大きく影響します。 スクリーンメディアのタイプでは、インタラクティブな要素と豊かなビジュアルデザインを維持し、印刷メディアのタイプでは、読みやすさと紙ベースの消費にコンテンツを最適化します。

CSS3は、特定のCSSスタイルを印刷文書でのみレンダリングできるようにし、他のスタイルはウェブブラウザ用に意図されています。 IronPDFはどちらにも対応し、HTMLコンテンツをPDFにレンダリングする方法を完全にコントロールすることができます。 このような柔軟性により、デジタルレポート、印刷可能な請求書、またはハイブリッド文書のいずれを作成する場合でも、PDFが意図されたユースケースの特定の要件を満たすことができます。

印刷用 CSS メディア タイプと画面用 CSS メディア タイプはいつ使い分けるべきですか?

HTMLに印刷スタイルシートを作成して適用します: 完璧な印刷スタイルシートを作成して適用する方法を学ぶ。.

それぞれのCSSメディアタイプは、異なるユースケースをターゲットにしています。 どれがあなたの要求に合うか、それぞれ試してみてください。 以下のガイドラインを参考にしてください：

印刷CSSメディアタイプは次のような場合に使用してください:。

• 印刷用文書の作成
• 請求書、報告書、正式な文書の作成
• ページ間で繰り返しテーブルヘッダーが必要
• インクの節約を優先
• カスタム用紙サイズ要件での作業

スクリーンCSSメディアタイプは次のような場合に使用してください:。

• 豊富なビジュアル要素を持つインタラクティブPDFの作成
• ウェブデザインの美学をPDFで維持すること
• 背景画像と色を含む
• PDFは主にスクリーンで表示されます。
• レスポンシブHTMLからPDFへの変換作業

スクリーン モードと印刷モードの視覚的な違いは何ですか?

上記の例は、同じHTMLコンテンツがCSSメディアタイプの選択によってどのようにレンダリングが異なるかを示しています。 印刷版では、装飾的な画像やアイコンを削除して、よりすっきりとした印刷しやすいドキュメントを作成し、画面版では、デジタル表示用にすべての視覚的要素を維持していることに注目してください。

スクリーン モードでテーブル ヘッダーが一度しか表示されないのはなぜですか

複数ページにまたがる HTML テーブルを処理する場合は、 PdfCssMediaType.Printに設定します。 このため、各拡張ページの上部にテーブルヘッダが繰り返し表示されます。 対照的に、 PdfCssMediaType.Screenは Chrome にヘッダーを 1 回だけ印刷するように指示します。 この動作は、長いデータテーブルを含むPDFレポートを作成する際に特に重要です。

印刷メディア タイプは、ヘッダーの繰り返しを有効にする thead {display: table-header-group;} プロパティなど、ブラウザーがページ区切りに使用する特定の CSS ルールをアクティブ化します。 この機能は、読者が複数ページのドキュメントをめくる際に、文脈を維持するために不可欠です。

ヘッダーの繰り返しに必要な HTML 構造は何ですか?

Chrome がテーブル ヘッダーを確実に検出できるようにするには、それを <thead> タグで囲みます。 Let's render the 'tableHeader.html example of repeating table headers' HTML file to PDF to see the effect.

推奨されるHTMLの構成は以下のとおりです：

<table>
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
        </tr>
    </thead>
    <tbody>

    </tbody>
</table>

<table>
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
        </tr>
    </thead>
    <tbody>

    </tbody>
</table>

C#でテーブルヘッダの繰り返しを実装するにはどうすればよいですか?

:path=/static-assets/pdf/content-code-examples/how-to/html-to-pdf-responsive-css-table-header.cs

using IronPdf;
using IronPdf.Rendering;

ChromePdfRenderer renderer = new ChromePdfRenderer();

// Change the paper size to small
renderer.RenderingOptions.SetCustomPaperSizeinPixelsOrPoints(600, 400);

// Choose screen or print CSS media
renderer.RenderingOptions.CssMediaType = PdfCssMediaType.Print;

// Render HTML to PDF
PdfDocument pdf = renderer.RenderHtmlFileAsPdf("tableHeader.html");

pdf.SaveAs("tableHeader.pdf");

より高度な表の書式設定オプションについては、カスタム余白で表の周りの間隔を制御したり、改ページを実装して、必要なときに表が新しいページで開始されるようにしてください。

最終的なPDF出力はどのようになりますか?