2026-09-13

EPUB: 表紙の作成

EPUBで表紙を作成する場合、単に画像ファイルを読み込ませればいいというわけではない。いくつかお作法というものがあり、webと違い少し独特な書き方をする。

この記事では自作でEPUBを作っている人向けに表紙画像のサイズや形式、xhtmlの作成について解説します。

画像サイズ/形式

EPUBの表紙画像を作成する場合最低でも解像度は2:3のアスペクト比で1080×2400px程度であれば画像が粗くならなくて済む。ご存じの通り縦長画像が一般的なのでアスペクト比2:3が理想。画像サイズの指定はないのでお好みのサイズで構わない。また表紙を作成しなくても別に問題ない。

画像形式はpng/jpegが基本。gif/webp/svgの使用は問題ないがリーダーシステムによるので互換性のある表紙を作成するのであればpng/jpegを使用することを推奨する。

ファイル構成

使用する画像を理解したら次にxhtmlファイルを作成していきます。まずは作成するEPUBのファイル構成についてご紹介します。

SampleEPUB
│ mimetype
│
├─EPUB
│ │ nav.xhtml
│ │ package.opf
│ │ style.css
│ │
│ └─cover
│       cover.jpeg
│       cover.xhtml
│
└─META-INF
        container.xml

EPUBで表紙だけを作成したい場合次のファイルが必須になります。これにプラス表紙画像関連のデータ(cover)になります。

mimetype
nav.xhtml
package.opf
META-INF/container.xml

ここではその他のファイルの作成方法については割愛しcover中心に解説します。

cover.jpeg

表紙画像を作成したら適当なフォルダー名を作成して(cover)その中に画像データを格納します。

cover.xhtml

表紙画像と同じディレクトリ内に入れておくと管理しやすいので同じディレクトリ内にcover.xhtmlファイルを作成します。最小限の記載だと次のコードで作成することができます。

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xml:lang="ja" lang="ja">
    <head>
        <title>cover</title>
        <link rel="stylesheet" href="../style.css" type="text/css"/>
    </head>
    <body>
        <section>
            <img src="cover.jpeg" alt="cover"/>
        </section>
    </body>
</html>

EPUBを作成するにはxmlnsやxmlns:epubの名前空間の宣言が必要でこれがないとエラーになります。あとは画像のパスを記載すれば表紙部分のxhtmlファイルは完成です。

package.opf

次に.opfファイルについて説明します。EPUBは少し独特で.opfに読み込ませる画像データやページすべて読み込ませる必要があります。<manifest>に画像のパスと画像表示用のxhtmlファイルを記述する必要があります。

<?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-xxxx</dc:identifier>
        <dc:title>Sample Epub</dc:title>
        <dc:language>ja</dc:language>
        <dc:creator>Sakamoto Tarou</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"/>
    </manifest>
    <spine>
        <itemref idref="cover"/>
        <itemref idref="nav"/>
    </spine>
</package>

<item>

表紙画像の場合次の3つの属性が必須になります。

<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"/>

`href`	画像のファイルパス
`id`	`<spine>`と紐づける参照ID
`media-type`	画像の形式を記載。詳しくは3.2 Core media typesを参照
`properties="cover-image"`	リーディングシステム側に表紙画像と認識させるために記述します。必須ではないが、記載しないとシステムによってはエラーが表示される可能性がある。

<spine>

そして最後に読み込み順を設定します。

<spine>
    <itemref idref="cover" />
    <itemref idref="nav" />
</spine>

注意点

EPUBの仕様上nav.xhtmlファイルがない状態でepubcheckすると下記のようにエラーが表示されます。なのでnav.xhtmlファイルも作成する必要があるので注意。

ERROR(RSC-001): .\sample.epub/EPUB/nav.xhtml(-1,-1): ファイル "EPUB/nav.xhtml" が見つかりません.

基本的にxhtmlの構成はcover.xhtmlと変わりないですがどの要素でも構わないのですが目次にepub:type=”toc”を加える必要がります。こちらも必須属性になりリーディングシステムに目次の情報を伝達してくれます。

<nav epub:type="toc">
    <ol>
        <li><a href="chapter01.xhtml">第1章　はじめに</a></li>
        <li><a href="chapter02.xhtml">第2章　コンピューターについて</a></li>
        <li><a href="chapter03.xhtml">第3章　プログラミングの基本</a></li>
        <li><a href="chapter04.xhtml">第4章　ネットワークの仕組み</a></li>
        <li><a href="chapter05.xhtml">第5章　情報セキュリティ</a></li>
        <li><a href="chapter06.xhtml">第6章　ソフトウェアを使いこなす</a></li>
        <li><a href="chapter07.xhtml">第7章　問題解決の考え方</a></li>
        <li><a href="chapter08.xhtml">第8章　効率的な学習方法</a></li>
        <li><a href="chapter09.xhtml">第9章　オープンソースの世界</a></li>
        <li><a href="chapter10.xhtml">第10章　さらに学ぶために</a></li>
        <li><a href="chapter11.xhtml">付録　参考資料</a></li>
    </ol>
</nav>