1. IronPDF
  2. ハウツー
  3. CSS（スクリーン＆プリント）
C#でレスポンシブCSSを使用してHTMLをPDFに変換する方法

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

カーティス・チャウ
カーティス・チャウ
更新日:
This article was translated from English: Does it need improvement?
Translated
View the article in English

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出力を実現する方法を説明します。

Nuget Icon今すぐ NuGet で PDF を作成してみましょう:

  1. NuGet パッケージ マネージャーを使用して IronPDF をインストールします

    PM > Install-Package IronPdf

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

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

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

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

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

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


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への変換作業

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

CSSによる印刷とスクリーンのメディアタイプの比較（印刷版では画像を隠したApple Macページを表示）。 CSS メディアタイプの比較：印刷レイアウトはアイコンを省略、画面レイアウトはMacBook仕様のアイコンを含む。

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

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

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

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

printメディアタイプは、ヘッダの繰り返しを可能にする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>
        <!-- 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#でテーブルヘッダの繰り返しを実装するにはどうすればよいですか?

: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");
$vbLabelText   $csharpLabel

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

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

高度な 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");
$vbLabelText   $csharpLabel

ピクセル単位の正確さが求められるプロジェクトでは、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メディアクエリが正しく機能するようになり、異なるビューポートサイズでどのようにコンテンツが表示されるかを制御することができます。

カーティス・チャウ
カーティス・チャウ
  今すぐエンジニアリングチームとチャット
テクニカルライター

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

開発以外にも、CurtisはIoT（Internet of Things）への強い関心を持ち、ハードウェアとソフトウェアの統合方法を模索しています。余暇には、ゲームをしたりDiscordボットを作成したりして、技術に対する愛情と創造性を組み合わせています。

準備はできましたか？
Nuget ダウンロード 17,012,929 | バージョン: 2025.12 リリース