2026-09-14

EPUB: 目次の作り方

EPUBの目次は目次専用のファイルを作成して.opfへ登録することでリーダーシステムから目次と認識され表示されています。例えば下記の画像が目次専用ファイルとなっていてリスト形式で表示されます。ファイル構造を理解し、目次ファイルの作成から.opfの登録についてまた目次のリンクの作成についてまで解説していますのでご覧ください。

ファイル構造について

目次ファイルの作成の前にファイル構造について説明しておきます。ファイルの位置指定は仕様上どこに配置しても問題ありません。この後作成するpackage.opfに登録するパスが問題なければどこに配置してもいいというルールになっています。

ただ一般的には下記のEPUB構造のように複数ファイルをまとめた構成になっています。

EPUBFile
│ mimetype
│
├─EPUB
│ │ chapter1.xhtml
│ │ chapter2.xhtml
│ │ chapter3.xhtml
│ │ chapter4.xhtml
│ │ chapter5.xhtml
│ │ nav.xhtml
│ │ package.opf
│ │ style.css
│ │
│ └─cover
│   cover.png
│   cover.xhtml
│
└─META-INF
    container.xml

nav.xhtmlの作成

ナビゲーションファイルのファイル名の指定は特になく自由に決めることが可能です。ここではnav.xhtmlとします。ファイルの中身は次の通り。リンク先が空になっていますが意図的に空にしています。後ほど説明しますが数か所だけのリンク先を参照してepubcheckを実行してしまうとエラーが表示されてしまうのでそれを回避するためです。

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops">
    <head>
        <title>ITエンジニアの基礎知識</title>
        <link rel="stylesheet" type="text/css" href="style.css"/>
    </head>
    <body>
        <h1>ITエンジニアの基礎知識</h1>
        <p>ITエンジニアとして必要な知識とスキルを学ぶためのガイド</p>
        <nav epub:type="toc">
            <ol>
                <li><a href="">この文書の目的</a></li>
                <li><a href="">ITエンジニアとは？</a></li>
                <li><a href="">ITエンジニアとしての心構え</a>
                    <ol>
                        <li><a href="">1.問題を見つけ、解決方法を考える。</a></li>
                        <li><a href="">2.一度解決した問題を記録し、再利用する。</a></li>
                        <li><a href="">3.単純な作業は自動化する。</a></li>
                        <li><a href="">4.新しい技術を積極的に学ぶ。</a></li>
                        <li><a href="">5.知識だけでなく、実際に手を動かす。</a></li>
                    </ol>
                </li>
                <li><a href="">基本的なITスキル</a>
                    <ol>
                        <li><a href="">1.プログラミングを学ぶ。</a></li>
                        <li><a href="">2.オペレーティングシステムの仕組みを理解する。</a></li>
                        <li><a href="">3.ネットワークの基礎を学ぶ。</a></li>
                        <li><a href="">4.データベースの基本を理解する。</a></li>
                    </ol>
                </li>
                <li><a href="">ITエンジニアに求められる知識</a></li>
                <li><a href="">技術力を高めるためにできること</a>
                    <ol>
                        <li><a href="">1.プログラムを書いて実践する。</a></li>
                        <li><a href="">2.オープンソースソフトウェアを利用する。</a></li>
                        <li><a href="">3.技術的な情報を調べる習慣を身につける。</a></li>
                        <li><a href="">4.自分で環境を構築して試してみる。</a></li>
                        <li><a href="">5.学んだ知識を記録して整理する。</a></li>
                    </ol>
                </li>
                <li><a href="">プログラミングと自動化</a></li>
                <li><a href="">コマンドラインとシェル</a></li>
                <li><a href="">ネットワークとインターネット</a></li>
                <li><a href="">ソフトウェア開発の基本</a></li>
                <li><a href="">よくある質問</a></li>
            </ol>
        </nav>
    </body>
</html>

当然xhtmlファイルなので宣言をします。またEPUBでは下記の名前空間を使用しないとエラーになるので記述する必要があります。

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops">
...

epub:type="toc"とはその要素が目次であることを示す属性で必須になります。リーダーシステムで目次ボタンの内容がこの要素になり目次の機能として重要な部分となります。epub:type="toc"の記載場所に指定はないが、一般的にはnav要素に配置しています。

<nav epub:type="toc">
    <ol>
        <li><a href="">この文書の目的</a></li>
        <li><a href="">ITエンジニアとは？</a></li>
        <li><a href="">ITエンジニアとしての心構え</a>
            <ol>
                <li><a href="">1.問題を見つけ、解決方法を考える。</a></li>
                <li><a href="">2.一度解決した問題を記録し、再利用する。</a></li>
                <li><a href="">3.単純な作業は自動化する。</a></li>
                <li><a href="">4.新しい技術を積極的に学ぶ。</a></li>
                <li><a href="">5.知識だけでなく、実際に手を動かす。</a></li>
            </ol>
        </li>
        <li><a href="">基本的なITスキル</a>
            <ol>
                <li><a href="">1.プログラミングを学ぶ。</a></li>
                <li><a href="">2.オペレーティングシステムの仕組みを理解する。</a></li>
                <li><a href="">3.ネットワークの基礎を学ぶ。</a></li>
                <li><a href="">4.データベースの基本を理解する。</a></li>
            </ol>
        </li>
        <li><a href="">ITエンジニアに求められる知識</a></li>
        <li><a href="">技術力を高めるためにできること</a>
            <ol>
                <li><a href="">1.プログラムを書いて実践する。</a></li>
                <li><a href="">2.オープンソースソフトウェアを利用する。</a></li>
                <li><a href="">3.技術的な情報を調べる習慣を身につける。</a></li>
                <li><a href="">4.自分で環境を構築して試してみる。</a></li>
                <li><a href="">5.学んだ知識を記録して整理する。</a></li>
            </ol>
        </li>
        <li><a href="">プログラミングと自動化</a></li>
        <li><a href="">コマンドラインとシェル</a></li>
        <li><a href="">ネットワークとインターネット</a></li>
        <li><a href="">ソフトウェア開発の基本</a></li>
        <li><a href="">よくある質問</a></li>
    </ol>
</nav>

またEPUBの目次は<ol>タグを使用します。<ul>タグを使用するとファイル解析時のエラーが表示されEpubcheckではエラー（ERROR(RSC-005)）が表示されますので気を付けてください。

また入れ子にしたい場合は下記のコードのように記述します。

<li><a href="">技術力を高めるためにできること</a>
    <ol>
        <li><a href="">1.プログラムを書いて実践する。</a></li>
        <li><a href="">2.オープンソースソフトウェアを利用する。</a></li>
        <li><a href="">3.技術的な情報を調べる習慣を身につける。</a></li>
        <li><a href="">4.自分で環境を構築して試してみる。</a></li>
        <li><a href="">5.学んだ知識を記録して整理する。</a></li>
    </ol>
</li>

もしリスト内のリンクをテキストとして表示させたい場合<span>要素を使う必要があります。<li>要素に直接テキストを入力するとファイル解析時のエラー（ERROR(RSC-005)）になりますので注意していください。

<li><a href="">ソフトウェア開発の基本</a></li>
<li><span>よくある質問</span></li>

nav要素内で使用できる要素

要素	役割	制限
`h1`〜`h6` / `hgroup`	タイトル	先頭に記載
`ol`	リスト	必須、`nav`内に１つ
`li`	リストの各項目	`ol`の直下
`<a>` / `<span>`	リンク付き / リンクなしテキスト	`<li>`の直下

.opfとの連携

目次ファイルを作成したらopfに登録します。

<?xml version="1.0" encoding="UTF-8"?>
<package version="3.0" unique-identifier="uid" xmlns="http://www.idpf.org/2007/opf" xmlns:dc="http://purl.org/dc/elements/1.1/">
    <metadata>
        <dc:identifier id="uid">urn:uuid:7e50346d-d5c2-405b-93aa-84f078c760a6</dc:identifier>
        <dc:title>ITエンジニアの基礎知識</dc:title>
        <dc:language>ja</dc:language>
        <dc:creator>Unknown</dc:creator>
        <meta property="dcterms:modified">2026-07-21T02:45:04Z</meta>
    </metadata>
    <manifest>
        <item href="cover/cover.jpeg" id="cover-image" media-type="image/jpeg" properties="cover-image"/>
        <item href="cover/cover.xhtml" id="cover" media-type="application/xhtml+xml"/>
        <item href="style.css" id="css" media-type="text/css"/>
        <item href="nav.xhtml" id="nav" media-type="application/xhtml+xml" properties="nav"/>
        <item href="cha1.xhtml" media-type="application/xhtml+xml" id="cha1"/>
    </manifest>
    <spine>
        <itemref idref="cover"/>
        <itemref idref="nav"/>
        <itemref idref="cha1"/>
    </spine>
</package>

EPUBではどのページが目次なのか識別するためにproperties="nav"と入力する必要があります。この属性がないとERROR(RSC-005)とエラーの原因になります。

ファイル解析時のエラー: Exactly one manifest item must declare the "nav" property (number of "nav" items: 0).

<manifest>はファイルのリソース参照する役割だけなので順番は適当で構いません。<spine>要素に関しては本の順番になります。

目次を使ったページ内リンク

目次の<a>タグのリンク先を空白にしていましたが、意図的に空にしています。というのもepubcheckをするときに中途半端にページのリンク先を参照してしまうと下記のようなエラーが表示されてしまいEPUBが生成できないためです。

WARNING(NAV-011): .\EPUBFile.epub/EPUB/nav.xhtml(13,32): "toc" nav は閲覧順でなければなりません; リンクターゲット "EPUB/nav.xhtml" は spine 順で前述のリンクのターゲットの前になるようにしてください.

ページ内リンクに関してはHTMLと同様な動きなので各ページのパスを指定しフラグメント識別子を使いたい場合は下記のように設定すれば問題ありません。

<nav epub:type="toc">
    <ol>
        <li><a href="cha1.xhtml">この文書の目的</a></li>
        <li><a href="cha2.xhtml">ITエンジニアとは？</a></li>
        <li><a href="cha3.xhtml">ITエンジニアとしての心構え</a>
            <ol>
                <li><a href="cha3.xhtml#cha3-1">1.問題を見つけ、解決方法を考える。</a></li>
                <li><a href="cha3.xhtml#cha3-2">2.一度解決した問題を記録し、再利用する。</a></li>
                <li><a href="cha3.xhtml#cha3-3">3.単純な作業は自動化する。</a></li>
                <li><a href="cha3.xhtml#cha3-4">4.新しい技術を積極的に学ぶ。</a></li>
                <li><a href="cha3.xhtml#cha3-5">5.知識だけでなく、実際に手を動かす。</a></li>
            </ol>
        </li>
        <li><a href="cha4.xhtml">基本的なITスキル</a>
            <ol>
                <li><a href="cha4.xhtml#cha4-1">1.プログラミングを学ぶ。</a></li>
                <li><a href="cha4.xhtml#cha4-2">2.オペレーティングシステムの仕組みを理解する。</a></li>
                <li><a href="cha4.xhtml#cha4-3">3.ネットワークの基礎を学ぶ。</a></li>
                <li><a href="cha4.xhtml#cha4-4">4.データベースの基本を理解する。</a></li>
            </ol>
        </li>
        <li><a href="cha5.xhtml">ITエンジニアに求められる知識</a></li>
        <li><a href="cha6.xhtml">技術力を高めるためにできること</a>
            <ol>
                <li><a href="cha6.xhtml#cha6-1">1.プログラムを書いて実践する。</a></li>
                <li><a href="cha6.xhtml#cha6-2">2.オープンソースソフトウェアを利用する。</a></li>
                <li><a href="cha6.xhtml#cha6-3">3.技術的な情報を調べる習慣を身につける。</a></li>
                <li><a href="cha6.xhtml#cha6-4">4.自分で環境を構築して試してみる。</a></li>
                <li><a href="cha6.xhtml#cha6-5">5.学んだ知識を記録して整理する。</a></li>
            </ol>
        </li>
        <li><a href="cha7.xhtml">プログラミングと自動化</a></li>
        <li><a href="cha8.xhtml">コマンドラインとシェル</a></li>
        <li><a href="cha9.xhtml">ネットワークとインターネット</a></li>
        <li><a href="cha10.xhtml">ソフトウェア開発の基本</a></li>
        <li><a href="cha11.xhtml">よくある質問</a></li>
    </ol>
</nav>