EPUB: 内部リンク/外部リンクの作成方法

EBPUではページ内を移動する内部リンク、外部のWEBページリンクや脚注リンクを使用することが可能です。大きく分けると【内部リンク】/【外部リンク】の2つに分けられます。ただし、自由にリンクを設置できるわけではなくいくつか制限があるのでご注意ください。

内部リンク

内部リンクに関しては特に制限はなくHTMLと同様にフラグメント識別子を使えば自由に内部リンクの設置が可能です。例えば下記は目次(nav.xhtml)の内部リンク。

<nav epub:type="toc">
    <ol>
        <li><a href="page.xhtml#1">目次1</a></li>
        <li><a href="page.xhtml#2">目次2</a></li>
        <li><a href="page.xhtml#3">目次3</a></li>
        <li><a href="page.xhtml#4">付録</a></li>
    </ol>
</nav>

EPUBでもターゲット要素は次のように設定すれば遷移先になる。

<h1 id="1">目次1</h1>

内部リンクについては特に複雑なことはあまりない。

外部リンク

外部リンクについては注意する点は目次内には設置することは不可能。もっと厳密にいうとepub:type="toc"要素内には設置することはできない。例えば、下記のnav.xhtmlページのnav要素に外部リンクを設置しているが、epubcheckを実行するとエラーになる。

<nav epub:type="toc">
    <ol>
        <li><a href="page.xhtml#1">なぜ皆、そんなに急いでいるのでしょうか？</a></li>
        <li><a href="page.xhtml#2">10年でプログラミングを学ぶ</a></li>
        <li><a href="page.xhtml#3">プログラマーになりたいあなたへ</a></li>
        <li><a href="page.xhtml#4">付録：言語の選択</a>
            <ol>
                <li><a href="https://sample.jp">サンプルページ</a></li>
            </ol>
        </li>
    </ol>
</nav>

下記のエラー（ERROR(NAV-010)）のように外部リソースの参照することはepub:type="toc"要素内ではできない。

ERROR(NAV-010): .\sample.epub/EPUB/nav.xhtml(17,57): "toc" nav は外部のリソースへリンクできません; "https://sample.jp" へのリンクがありました.

ただ、nav.xhtml内が禁止というわけではない。epub:type="toc"という属性の要素下に制限があるというだけで、下記のようにnav.xhtml内に外部リンクを使用しても問題ない。

<?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>Teach Yourself Programming in Ten Years</title>
        <link rel="stylesheet" type="text/css" href="style.css"/>
    </head>
    <body>
        <h1>サンプル</h1>
        <p><a href="https://sample.jp"sample.jp</a></p>
        <nav epub:type="toc">
            <ol>
                <li><a href="page.xhtml#1">目次1</a></li>
                <li><a href="page.xhtml#2">目次2</a></li>
                <li><a href="page.xhtml#3">目次3</a></li>
                <li><a href="page.xhtml#4">付録</a></li>
            </ol>
        </nav>
    </body>
</html>