1. IronPDF
  2. トラブルシューティング
  3. ヘッダー/フッターおよび改ページ

ヘッダー/フッターおよび改ページ

This article was translated from English: Does it need improvement?
Translated
View the article in English

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

page-break-afterのCSSルールは、正しく適用されれば常に機能する。 しかし、スタイルシートがdisplay:blockからdivに変更された場合、このルールは機能しません。 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="content">
        <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="content">
        <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を使用していることを確認するために、長さの異なるコンテンツをテストしてください。 これ 工具 がアシストに使える。

HTMLとCSSを検証する

CSSバリデーター は、使用されているCSSスタイルをチェックするために使用できます。

HTMLバリデーター を使うと、HTML入力のバリデーションを支援することができます。

さらに、変更を追跡しながらHTMLをチェックする際に、ウェブデザイナーに依頼することもできます。

一方、開示部分の位置は、テーブル構造やtfootなど多くの要因に影響される。 そのため、HTMLの文字列と構造をダブルチェックすることは必ず役に立つ。

Chromeの印刷プレビューで出力を確認してください。

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

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

Chrome（クローム）の印刷プレビューで HTML をデバッグする方法については、こちらをご覧ください： ピクセルパーフェクトHTMLフォーマット

Chrome PDF Rendering Engineの詳細については、こちらの記事をご覧ください： IronPDFのChromeレンダラーとは何ですか？

4. Chromeのデベロッパーツールを使用する

また、Chrome（クローム）のデベロッパーツールの_Inspect_を使用して、要素内の計算された最終的なCSSを検索することもできます。 これにより、文字列内に存在する各HTML要素の詳細が示される。

以下の内容を日本語に翻訳してください：

  1. HTMLをIronPDFでレンダリングする

    確定したHTML文字列またはHTMLファイルをIronPDF (クロームPDF)レンダラに送り、RenderHtmlAsPdf'を使用します。()またはRenderHtmlFileAsPdf()PDF文書を作成する方法です。

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