PDFでヘッダー、フッター、改ページを管理する

更新日:2025年9月10日

Translated

View the article in English

ページ区切りは混乱を招くことがあります。

page-break-after CSS ルールは、正しく適用されていれば常に機能します。ただし、スタイルシートで div を display:block から変更する場合、このルールは機能しません。 page-break-after ルールがブロックレベル要素 (できれば body タグの直接の子である div) に適用されていることを確認します。

以下のHTML例では次のようになります。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Print Page Breaks with Header and Footer</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }
        header, footer {
            position: fixed;
            width: 100%;
            text-align: center;
            background-color: #f1f1f1;
            padding: 10px 0;
        }
        header {
            top: 0;
        }
        footer {
            bottom: 0;
        }
        .content {
            margin: 150px 20px; /* Adjust margins to prevent content overlap with header and footer */
        }
        .page-break {
            page-break-after: always;
            display: block; /* Ensure it remains a block-level element */
        }
    </style>
</head>
<body>
    <header>
        <h1>Document Title</h1>
        <p>Header Content</p>
    </header>
    <footer>
        <p>Footer Content</p>
    </footer>
    <div class="content">
        <div class="page-break">
            <h2>Section 1</h2>
            <p>This is the first section. After this section, there will be a page break.</p>
        </div>
        <div class="page-break">
            <h2>Section 2</h2>
            <p>This is the second section. The header and footer continue to be displayed, and the content starts on a new page.</p>
        </div>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Print Page Breaks with Header and Footer</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }
        header, footer {
            position: fixed;
            width: 100%;
            text-align: center;
            background-color: #f1f1f1;
            padding: 10px 0;
        }
        header {
            top: 0;
        }
        footer {
            bottom: 0;
        }
        .content {
            margin: 150px 20px; /* Adjust margins to prevent content overlap with header and footer */
        }
        .page-break {
            page-break-after: always;
            display: block; /* Ensure it remains a block-level element */
        }
    </style>
</head>
<body>
    <header>
        <h1>Document Title</h1>
        <p>Header Content</p>
    </header>
    <footer>
        <p>Footer Content</p>
    </footer>
    <div class="content">
        <div class="page-break">
            <h2>Section 1</h2>
            <p>This is the first section. After this section, there will be a page break.</p>
        </div>
        <div class="page-break">
            <h2>Section 2</h2>
            <p>This is the second section. The header and footer continue to be displayed, and the content starts on a new page.</p>
        </div>
    </div>
</body>
</html>

HTML

代わりにすべてのPDFページに繰り返しのテーブルヘッダーとフッターが必要な場合、この記事をご覧ください: HTML PDFでページ区切りを追加または回避

上記の手順で問題が解決しない場合は、以下をお試しください。

1. 問題を簡素化する

コンテンツが長さによって異なる場合、変数の長さのコンテンツをテストして、正しいHTML/CSSを使用していることを確認してください。このツールを使用して支援できます。

2. HTMLとCSSを検証する

CSS Validatorを使用して使用されているCSSスタイリングをチェックできます。

HTML Validatorを使用して、HTML入力を検証するのに役立ちます。

さらに、WebデザイナーにHTMLの検査を依頼し、変更を追跡しながら行うことができます。

一方、開示セクションの位置は、表の構造、tfoot など、多くの要因によって影響を受けます。したがって、HTML文字列と構造を二重にチェックすることが確実に役立ちます。

3. Chromeの印刷プレビューで出力を確認する

IronPDFはIronPDFで使用されるChrome PDFレンダリングエンジンのおかげで、デスクトップChromeウェブブラウザに似たPDFを出力します。

したがって、Chrome印刷プレビューを通じてHTMLの外観を確認し、HTMLに応じて調整することができます。これは試行錯誤を必要とするかもしれませんが、HTMLをデバッグする最も簡単な方法です。

Chrome印刷プレビューを介してHTMLをデバッグする方法の詳細を学ぶ: ピクセルパーフェクトHTMLフォーマット

Chrome PDFレンダリングエンジンに関する詳細はこの記事をご覧ください: IronPDFのChromeレンダラーとは？

4. Chrome開発者ツールを使用する

または、Chrome開発者ツールの_Inspect_を使用して、要素の最終的なCSSを計算されたものとして確認することができます。これは、文字列に存在する各HTML要素に関する詳細を提供します。

5. IronPDFを使ってHTMLをレンダリングする

完成した HTML 文字列または HTML ファイルをIronPDF Chrome Renderer に送信し、RenderHtmlAsPdf() または RenderHtmlFileAsPdf() メソッドを使用して PDF ドキュメントを作成します。

出力PDFおよびレンダリング操作を微調整するためにレンダリングオプションを指定する必要があるかもしれません。詳細についてはこの記事をご覧ください。

カーティス・チャウ

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

テクニカルライター

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

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

準備はできましたか？

Nuget ダウンロード 18,560,885 | バージョン: 2026.4 リリース