1. IronPDF
2. ハウツー
3. 目次を追加

目次を追加する方法

によって チャクニット・ビン

目次(目次)PDFドキュメントの内容をナビゲートするためのロードマップのようなものです。 一般的には冒頭に表示され、PDFの主要なセクションや章、および各セクションが始まるページ番号がリストされています。 これにより、読者はドキュメントの特定の部分をすばやく見つけてジャンプでき、必要な情報に簡単にアクセスできるようになります。

IronPDFは、'h1'、'h2'、'h3'、'h4'、'h5'、および'h6'要素へのハイパーリンクを含む目次を作成する機能を提供します。 この目次のデフォルトのスタイリングは、HTMLコンテンツ内の他のスタイルと競合しません。

IronPDFを始めましょう

今日から無料トライアルでIronPDFをあなたのプロジェクトで使い始めましょう。

最初のステップ:

無料で始める

目次を追加する例

出力PDFドキュメントに目次を作成するには、TableOfContentsプロパティを使用します。 このプロパティは、次のように説明されている3つのTableOfContentsTypesのいずれかに割り当てられます:

• 目次を作成しない
• 基本: ページ番号なしで目次を作成

• ページ番号を追加: ページ番号付きの目次を作成

  この機能をよりよく理解するために、以下のサンプルHTMLファイルをダウンロードしてください:

• サンプルHTMLファイルをダウンロード

コード

:path=/static-assets/pdf/content-code-examples/how-to/table-of-contents.cs

using IronPdf;
using System.IO;

// Instantiate Renderer
ChromePdfRenderer renderer = new ChromePdfRenderer();

// Configure render options
renderer.RenderingOptions = new ChromePdfRenderOptions
{
    // Enable table of content feature
    TableOfContents = TableOfContentsTypes.WithPageNumbers,
};

PdfDocument pdf = renderer.RenderHtmlFileAsPdf("tableOfContent.html");

pdf.SaveAs("tableOfContents.pdf");

Imports IronPdf
Imports System.IO

' Instantiate Renderer
Private renderer As New ChromePdfRenderer()

' Configure render options
renderer.RenderingOptions = New ChromePdfRenderOptions With {.TableOfContents = TableOfContentsTypes.WithPageNumbers}

Dim pdf As PdfDocument = renderer.RenderHtmlFileAsPdf("tableOfContent.html")

pdf.SaveAs("tableOfContents.pdf")

PDFを出力

目次は、それぞれの「h1」、「h2」、「h3」、「h4」、「h5」、および「h6」へのハイパーリンクで作成されます。

PDFの目次の配置

1. HTMLドキュメントに適切なヘッダータグがあることを確認する(h1 から h6).

2. 任意で、目次を表示したい場所にdivタグを挿入します。 以下のdivが提供されない場合、IronPDFは目次を最初に挿入します。

    <div id="ironpdf-toc"></div>

    <div id="ironpdf-toc"></div>

3. レンダーオプションでは、目次をページ番号付きかページ番号なしでレンダリングすることを選択できます。

   ---

目次のスタイリング

目次は、目次のスタイルを定義するさまざまなCSSセレクターを対象にしてCSSを使用してスタイル設定することができます。

また、スタイリングの変更は CustomCssUrl プロパティを使用して行います。 以下の目次の元のスタイリングが含まれているCSSファイルをダウンロードすることから始めましょう。

• カスタムCSSファイルをダウンロード

  [{私はあなたが提供するテキスト内容を日本語に翻訳いたします。よろしければ、翻訳したい内容をこちらに入力してください。(現在、目次をスタイリングする際に、page-break-beforeおよびpage-break-afterプロパティを上書きすることは推奨されていません。これを行うと、ページ番号の計算が破損します。 現在の実装では、目次が他の文書の内容とは別のページにあることが期待されています。)}]

:path=/static-assets/pdf/content-code-examples/how-to/table-of-contents-overwrite-styling.cs

using IronPdf;
using System.IO;

// Instantiate Renderer
ChromePdfRenderer renderer = new ChromePdfRenderer();

// Configure render options
renderer.RenderingOptions = new ChromePdfRenderOptions
{
    // Enable table of content feature
    TableOfContents = TableOfContentsTypes.WithPageNumbers,
    CustomCssUrl = "./custom.css"
};

// Read HTML text from file
string html = File.ReadAllText("tableOfContent.html");
PdfDocument pdf = renderer.RenderHtmlAsPdf(html);

pdf.SaveAs("tableOfContents.pdf");

Imports IronPdf
Imports System.IO

' Instantiate Renderer
Private renderer As New ChromePdfRenderer()

' Configure render options
renderer.RenderingOptions = New ChromePdfRenderOptions With {
	.TableOfContents = TableOfContentsTypes.WithPageNumbers,
	.CustomCssUrl = "./custom.css"
}

' Read HTML text from file
Dim html As String = File.ReadAllText("tableOfContent.html")
Dim pdf As PdfDocument = renderer.RenderHtmlAsPdf(html)

pdf.SaveAs("tableOfContents.pdf")

ヘッダーのスタイル

'table of contents'内のH1ヘッダーに異なるスタイルを適用するには、'ironpdf-toc ul li.h1'セレクターを使用します。 それぞれのヘッダーのスタイリングを変更するために、『h1』を『h2』から『h6』まで置き換えます。

#ironpdf-toc ul li.h1 {
    font-style: italic;
    font-weight: bold;
}

フォントファミリー

「#ironpdf-toc li .title」および「#ironpdf-toc li .page」セレクターを使用することで、目次のフォントファミリーを上書きすることが可能です。 以下の内容を日本語に翻訳してください：

タイトルには 'cursive' フォントを使用し、カスタムフォント 'cursive' を使用するために @font-face 属性を利用しましょう。レモン「フォントはエドゥアルド・トゥニによってデザインされました。」

• レモンフォントをダウンロード

#ironpdf-toc li .title {
    order: 1;
    font-family: cursive;
}

@font-face {
    font-family: 'lemon';
    src: url('Lemon-Regular.ttf')
}

#ironpdf-toc li .page {
    order: 3;
    font-family: 'lemon', sans-serif;
}

インデント

インデントは ':root' セレクターを使用して制御できます。 この値は各ヘッダーレベルのインデント量を決定します(h1, h2, ...)目次内。 必要に応じて増やすこともできますし、0の値でインデントをなくすこともできます。

:root {
    --indent-length: 25px;
}

ドットライン

ヘッダータイトルとページ番号の間の点線を削除します。 元のスタイリングでは、2番目のパラメーターは「currentcolor 1px」です。 ドットを除去するために、「transparent 1px」に変更してください。 このセレクターでは、新しいスタイリングが単に追加されるのではなく、古いスタイリングを完全に上書きするため、他の属性も指定することが重要です。

#ironpdf-toc li::after {
    background-image: radial-gradient(circle, transparent 1px, transparent 1.5px);
    background-position: bottom;
    background-size: 1ex 4.5px;
    background-repeat: space no-repeat;
    content: "";
    flex-grow: 1;
    height: 1em;
    order: 2;
}

チャクニット・ビン

ソフトウェアエンジニア

チャクニットは開発者のシャーロック・ホームズです。彼がソフトウェアエンジニアリングの将来性に気付いたのは、楽しみでコーディングチャレンジをしていたときでした。彼のフォーカスはIronXLとIronBarcodeにありますが、すべての製品でお客様を助けることに誇りを持っています。チャクニットは顧客と直接話すことで得た知識を活用して、製品自体のさらなる改善に貢献しています。彼の逸話的なフィードバックは、単なるJiraチケットを超えて、製品開発、ドキュメントおよびマーケティングをサポートし、顧客の全体的な体験を向上させます。オフィスにいないときは、機械学習やコーディングについて学んだり、ハイキングを楽しんだりしています。