1. IronPDF
  2. ハウツー
  3. 用紙に合わせる & ズーム
C#で仮想ビューポートとズームを使用する方法

How to use Virtual Viewport and Zoom

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

HTML から PDF レンダリングでは、ビューポートが重要な役割を果たし、Web ページのレイアウトを最終的な PDF ドキュメントにどのようにキャプチャするかを決定します。 具体的には、ブラウザが Web ページをレンダリングするべき仮想画面サイズを指します。

HTML から PDF レンダリングのコンテキストにおけるズームは、PDF ドキュメント内の Web ページ コンテンツのスケーリングを管理します。 ズームレベルを微調整することで、結果として得られるPDFの内容のサイズを調整し、目的のレイアウトと書式に合わせることができます。

クイックスタート: IronPDFでズームとビューポートを制御する

IronPDF を使用して HTML から PDF への変換でズームとビューポート設定を簡単に管理する方法を学びます。 このクイックガイドは、HTML コンテンツのスケーリングを開始するための簡単なコードスニペットを提供します。 ほんの数行のコードで、レスポンシブデザイン要素や目的のレイアウトを維持しながら、PDF を完璧にレンダリングできるようになります。 今日、IronPDFの強力なレンダリングオプションの使いやすさを体験してください。

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 = { ViewPortWidth = 1280, Zoom = 1.8 } }
    .RenderUrlAsPdf("https://example.com")
    .SaveAs("zoomedViewport.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. PDF レンダリングとビューポート制御のための IronPDF C# ライブラリをダウンロード
  2. さまざまなプリセット モードを使用して HTML を PDF にレンダリングする
  3. Chrome のデフォルトとレスポンシブ CSS モードを使用して、PDF の自動レイアウトを実現する
  4. 拡大縮小を利用してコンテンツをズームします
  5. 特定のユースケースに対して「ページに合わせる」および「連続フィード」を構成する


ペーパーフィットモード

RenderingOptions の PaperFit フィールドにアクセスして、特定のレンダリング タイプとモードに使用できるプリセット メソッドを呼び出します。 比較のために、よく知られた Wikipedia ページをレンダリングして、それぞれの PaperFit モードを詳しく見ていきましょう。

Chrome デフォルト レンダリング

Google Chrome の印刷プレビューに表示されるのと同じ方法で PDF ページをレイアウトします。 この方法では、Google Chrome の印刷プレビューから印刷する際の Web ページの外観を模倣するようにレンダリング オプションを構成します。 指定された用紙サイズに対して、応答性のある CSS ビューポートは、その用紙サイズの幅に基づいて解釈されます。これを構成するには UseChromeDefaultRendering メソッドを使用します。

:path=/static-assets/pdf/content-code-examples/how-to/viewport-zoom-default-chrome.cs
using IronPdf;

ChromePdfRenderer renderer = new ChromePdfRenderer();

// Chrome default rendering
renderer.RenderingOptions.PaperFit.UseChromeDefaultRendering();

// Render web URL to PDF
PdfDocument pdf = renderer.RenderUrlAsPdf("https://en.wikipedia.org/wiki/Main_Page");

pdf.SaveAs("chromeDefault.pdf");
Imports IronPdf

Private renderer As New ChromePdfRenderer()

' Chrome default rendering
renderer.RenderingOptions.PaperFit.UseChromeDefaultRendering()

' Render web URL to PDF
Dim pdf As PdfDocument = renderer.RenderUrlAsPdf("https://en.wikipedia.org/wiki/Main_Page")

pdf.SaveAs("chromeDefault.pdf")
$vbLabelText   $csharpLabel

レスポンシブ CSS レンダリング

レスポンシブ CSS モードでは、UseResponsiveCssRendering メソッドに値を渡すことでビューポートの幅を指定できます。 デフォルトのビューポート幅は 1280 ピクセルです。 お気づきのように、ビューポート単位はピクセルベースであり、レスポンシブCSSデザインの仮想ブラウザビューポートを表します。

レスポンシブ CSS は、ViewPortWidth パラメータに基づいて HTML のレンダリングを定義し、指定された用紙サイズの幅に合わせてコンテンツをスケーリングするために使用されます。

:path=/static-assets/pdf/content-code-examples/how-to/viewport-zoom-responsive-css.cs
using IronPdf;

ChromePdfRenderer renderer = new ChromePdfRenderer();

// Responsive CSS rendering
renderer.RenderingOptions.PaperFit.UseResponsiveCssRendering(1280);

// Render web URL to PDF
PdfDocument pdf = renderer.RenderUrlAsPdf("https://en.wikipedia.org/wiki/Main_Page");

pdf.SaveAs("responsiveCss.pdf");
Imports IronPdf

Private renderer As New ChromePdfRenderer()

' Responsive CSS rendering
renderer.RenderingOptions.PaperFit.UseResponsiveCssRendering(1280)

' Render web URL to PDF
Dim pdf As PdfDocument = renderer.RenderUrlAsPdf("https://en.wikipedia.org/wiki/Main_Page")

pdf.SaveAs("responsiveCss.pdf")
$vbLabelText   $csharpLabel

スケールドレンダリング

UseScaledRendering メソッドは、指定された用紙サイズに対して「Chrome フ゜リント プレビュー」の動作を模倣したレイアウトを採用します。また、開発者が手動で調整できる追加のズームレベルを提供します。このメソッドを使用すると、入力されたズーム パーセンテージに従ってコンテンツをスケーリングするオプションが有効になります。

:path=/static-assets/pdf/content-code-examples/how-to/viewport-zoom-scaled.cs
using IronPdf;

ChromePdfRenderer renderer = new ChromePdfRenderer();

// Scaled rendering
renderer.RenderingOptions.PaperFit.UseScaledRendering(180);

// Render web URL to PDF
PdfDocument pdf = renderer.RenderUrlAsPdf("https://en.wikipedia.org/wiki/Main_Page");

pdf.SaveAs("scaled.pdf");
Imports IronPdf

Private renderer As New ChromePdfRenderer()

' Scaled rendering
renderer.RenderingOptions.PaperFit.UseScaledRendering(180)

' Render web URL to PDF
Dim pdf As PdfDocument = renderer.RenderUrlAsPdf("https://en.wikipedia.org/wiki/Main_Page")

pdf.SaveAs("scaled.pdf")
$vbLabelText   $csharpLabel

ページに合わせるレンダリング

逆に、「ページに合わせる」レンダリングは、指定された用紙サイズに合わせてコンテンツをスケールします。レンダリング後の最小 HTML コンテンツの幅を計測し、可能であればそれを 1 枚の用紙の幅に合わせてスケールします。 ドキュメントの表示を正しく行い、CSS3レイアウトルールに応じた応答性を確保するために、ピクセルベースの最小幅として構成可能な最小ピクセル幅が使用されます。

:path=/static-assets/pdf/content-code-examples/how-to/viewport-zoom-fit-to-page.cs
using IronPdf;

ChromePdfRenderer renderer = new ChromePdfRenderer();

// Fit to page rendering
renderer.RenderingOptions.PaperFit.UseFitToPageRendering();

// Render web URL to PDF
PdfDocument pdf = renderer.RenderUrlAsPdf("https://en.wikipedia.org/wiki/Main_Page");

pdf.SaveAs("fitToPage.pdf");
Imports IronPdf

Private renderer As New ChromePdfRenderer()

' Fit to page rendering
renderer.RenderingOptions.PaperFit.UseFitToPageRendering()

' Render web URL to PDF
Dim pdf As PdfDocument = renderer.RenderUrlAsPdf("https://en.wikipedia.org/wiki/Main_Page")

pdf.SaveAs("fitToPage.pdf")
$vbLabelText   $csharpLabel

連続フィードレンダリング

連続フィードレンダリングは、1ページにすべてのコンテンツの幅と高さを収まるようにする1ページのPDFを作成します。これは、消費者の明細書や領収書のようなドキュメントに適しています。PDF ページのデフォルト幅は 80.0 ミリメートルで、デフォルトの余白は 5 ミリメートルです。 Let's render the 'receipt.html' file to PDF.

‘幅’ と ‘余白’ パラメーターを使用してページの幅と余白をカスタマイズする能力は柔軟性を提供し、簡潔な 1 ページのドキュメントを作成するのに便利な選択肢となります。

:path=/static-assets/pdf/content-code-examples/how-to/viewport-zoom-continuous-feed.cs
using IronPdf;

ChromePdfRenderer renderer = new ChromePdfRenderer();

int width = 90;
int margin = 0;

// Continuous feed rendering
renderer.RenderingOptions.PaperFit.UseContinuousFeedRendering(width, margin);

// Render web URL to PDF
PdfDocument pdf = renderer.RenderHtmlFileAsPdf("receipt.html");

pdf.SaveAs("continuousFeed.pdf");
Imports IronPdf

Private renderer As New ChromePdfRenderer()

Private width As Integer = 90
Private margin As Integer = 0

' Continuous feed rendering
renderer.RenderingOptions.PaperFit.UseContinuousFeedRendering(width, margin)

' Render web URL to PDF
Dim pdf As PdfDocument = renderer.RenderHtmlFileAsPdf("receipt.html")

pdf.SaveAs("continuousFeed.pdf")
$vbLabelText   $csharpLabel

次に何ができるのかを見てみましょうか？ 私たちのチュートリアルページをご覧ください： PDFの変換

よくある質問

レスポンシブCSSスタイリングでHTMLをPDFにレンダリングするにはどうすればいいですか？

IronPDFを使用して、レスポンシブなCSSスタイリングでHTMLをレンダリングできます。Bootstrapや他のCSSフレームワークをサポートする能力を活用することで、ウェブページのコンテンツをPDFに正確にキャプチャできます。

HTMLからPDFへの変換でビューポートの重要性は何ですか？

ビューポートは、ブラウザがページをレンダリングする仮想スクリーンサイズを定義するため、HTMLからPDFへの変換で重要です。レイアウトとデザインがPDFでどのようにキャプチャされるかに直接影響します。

HTMLをPDFに変換する際、ズームレベルをどのように調整しますか？

IronPDFを使用すると、スケーリングファクターを指定してズームレベルを調整できます。これにより、望むレイアウトとプレゼンテーションに合うようにPDF内のコンテンツのサイズを制御できます。

IronPDFのChromeデフォルトレンダリング機能とは何ですか？

IronPDFのChromeデフォルトレンダリングは、Google Chromeの印刷プレビューで見られるウェブページの外観をシミュレートします。レスポンシブCSSを使用して、指定された用紙サイズにコンテンツを合わせます。

PDFを生成する際、レスポンシブCSSレンダリングはどのように機能しますか？

IronPDFのレスポンシブCSSレンダリングでは、ビューポート幅を指定してHTMLコンテンツを用紙サイズに合わせてスケーリングします。デフォルトでは、ビューポート幅は1280ピクセルに設定されており、コンテンツがPDFの寸法にうまく収まるようにしています。

カスタムズーム調整のためにスケールレンダリングを使用できますか？

はい、IronPDFではスケールレンダリングを使用して、開発者がズームレベルをパーセンテージで調整でき、PDFでのウェブページコンテンツの正確なスケーリング制御が可能です。

PDF生成における「ページに合わせる」レンダリングの利点は何ですか？

IronPDFの「ページに合わせる」レンダリングは、選択した用紙サイズにコンテンツをスケーリングし、最小ピクセル幅を維持することで、適切な表示とレイアウトの一貫性を確保します。

連続フィードレンダリングは他のレンダリングモードとどのように異なりますか？

IronPDFの連続フィードレンダリングは、コンテンツの幅と高さ全体を収容できる単一ページのPDFを作成し、消費者の請求書や領収書のようにフルページコンテンツが必要なドキュメントに最適です。

IronPDF は、特にビューポートやズームのコントロールに関して、.NET 10 と完全に互換性がありますか?

はい。IronPDF は .NET 10 と完全に互換性があります。追加の構成なしで、すべてのビューポートおよびズーム レンダリング オプション (ViewPortWidth の設定、ズーム スケーリングの使用、レスポンシブ CSS など) を .NET 10 環境で直接サポートします。([ironpdf.com](https://ironpdf.com/blog/net-help/net-10-features/?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 ただ今リリースされました