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

How to use CSS with HTML

Curtis Chau
Curtis Chau
更新日:
This article was translated from English: Does it need improvement?
Translated
View the article in English

CSSの「screen」メディアタイプは、主にコンピュータスクリーンや類似のデバイスでの表示を意図しています。 「screen」メディアタイプに定義されたスタイルは、ウェブコンテンツのスクリーンでの表示に影響し、視覚デザインとインタラクティビティを重視します。

対照的に、CSSの「print」メディアタイプは印刷用に設計されています。 それは印刷時のウェブページの外観を決定し、印刷されたページのコンテンツを最適化することに焦点を当てます。 この最適化には、フォントサイズの調整、余白の調整、印刷時に関連性がない、または必要ない要素の削除や非表示化が含まれるかもしれません。

クイックスタート: レスポンシブHTMLとCSSでPDFを生成

IronPDFを使用して、レスポンシブCSSを持つHTMLを容易に洗練されたPDFに変換します。 わずか数行のコードで、開発者は画面と印刷スタイルの両方の完全性を保ちながら、デバイス間でPDFを完璧にレンダリングすることができます。 この簡易ガイドは、IronPDFを使用して既存のHTMLコンテンツからプロフェッショナルなPDF出力を得る方法を示しており、迅速かつ正確な結果を得るためのプロセスを簡素化しています。

Nuget IconGet started making PDFs with NuGet now:

  1. Install IronPDF with NuGet Package Manager

    PM > Install-Package IronPdf

  2. Copy and run this code snippet.

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

  3. Deploy to test on your live environment

    Start using IronPDF in your project today with a free trial
    arrow pointer
class="hsg-featured-snippet">

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

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


スクリーン＆プリントCSSタイプ (CSS3)

IronPDFはC#でHTMLからPDFを生成し、画面用スタイルシートをデフォルトでPDFにレンダリングできます。 これは便利です。なぜなら、印刷用スタイルシートはスクリーン用スタイルシートに比べて、文書化されていることも少なく、使用されることも開発されることも少ないからです。

CSS3は、特定のCSSスタイルを印刷文書でのみレンダリングできるようにし、他のスタイルはウェブブラウザ用に意図されています。 IronPDFはどちらとも連携するようにプログラムすることができます。

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

どのCSSメディアタイプが優れているのかを言うのは非常に難しいです。各タイプは異なる使用ケースを目標にしているためです。 それぞれを試行錯誤することによって、あなたの要求にどれが適しているかを見る価値があります。

印刷の例1 スクリーンの例1

テーブルヘッダーの繰り返し

複数のページにわたるHTMLテーブルを扱う場合、CssMediaTypeプロパティをPdfCssMediaType.Printに設定します。 これにより、拡張されたページの各ページの上部にテーブルヘッダーが繰り返されます。 対照的に、PdfCssMediaType.ScreenはChromeにヘッダーを一度だけ印刷するよう指示します。

Chromeがテーブルヘッダーを検出するためには、<thead>タグで包まれている必要があります。 Let's render the 'tableHeader.html example of repeating table headers' HTML file to PDF to see the effect.

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

よくある質問

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

IronPDFを使用してレスポンシブデザインでHTMLをPDFに変換するには、まずIronPDF C#ライブラリをダウンロードします。次に、HTMLファイルを準備し、適切なCSSメディアタイプを指定し、ビューポート寸法を設定して、PDFがさまざまなデバイス間でレスポンシブであることを確認します。

CSSの'screen'と'print'メディアタイプの違いは何ですか？

CSSの'screen'メディアタイプは、視覚デザインとインタラクティビティに重点を置いて、デジタルスクリーンにコンテンツを表示するために使用されます。対照的に、'print'メディアタイプは、フォントサイズやマージンなどの要素を調整することで印刷物に最適化され、プリントアウトに適しています。

PDFで各ページにテーブルヘッダーを繰り返す方法は？

PDFでテーブルヘッダーを各ページに繰り返すには、CssMediaTypeプロパティをPdfCssMediaType.Printに設定し、テーブルヘッダーを<thead>タグで囲みます。これにより、複数ページにわたるヘッダー表示が一貫します。

IronPDFは、スクリーンと印刷用スタイルシートの両方を扱えますか？

はい、IronPDFはスクリーンと印刷用スタイルシートの両方を扱うことができます。これは、出力がデジタルスクリーン用か印刷用かに基づいて柔軟性を提供し、HTMLからPDFへのレンダリングを可能にします。

HTMLをPDFに変換するとき、印刷用スタイルシートを使用する利点は何ですか？

印刷用スタイルシートは、HTMLをPDFに変換するときに、コンテンツが印刷用に最適化されることを保証します。これには、フォントサイズやマージンの調整が含まれ、PDFが物理的なプリントアウトに対して正しくフォーマットされることを確認します。

C#ライブラリを使用してPDFにレスポンシブCSSを実装する方法は？

IronPDFを使用してPDFにレスポンシブCSSを実装するには、IronPDF C#ライブラリをダウンロードし、HTMLコンテンツを準備し、希望するCSSメディアタイプを指定し、さまざまなデバイスにPDFが適応するようにビューポート寸法を調整します。

PDFに対して正しいCSSメディアタイプを使用することが重要な理由は何ですか？

正しいCSSメディアタイプを使用することはPDFでは重要です。それはコンテンツのレンダリング方法を決定するからです。'screen'メディアタイプはデジタルディスプレイに適しており、'print'メディアタイプはレイアウトや読みやすさなどの要素に影響を与えて、ペーパー用にコンテンツを最適化します。

IronPDF は .NET 10 をサポートしていますか? また、最新バージョンを使用する利点はありますか?

はい、IronPDF は .NET 10 をサポートしています。.NET 10 は、JIT インライン化の改善、ハードウェア アクセラレーション、HTTP およびシリアル化 API の強化など、パフォーマンス、ランタイム、SDK が大幅に改善された長期サポート (LTS) リリースであるため、IronPDF で .NET 10 を使用すると、より高速で効率的な PDF 生成と長期的な安定性が実現します。([devblogs.microsoft.com](https://devblogs.microsoft.com/dotnet/announceing-dotnet-10/?utm_source=openai))

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

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

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

準備はいいですか?
Nuget ダウンロード 16,154,058 | バージョン: 2025.11 ただ今リリースされました