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

Q: How can I inject custom CSS when generating PDFs with IronPDF?

Developers can inject custom CSS by including a tag within the HTML content, allowing specific styles and rules to be applied directly to the PDF output.

Curtis Chau

Updated: 2026年9月17日

IronPDFはC#の開発者がCSS付きのHTMLをPDFに変換することを可能にし、'screen'と'print'の両方のメディアタイプをサポートすることでレスポンシブデザインを維持します。印刷モードはPDF出力用にレイアウトを最適化し、ページ間で繰り返されるテーブルヘッダーのような機能を可能にします。

CSSの'screen'メディアタイプは、主にコンピュータの画面や同様のデバイスに表示するためのものです。スタイルが"スクリーン"メディアタイプに定義されると、ウェブコンテンツがスクリーン上でどのように表示されるかに影響し、ビジュアルデザインとインタラクティブ性が強調されます。これには、デジタルディスプレイでのユーザー体験を向上させるホバー効果、アニメーション、背景画像などの要素も含まれます。

CSSの"print"メディアタイプは印刷用に設計されています。ウェブページが印刷されたときにどのように表示されるかを決定し、印刷ページ用にコンテンツを最適化することに重点を置きます。この最適化には、フォントサイズや余白の調整、印刷時に不要な要素の削除などが含まれます。印刷スタイルシートでは、ナビゲーションメニューやサイドバー、装飾的な要素を削除して、核となるコンテンツに集中させることで、文書を読みやすくし、インクを節約することがよくあります。

IronPDFのChrome PDFレンダリングエンジンを使って作業する際、開発者は使用するメディアタイプを完全に制御でき、HTMLから生成されたPDFが意図したデザインと機能性を維持することを確保します。このような柔軟性は、デジタル配信と物理的な印刷の両方の目的に対応する必要がある文書を作成する際に役立ちます。

クイックスタート: レスポンシブ HTML と CSS を使用して PDF を生成する

IronPDFを使ってレスポンシブCSSを含むHTMLをPDFに変換してください。わずか数行のコードで、PDFがデバイス間で完全にレンダリングされ、画面と印刷の両方のスタイルの整合性が維持されるようにします。このクイックガイドでは、既存のHTMLコンテンツからIronPDFを使用してプロフェッショナルなPDF出力を実現する方法を説明します。

1Install IronPDF with NuGet Package Manager
PM > Install-Package IronPdf
```
Install-Package IronPdf
```

2このコードスニペットをコピーして実行します。

new IronPdf.ChromePdfRenderer { RenderingOptions = { CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print } }
    .RenderUrlAsPdf("https://example.com")
    .SaveAs("responsive.pdf");

new IronPdf.ChromePdfRenderer { RenderingOptions = { CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print } }
    .RenderUrlAsPdf("https://example.com")
    .SaveAs("responsive.pdf");

New IronPdf.ChromePdfRenderer With { .RenderingOptions = New IronPdf.Rendering.PdfRenderingOptions With { .CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print } } _
    .RenderUrlAsPdf("https://example.com") _
    .SaveAs("responsive.pdf")

New IronPdf.ChromePdfRenderer With { .RenderingOptions = New IronPdf.Rendering.PdfRenderingOptions With { .CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print } } _
    .RenderUrlAsPdf("https://example.com") _
    .SaveAs("responsive.pdf")

3実際の環境でテストするためにデプロイする

今日プロジェクトで IronPDF を使い始めましょう無料トライアル

最小限のワークフロー（5ステップ）

CSSとHTML統合用のIronPDF C#ライブラリをダウンロードする。
PDFに変換するためのHTMLファイルを準備する
最適なPDFフォーマットのためにCSSメディアタイプを指定する
PDFでテーブルヘッダーを繰り返すためにCSSメディアタイプ'Print'を設定する
レスポンシブデザインのためにビューポート寸法を設定する

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

PDFページ間でテーブルヘッダーを繰り返すにはどうすればよいですか?

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

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

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

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

Chromeがテーブルヘッダーを検出するようにするには、<thead>タグで囲んでください。 'tableHeader.html テーブルヘッダーを繰り返す例'のHTMLファイルをPDFにレンダリングして、効果を確認してみましょう。

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

<table>
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
        </tr>
    </thead>
    <tbody>
        <!-- Your table data rows here -->
    </tbody>
</table>

<table>
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
        </tr>
    </thead>
    <tbody>
        <!-- Your table data rows here -->
    </tbody>
</table>

HTML

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

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");

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");

Imports IronPdf
Imports IronPdf.Rendering

Private renderer As 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
Dim pdf As PdfDocument = renderer.RenderHtmlFileAsPdf("tableHeader.html")

pdf.SaveAs("tableHeader.pdf")

Imports IronPdf
Imports IronPdf.Rendering

Private renderer As 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
Dim pdf As PdfDocument = renderer.RenderHtmlFileAsPdf("tableHeader.html")

pdf.SaveAs("tableHeader.pdf")

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

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

私のお気に入りのこの種のライブラリはIronPDFです。PDFファイルの迅速で効率的な操作が可能です。また、PDF/A形式へのエクスポートやPDF文書へのデジタル署名といった多くの貴重な機能も備えています。

Milan Jovanovic

Microsoft MVP

ケーススタディを見る

IronOCRのおかげで私たちは年間$40,000を手作業の処理から節約し、生産性を向上させ、高影響のタスクにリソースを充てることができます。非常にお勧めします。

Brent Matzelle

最高技術責任者, OPYN

ケーススタディを見る

高度な CSS メディアタイプ設定

複雑なレイアウトを扱う場合は、CSSメディアタイプとIronPDFの他の機能を組み合わせてください。たとえば、Viewport & Zoom 設定を使用する場合、選択する CSS メディアタイプは、レスポンシブデザインが最終的な PDF でどのように拡大縮小されるかに影響します。

以下は、高度な設定を示す例です：

using IronPdf;
using IronPdf.Rendering;

ChromePdfRenderer renderer = new ChromePdfRenderer();

// Configure for print media type with custom settings
renderer.RenderingOptions.CssMediaType = PdfCssMediaType.Print;
renderer.RenderingOptions.PrintHtmlBackgrounds = true; // Override print defaults
renderer.RenderingOptions.MarginTop = 25;
renderer.RenderingOptions.MarginBottom = 25;

// Add custom CSS for print media
string customCss = @"
    @media print {
        .no-print { display: none; }
        body { font-size: 12pt; }
        h1 { page-break-after: avoid; }
    }
";

// Render with custom CSS injection
string htmlWithCss = $"<style>{customCss}</style>{yourHtmlContent}";
PdfDocument pdf = renderer.RenderHtmlAsPdf(htmlWithCss);

pdf.SaveAs("advanced-print-layout.pdf");

using IronPdf;
using IronPdf.Rendering;

ChromePdfRenderer renderer = new ChromePdfRenderer();

// Configure for print media type with custom settings
renderer.RenderingOptions.CssMediaType = PdfCssMediaType.Print;
renderer.RenderingOptions.PrintHtmlBackgrounds = true; // Override print defaults
renderer.RenderingOptions.MarginTop = 25;
renderer.RenderingOptions.MarginBottom = 25;

// Add custom CSS for print media
string customCss = @"
    @media print {
        .no-print { display: none; }
        body { font-size: 12pt; }
        h1 { page-break-after: avoid; }
    }
";

// Render with custom CSS injection
string htmlWithCss = $"<style>{customCss}</style>{yourHtmlContent}";
PdfDocument pdf = renderer.RenderHtmlAsPdf(htmlWithCss);

pdf.SaveAs("advanced-print-layout.pdf");

Imports IronPdf
Imports IronPdf.Rendering

Dim renderer As New ChromePdfRenderer()

' Configure for print media type with custom settings
renderer.RenderingOptions.CssMediaType = PdfCssMediaType.Print
renderer.RenderingOptions.PrintHtmlBackgrounds = True ' Override print defaults
renderer.RenderingOptions.MarginTop = 25
renderer.RenderingOptions.MarginBottom = 25

' Add custom CSS for print media
Dim customCss As String = "
    @media print {
        .no-print { display: none; }
        body { font-size: 12pt; }
        h1 { page-break-after: avoid; }
    }
"

' Render with custom CSS injection
Dim htmlWithCss As String = $"<style>{customCss}</style>{yourHtmlContent}"
Dim pdf As PdfDocument = renderer.RenderHtmlAsPdf(htmlWithCss)

pdf.SaveAs("advanced-print-layout.pdf")

Imports IronPdf
Imports IronPdf.Rendering

Dim renderer As New ChromePdfRenderer()

' Configure for print media type with custom settings
renderer.RenderingOptions.CssMediaType = PdfCssMediaType.Print
renderer.RenderingOptions.PrintHtmlBackgrounds = True ' Override print defaults
renderer.RenderingOptions.MarginTop = 25
renderer.RenderingOptions.MarginBottom = 25

' Add custom CSS for print media
Dim customCss As String = "
    @media print {
        .no-print { display: none; }
        body { font-size: 12pt; }
        h1 { page-break-after: avoid; }
    }
"

' Render with custom CSS injection
Dim htmlWithCss As String = $"<style>{customCss}</style>{yourHtmlContent}"
Dim pdf As PdfDocument = renderer.RenderHtmlAsPdf(htmlWithCss)

pdf.SaveAs("advanced-print-layout.pdf")

ピクセル単位の正確さが求められるプロジェクトでは、Debug HTML with Chrome 機能を使って、最終的なPDFを生成する前に、CSSメディアタイプがどのようにレンダリングされるかを正確にプレビューすることを検討してください。

IronPDFにおけるCSSメディアタイプのベストプラクティス

1.両方のメディアタイプをテストする：常にスクリーンと印刷の両方のメディアタイプでHTMLをテストし、特定のユースケースにとってどちらが最良の結果をもたらすかを判断してください。

2.文書に印刷を使用する：正式な文書、請求書、報告書を作成する場合、印刷メディアタイプは通常、よりきれいでプロフェッショナルな結果を提供します。

3.メディアクエリを活用する：CSSメディアクエリを活用して、さまざまな出力シナリオに合わせてレイアウトを微調整しましょう。

4.パフォーマンスを考慮する：印刷用スタイルシートは、不要な視覚的要素を除外するため、レンダリングが速くなることがよくあります。

5.CSSを検証する：HTMLレンダリング設定を使用して、PDF生成時にCSSが適切に適用されていることを確認してください。

IronPDFでCSSメディアタイプを使いこなすことで、デジタル配信用であれ物理的な印刷用であれ、要件に完璧にマッチしたPDFを作成することができます。

よくある質問

C#でHTMLをレスポンシブCSSでPDFに変換するにはどうすればよいですか？

IronPDFはレスポンシブCSSを含むHTMLをC#でPDFに変換する簡単な方法を提供します。ChromePdfRendererクラスを使用し、RenderingOptionsプロパティを通してCSSメディアタイプ（スクリーンまたは印刷）を指定できます。わずか数行のコードで、IronPDFはレスポンシブデザインを保持し、異なるデバイス間で完璧なレンダリングを保証します。

PDFを生成するときの「screen」と「print」のCSSメディアタイプの違いは何ですか？

IronPDFは両方のCSSメディアタイプをサポートしています。screen'メディアタイプはホバー効果やアニメーションを使ってデジタルスクリーン上に表示されるようにコンテンツを表示し、'print'メディアタイプはフォントや余白を調整したり、ナビゲーションメニューのような不要な要素を削除したりして印刷ページ用にコンテンツを最適化します。IronPDFのChrome PDFレンダリングエンジンはどのメディアタイプを使用するかを完全にコントロールします。

PDFページ間で繰り返し表ヘッダーを有効にするにはどうすればよいですか？

PDFのページ間で繰り返されるテーブルヘッダーを有効にするには、IronPDFでCSSメディアタイプを'Print'に設定してください。これはRenderingOptionsでCssMediaType = IronPdf.Rendering.PdfCssMediaType.Printを設定することで可能です。印刷メディアタイプには、複数ページのドキュメントをより読みやすくするヘッダーの繰り返しなどの最適化が含まれています。

レスポンシブデザインで、ライブウェブサイトのURLを直接PDFに変換できますか？

はい、IronPDFはレスポンシブデザインを維持しながら、生きたウェブサイトを直接PDFに変換することができます。ChromePdfRendererクラスでRenderUrlAsPdfメソッドを使用してください。PDFのレンダリングを確実にするために、CSSのメディアタイプとしてscreenとprintのどちらを使用するかを指定することができます。

ライブラリはHTMLからPDFへの変換にどのようなレンダリングエンジンを使用していますか？

IronPDFはChrome PDFレンダリングエンジンを使用しており、最新のCSS3機能、JavaScript、レスポンシブデザインを完全にサポートし、正確なHTMLからPDFへの変換を提供します。このエンジンは、PDFが元のHTMLコンテンツの意図したデザインと機能を維持することを保証します。

レスポンシブPDFデザインのビューポート寸法はどのように設定すればよいですか？

IronPDFではChromePdfRendererのRenderingOptionsプロパティを通してビューポートの寸法を設定することができます。これにより、HTMLをPDFに変換する際にレスポンシブCSSメディアクエリが正しく機能するようになり、異なるビューポートサイズでどのようにコンテンツが表示されるかを制御することができます。

What should I consider when choosing between screen and print media types?

Consider the document's use case: 'screen' is best for digital, interactive content, while 'print' is better for formal documents and printed materials requiring clean, ink-conservative designs.

How can I inject custom CSS when generating PDFs with IronPDF?

Developers can inject custom CSS by including a <style> tag within the HTML content, allowing specific styles and rules to be applied directly to the PDF output.

What practices are recommended for using CSS media types in IronPDF?

Best practices include testing both media types for optimal results, leveraging media queries for different scenarios, and validating CSS to ensure correct application during PDF generation.

How do I configure viewport dimensions for responsive design in IronPDF?

You can configure viewport dimensions by using IronPDF's rendering options, which allow you to set specific sizes to ensure responsive designs scale correctly in the final PDF.

Curtis Chau

テクニカルライター

今すぐエンジニアリングチームとチャット

Curtis Chauは、カールトン大学でコンピュータサイエンスの学士号を取得し、Node.js、TypeScript、JavaScript、およびReactに精通したフロントエンド開発を専門としています。直感的で美しいユーザーインターフェースを作成することに情熱を持ち、Curtisは現代のフレームワークを用いた開発や、構造の良い視覚的に魅力的なマニュアルの作成を楽しんでいます。

詳しく読む