ヘッダーとコンテンツの不整合

更新日:2026年6月28日

Translated

View the article in English

HTMLをPDFにレンダリングする際、ヘッダーとフッターがページの端に密着している一方、本文のコンテンツは内部に押し込まれることがありますが、最も目立つのは左右のマージンです。これは、MarginLeft = 0 が設定され、UseMarginsOnHeaderAndFooter が有効になっている場合でも発生します。

原因はChromeのデフォルトスタイリングです。そのレンダリングエンジンは、すべてのページの <body> 要素に8ピクセルのマージンを適用します。そのデフォルトは通常のウェブコンテンツには問題ありませんが、どの MarginLeft = 0 を ChromePdfRenderer.RenderingOptions に渡しても、コンテンツとPDFの端の間に8ピクセルのギャップが残ります。ヘッダーとフッターは影響を受けません: マージンを 0 に設定すると、予想通りページの端に直接配置されるので、ボディだけがずれます。

このスニペットは不整合を再現します：

var renderer = new ChromePdfRenderer();
renderer.RenderingOptions.HtmlHeader = new HtmlHeaderFooter()
{
    HtmlFragment = "<h1>This is header</h1>"
};
renderer.RenderingOptions.MarginLeft = 0;
renderer.RenderingOptions.UseMarginsOnHeaderAndFooter = UseMargins.Left;
var pdf = renderer.RenderHtmlAsPdf("<h1>Hello World</h1>");

var renderer = new ChromePdfRenderer();
renderer.RenderingOptions.HtmlHeader = new HtmlHeaderFooter()
{
    HtmlFragment = "<h1>This is header</h1>"
};
renderer.RenderingOptions.MarginLeft = 0;
renderer.RenderingOptions.UseMarginsOnHeaderAndFooter = UseMargins.Left;
var pdf = renderer.RenderHtmlAsPdf("<h1>Hello World</h1>");

Dim renderer As New ChromePdfRenderer()
renderer.RenderingOptions.HtmlHeader = New HtmlHeaderFooter() With {
    .HtmlFragment = "<h1>This is header</h1>"
}
renderer.RenderingOptions.MarginLeft = 0
renderer.RenderingOptions.UseMarginsOnHeaderAndFooter = UseMargins.Left
Dim pdf = renderer.RenderHtmlAsPdf("<h1>Hello World</h1>")

$vbLabelText $csharpLabel

PDFが左寄せのヘッダーを示すが、ボディのコンテンツは内側にずれている

解決策

Chromeのデフォルトの <body> マージンをオーバーライドして、コンテンツをページ全体の幅でヘッダーとフッターに合わせます。組み込みの8pxオフセットを打ち消すためにネガティブマージンを適用します：

body {
margin-left: -8px;
margin-right: -8px;
}

ネガティブ値は、Chromeのデフォルトのパディングを中和し、ヘッダー、ボディ、フッターが同じ端に揃うようにします。インラインで適用すると、修正済みのレンダリングは次のようになります：

var renderer = new ChromePdfRenderer();
renderer.RenderingOptions.HtmlHeader = new HtmlHeaderFooter()
{
    HtmlFragment = "<h1>This is header</h1>"
};
renderer.RenderingOptions.MarginLeft = 0;
renderer.RenderingOptions.UseMarginsOnHeaderAndFooter = UseMargins.Left;
var pdf = renderer.RenderHtmlAsPdf("<h1 style=\"margin-left: -8;\">Hello World</h1>");  //adjust margin left to -8 px to cancel out default Chrome margin

var renderer = new ChromePdfRenderer();
renderer.RenderingOptions.HtmlHeader = new HtmlHeaderFooter()
{
    HtmlFragment = "<h1>This is header</h1>"
};
renderer.RenderingOptions.MarginLeft = 0;
renderer.RenderingOptions.UseMarginsOnHeaderAndFooter = UseMargins.Left;
var pdf = renderer.RenderHtmlAsPdf("<h1 style=\"margin-left: -8;\">Hello World</h1>");  //adjust margin left to -8 px to cancel out default Chrome margin

Imports System

Dim renderer As New ChromePdfRenderer()
renderer.RenderingOptions.HtmlHeader = New HtmlHeaderFooter() With {
    .HtmlFragment = "<h1>This is header</h1>"
}
renderer.RenderingOptions.MarginLeft = 0
renderer.RenderingOptions.UseMarginsOnHeaderAndFooter = UseMargins.Left
Dim pdf = renderer.RenderHtmlAsPdf("<h1 style=""margin-left: -8;"">Hello World</h1>") 'adjust margin left to -8 px to cancel out default Chrome margin

$vbLabelText $csharpLabel

修正後、ヘッダーとボディのコンテンツが同じ左端に揃っているPDF

デバッグのヒント

クリーンスレートを推奨: 否定マージンの代わりに、CSSリセットを適用するか、デフォルトのオフセットをソースで削除するために margin: 0 を <body> 要素に明示的に設定してください。
挙動の範囲: 8pxの隙間は、IronPDF、Puppeteer、およびChrome DevTools Protocolを含むヘッドレスChromeを介してHTMLがレンダリングされる際に出現し、同じ修正がそれらのツールに適用されます。

Curtis Chau

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

テクニカルライター

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

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

準備はできましたか？

Nuget ダウンロード 20,296,129 | バージョン: 2026.7 リリースされたばかり