1. IronPDF
  2. ハウツー
  3. ChromeでHTMLをデバッグする
ChromeでHTMLをデバッグしてピクセルパーフェクトなPDFを作成する方法

How to Debug HTML in Chrome to Create Pixel Perfect PDFs

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

IronPDFの開発者として、IronPDFによって作成されたPDFドキュメントは、完璧に見えるだけでなく、お客様が期待している通りに見えることが必要であると理解しています。 ピクセルパーフェクトなPDFを実現するには、優れたHTMLテンプレートを開発するか、ウェブ開発者と協力してそれらを作成する必要があります。 IronPDFは、Chromeレンダラーのおかげで、PDFをHTMLにピクセルパーフェクトにレンダリングし、Chromeで表示される通りに表示されるオプションを提供します。

クイックスタート: IronPDFでピクセルパーフェクトなPDFを生成する

IronPDFのChromeレンダラーを使用すれば、HTMLからPDFへの変換は簡単です。 このガイドは、開発者がChromeブラウザで表示される通りにHTMLデザインを忠実に再現したピクセルパーフェクトなPDFドキュメントを作成するのに役立ちます。 このプロセスは、他の多くの競合製品と異なり、HTML5、CSS3、およびJavaScript要素が完全にサポートされていることを確認します。 ウェブのブランドとデザインの整合性を保ちつつ、素早く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.

    IronPdf.ChromePdfRenderer.RenderHtmlAsPdf("<html><body>Hello World</body></html>").SaveAs("output.pdf");

  3. Deploy to test on your live environment

    Start using IronPDF in your project today with a free trial
    arrow pointer

IronPDFのChrome Rendererとは?

それはIronPDFを他の.NET PDFライブラリと区別します

IronPDFはGoogleのChromium Rendererを使用することで、市場で異彩を放ち、Chromeブラウザで見るHTMLがPDFでもまったく同じに見えることを意味します。 このガイドでは、ChromeおよびIronPDFでこれを実現するために適用する必要がある設定をいくつか解説します。

はっきりさせておきますと、競合他社によって実装されている多くの「HTML to PDF」技術は、W3C標準に準拠していないか、HTML5、CSS3、またはJavaScriptをサポートしていないうえ、C#でのwkhtmltopdf比較などのベースレンダラーを使用しています。

IronPDFと競合他社の比較

class="competitors-section__wrapper-even-1">
class="competitors__card">

class="competitors__header">IronPDF

IronPDF

class="competitors__download-link"> Download PDF

class="competitors__card">

class="competitors__header">Vanilla Chrome

Vanilla Chrome

class="competitors__download-link"> Download PDF

class="competitors-section__wrapper">
class="competitors__card">

class="competitors__header">Aspose.PDF

Aspose.PDF

class="competitors__download-link"> Download PDF

class="competitors__card">

class="competitors__header">iText

iText

class="competitors__download-link"> Download PDF

class="competitors__card">

class="competitors__header">wkhtmltopdf

wkhtmltopdf

class="competitors__download-link"> Download PDF

他の製品との比較の完全なリストについては、比較ブログをご覧ください。

Features of Iron Software Libraries | Using IronPDF's Chrome Rendering Engine | Aspose vs IronPDF Analysis | iText vs IronPDF Comparison

IronPDFの最適化されたChromeレンダラーはChromeより優れています

IronPDFがChrome自体を超える2つの例。 Chromeで2ページに分割されるボタンとテキストが、IronPDFではそのまま保持されます。

Chromeでのボタンやテキストの切り取り例:

class="content-img-align-center">
class="center-image-wrapper"> Button Cut off in Chrome but not in IronPDF

Chromeでのテキストの切り取りの別の例:

class="content-img-align-center">
class="center-image-wrapper"> Text Cut off in Chrome but not in IronPDF

なぜHTMLをPDFにするのか？

開発者は、既存のWebブランディングに一致する予測可能な結果を提供するため、HTMLをPDFに変換することを好みます。 設計は、十分に文書化された標準化されたHTML、CSS、およびJavaScript技術を使用して実装されます。

  • 出力のレイアウトとデザインがウェブサイトと完全に一致します。
  • ウェブ開発者は、絶対的な精度で設計することに集中できます。
  • .NET開発者はレイアウトではなくアプリケーションロジックに集中することができます。 バックエンド開発者は、レイアウトとデザインのタスクをウェブデザイナーに委ねることができます。

1. CSSメディアタイプの印刷または画面を使用するか決定する

IronPDFのレンダラーは、Print (デフォルト) と Screen の2つのメディアレンダリングオプションを持っています。 視覚的な並列比較については、このセクションの終わりをご覧ください。 「スクリーンとプリントの例の比較」セクションの下。

  • CssMediaType.Print は、プリンターでの一般的な使用に対してHTMLを最適化するデフォルトのレンダリングオプションです。 これは、ページの一部の背景画像、アイコン、およびインクを多く使用する要素が異なるレンダリングをされるか省略されることを意味します。 このオプションは、背景画像のないドキュメントに適しており、デフォルトの印刷プレビューです。
  • CssMediaType.Screen は、PDFを画面に表示される通りにChrome内で表示させるレンダリングオプションです。 HTMLデバッグ目的で、Chromeブラウザ内で印刷プレビューがIronPDFのように正確に表示されるようにいくつかのオプションを設定する必要があります。
:path=/static-assets/pdf/content-code-examples/how-to/pixel-perfect-html-to-pdf-1.cs
// Pixel Perfect HTML Formatting Settings
IronPdf.ChromePdfRenderer renderer = new IronPdf.ChromePdfRenderer();
renderer.RenderingOptions.CssMediaType = PdfCssMediaType.Print; // or Screen
' Pixel Perfect HTML Formatting Settings
Dim renderer As New IronPdf.ChromePdfRenderer()
renderer.RenderingOptions.CssMediaType = PdfCssMediaType.Print ' or Screen
$vbLabelText   $csharpLabel

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

1ページを超えるようなテーブルを含むHTMLがある場合、おそらく各PDFページでテーブルヘッダーを繰り返したいと思うでしょう。

  • この場合、のみ Print CssMediaTypeを使用できます。
  • Screenを使用すると、Chromeはヘッダーを一度だけ印刷する指示をします。

画面と印刷の例の比較

多くの画像やアイコンがPrintモードでは読み込まれませんが、Screenモードでは読み込まれます：

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

2. Chromeをセットアップする

IronPDFはChrome Rendering Engineを誇らしげに利用しています。IronPDFがあなたのHTMLをChromeと同様にレンダリングするために次の手順に従ってください。 この結果を得るためにChrome内で事前に行う必要があるいくつかのステップがあります。

印刷形式で通常省略されるすべての画像、アイコン、および背景を含むピクセルパーフェクトなPDFをレンダリングするには、Screen CSS Mediaオプションを使用することを確認してください。

2a. DevToolsを開くし、ChromeでEnable Emulate CSS MediaをScreen/Printに設定します

これを行うには、Chrome内で ChromeでDevToolsを開く。

Use Inspect in Chrome

Command+Shift+P (Mac) または Control+Shift+P (Windows, Linux, ChromeOS)を押して、コマンドメニューを開きます。 レンダリングと入力を開始し、「Show Rendering」を選択し、Enterキーを押します。 DevToolsウィンドウの下部にレンダリングタブが表示されます。 レンダリング設定についての詳細なヘルプ

Go to Show Rendering and then Find CSS Media Type
  1. 下に移動してEmulate CSS mediaのドロップダウンを見つけ、ScreenまたはPrintのオプションを選択します。 ウェブページにいる場合、設定が有効になるために（Ctrl+Rで）再読み込みする必要があるかもしれません。
class="competitors-section__wrapper-even-1">
Switch to CSS Media Type Print

Print

Switch to CSS Media Type Screen

Screen

2b. 印刷プレビューウィンドウを開く（WindowsでのCtrl+P）

紙のサイズを変更し、Chromeの印刷ダイアログで「背景画像を印刷する」を有効にする必要があるかもしれません。また、正確な表示を取得するための設定が必要になります。

2c. 正しい印刷プレビューの設定を行う

  • 使用しているIronPDFプロジェクトで、A4またはLetterのような用紙サイズを選択してください。
  • MarginsのドロップダウンからCustomを選択し、四方すべてを(1インチ)1インチの余白に設定してください。
  • Background Graphicsのチェックボックスを有効にします。
  • ドキュメントを横向き出力するつもりであれば、LayoutをLandscapeに設定してください。

以上です。 これでHTMLをデバッグし、印刷プレビューを使用してIronPDFがあなたのレイアウトをどのようにレンダリングするか正確に確認できます。

3. IronPDFのセットアップ

3a. IronPDFでCSSメディアタイプを設定する

ウェブページデザインを100%の精度で一致させるためには、コード内でChromeに設定したのと同じCSSメディアタイプを選ばなければなりません。

印刷形式（デフォルトでプリンターインクを節約するために設計されています）のPdfCssMediaType.Printに省略される背景や大きな画像を含むPdfCssMediaType.Screenをリコールしておいてください。

:path=/static-assets/pdf/content-code-examples/how-to/pixel-perfect-html-to-pdf-2.cs
// Example using PdfCssMediaType.Screen
IronPdf.ChromePdfRenderer renderer = new IronPdf.ChromePdfRenderer();
renderer.RenderingOptions.CssMediaType = PdfCssMediaType.Screen; // or Print
renderer.RenderingOptions.PrintHtmlBackgrounds = true;
' Example using PdfCssMediaType.Screen
Dim renderer As New IronPdf.ChromePdfRenderer()
renderer.RenderingOptions.CssMediaType = PdfCssMediaType.Screen ' or Print
renderer.RenderingOptions.PrintHtmlBackgrounds = True
$vbLabelText   $csharpLabel

3b. 適切なレンダーディレイとレンダータイムアウトを設定する

IronPDFのデフォルトのレンダリングタイムアウトは60秒です。 レンダリングプロセスがこれより長くかかる場合、タイムアウト例外がスローされます。 デフォルトの設定を上書きするには、RenderingOptions.Timeoutオプションを調整する必要があります。 一方、レンダーディレイの値は、IronPDFがレンダリングを開始する前に待機すべき時間です。 この待機時間は、画像、フォント、およびJavaScriptコードなどの資産を適切に実行するために非常に重要です。

:path=/static-assets/pdf/content-code-examples/how-to/pixel-perfect-html-to-pdf-3.cs
// Example of setting Timeout and RenderDelay options
renderer.RenderingOptions.Timeout = 90; // seconds (default is 60)
renderer.RenderingOptions.WaitFor.RenderDelay(30000); // milliseconds
IRON VB CONVERTER ERROR developers@ironsoftware.com
$vbLabelText   $csharpLabel

タイムアウトが設定されていない、または設定したタイムアウトより長いレンダーディレイがある場合、"PDFをレンダリングできません" の例外が発生します。 このエラーが発生する場合は、これらの値を増やす必要があるかもしれません。

[{i:(Aspose, iText, wkhtmltopdf, およびPuppeteerSharpは、それぞれの所有者の登録商標です。 このサイトは、Aspose、iText、wkhtmltopdf、またはPuppeteerとは関連がありません，承認されていません，後援されていません。 すべての製品名、ロゴ、およびブランドは、それぞれの所有者の財産です。 比較は情報提供の目的だけで提供されており、執筆時点で公開されている情報に基づいています。）}]

よくある質問

HTMLからピクセルパーフェクトなPDFを作成するにはどうすればよいですか？

IronPDFのChromeレンダラーを使用すれば、Chromeブラウザで見るHTMLがPDFでも同じように見えることを保証することで、ピクセルパーフェクトなPDFを作成できます。

PDF作成におけるChromeレンダラーの重要性は何ですか？

IronPDFのChromeレンダラーは、HTML5、CSS3、およびJavaScriptを正確にレンダリングし、PDFがChromeブラウザ上と同様に見えることを保証します。これは、他の.NETライブラリとは異なります。

PDFレンダリング用の'Print'と'Screen'のCSSメディアタイプをどのように選択しますか？

IronPDFでは、プリンターフレンドリーなドキュメントには'Print' CSSメディアタイプを使用し、ディスプレイの正確な表現には'Screen'を使用します。ChromePdfRendererでニーズに合わせてこれらの設定を調整します。

PDFレンダリングのためには、Chromeを正しく設定することがなぜ重要ですか？

Chromeを正しく設定することは、正確な印刷プレビューに非常に重要で、それにより本番設定を反映させ、IronPDFでピクセルパーフェクトなPDF出力を達成するのに役立ちます。

IronPDFでレンダーディレイとタイムアウト設定をどのように調整できますか？

ChromePdfRenderer内でRenderingOptions.RenderDelayとRenderingOptions.Timeoutを使用して、アセット読み込み時間を管理するために、IronPDFのレンダーディレイとタイムアウト設定を調整します。

'Unable to Render PDF'エラーが発生した場合、どうすればよいですか？

'Unable to Render PDF'エラーが発生した場合、それはレンダーディレイが設定されたタイムアウトより長いことが原因かもしれません。問題を解決するために、IronPDFでレンダーディレイとタイムアウト値を増加させます。

PDFレンダリングで繰り返しテーブルヘッダーをどのように処理しますか？

IronPDFでページ間で繰り返されるテーブルヘッダーを処理するには、PDFレンダリング中にヘッダーが各ページで繰り返されることを保証するために'Print' CSSメディアタイプを使用します。

正確なPDF作成のためにChromeのどのレイアウト設定を構成する必要がありますか？

Chromeの印刷プレビューで、正しい用紙サイズを選択し、マージンを1インチのカスタム設定にし、背景グラフィックスを有効にして、必要に応じてレイアウトを横向きに設定して、正確なPDF作成を行います。

IronPDF は .NET 10 と互換性がありますか? また、.NET 10 を使用すると、ピクセルパーフェクトな HTML から PDF へのレンダリングにどのような利点がありますか?

はい。IronPDFは.NET 10と完全に互換性があり、ランタイムおよびJITパフォーマンスの向上（配列インターフェースメソッドの仮想化解除やスタック割り当てなど）により、PDF生成の高速化と効率化が実現します。IronPDFで.NET 10を使用すると、HTMLからPDFへのワークフロー（Chromeレンダラーによるレンダリング、メディアタイプ設定の処理、遅延、タイムアウトなど）において、レイテンシの短縮、メモリ使用量の削減、全体的な操作のスムーズ化といったメリットが得られます。

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

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

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

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