
2026/01/03 8:11
**HTML の変更点(ePub 3 への移行)** | 項目 | 変更内容 | 具体例 | |------|----------|--------| | **文書構造** | `<body>` の外側に `<head>` と `<body>` を分離し、全体を `<html>` タグで囲みます。 | `<!DOCTYPE html> <html lang="en"> <head>…</head> <body>…</body></html>` | | **メタ情報** | `<?xml-stylesheet?>` の代わりに `<link rel="stylesheet" href="…" type="text/css">` を使用します。 | `<link rel="stylesheet" href="styles.css" media="all">` | | **画像** | `<img src="…">` の代わりに `<image>` タグを推奨(ePub 3 では必須ではありません)。 | `<image href="cover.jpg"/>` | | **埋め込みメディア** | `<video>`, `<audio>` がサポートされます。`<source>` に MIME タイプを明示します。 | `<video controls src="movie.mp4"></video>` | | **リンク** | `target="_blank"` は無効化されます。外部リンクには `rel="external"` を付与してください。 | `<a href="https://example.com" rel="external">External</a>` | | **CSS** | 位置固定(`position:fixed;`)や背景画像は制限されます。ページ全体のレイアウトに使用しないでください。 | `body { position:relative; }` | | **JavaScript** | `<script>` は許可されていますが、外部スクリプトの読み込みは推奨されません。 | `<script src="app.js"></script>` | | **アクセシビリティ** | ARIA 属性はそのまま使用できます。ただし `role` が「navigation」などの場合は、ePub のナビゲーションファイルと重複しないよう注意してください。 | `<nav role="navigation">…</nav>` | ### まとめ - ePub 3 は HTML5 をベースにしていますが、**読みやすさとデバイス互換性**を優先した制限があります。 - 主な変更点は **ヘッダー/ボディの分離、スタイルリンク方式、外部メディアのサポート**です。これらを意識して HTML を作成すると、ePub への変換がスムーズに行えます。
RSS: https://news.ycombinator.com/rss
要約▶
Japanese Translation:
要約
この記事では、ePub 3.3電子書籍をウェブページのように扱い、XHTMLで構造化し、CSSでスタイリングし、XML名前空間を用いて正しいマークアップを実現する方法について説明しています。ePubは有効なXMLである必要があり、自己閉鎖タグ、正しい名前空間(
xml: を含む)、および言語属性(xml:lang)が必須です。これらが欠けているとリーダーはエラーを報告します。
主な技術的詳細は以下の通りです:
- 名前空間対応セレクタによる言語処理(例:
)@namespace xml …; q[xml|lang] {…} - 名前空間宣言(
,xmlns:m
)を使った MathML/SVG の埋め込みxmlns:svg - 構造的意味論としての
、epub:type="noteref"
、epub:type="endnote"
など。エンドノートはepub:type="backlink"
でリンクされ、対応する場合はモーダル内に表示されます。<a href="#note‑1" epub:type="noteref"> - リーダーの制約:古い/低性能リーダーは複雑な CSS セレクタ(
,:not()
)をサポートしないため、シンプルな構文が安全です。:is()
記事ではまた ePub パッケージ構造 も説明しています:
- 必須の
がルートパッケージファイルへの参照を示すMETA‑INF/container.xml - パッケージファイル自体はメタデータ、すべての XHTML ファイルのマニフェスト、およびそれらを順序付けるスパインを含む
これらのファイルは
に zip されます。.epub
実用的なヒントとして、ePub を unzip したり拡張子を
.zip に変更して内容を確認する方法があります。構築には Standard Ebooks ツールセット( se create‑draft --white‑label, se build )が推奨されています。
文脈的背景として、進化しつづける Digital Publishing WAI‑ARIA 規格は徐々に
epub:type をロール値で置き換えていますが、多くのリーダー(例:Apple Books)はまだ遅れを取っています。この記事はこのガイダンスを、W3C ePub 3.3 標準と現在のリーダー実装という広い枠組みの中に位置付けています。
将来について、著者はアクセシビリティのために WAI‑ARIA ロールへの移行が進むと予測しつつ、Standard Ebooks のようなツールが新しい仕様へ継続的に適応していくと述べています。実務上の結論として、著者は既存のウェブ開発スキルを活用してアクセシブルでクロスプラットフォームな電子書籍を作成できることを示し、出版社や読者双方に利益があると主張しています
本文
ロビン・ウィトルトン著
2025年12月11日発行
Pub は e‑books の W3C 標準です。
Web に関する知識を活かし、単一ファイルとして自由に配布できる自己完結型の文書セットを作成できます。
これらは極低電力デバイスでも読みやすく、画面サイズに合わせてレイアウトが再構築されます。
HTML、というわけでは
ePub は HTML で構築されます―具体的には XHTML、すなわち「HTML Living Standard」の XML バージョンです。
XML であるために次の点を守らなければなりません。
- 有効かつ構文上正しいマークアップ(自己終了タグ、適切な名前空間、
等)を書くxml:lang - 必要に応じて追加 XML 言語をその名前空間で宣言する
- ePub 用の名前空間を使用して、リーダーが提供する拡張機能を利用できるようにする
CSS、というわけでは
e‑reader のブラウザは通常基本的なもので、
:not() や :is() などの最新疑似クラスをサポートしていない場合があります。シンプルなレイアウトを採用し、
@supports を使って段階的に機能拡張することが推奨されます。
名前空間対応マークアップなので、セレクタは名前空間を参照する必要があります。例:
@namespace xml "http://www.w3.org/XML/1998/namespace"; q[xml|lang] { … }
奇妙な拡張機能
名前空間のサポートにより、他の XML 対応言語を直接 XHTML に埋め込むことができます。
-
MathML
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:m="http://www.w3.org/1998/Math/MathML"> <m:math alttext="n + 1"> <m:mi>n</m:mi> <m:mo>+</m:mo> <m:mn>1</m:mn> </m:math> </html> -
SVG
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg"> <svg:svg viewBox="0 0 452 452"> <svg:title>the HTMHell logo</svg:title> <svg:path d="M198.2…"/> </svg:svg> </html>
ePub セマンティック語彙
W3C の ePub 規格(現在はバージョン 3.3)では、
epub:type 属性が定義されており、ユーザビリティを向上させます。
<p>ePub は地獄だ。 <a href="endnotes.xhtml#note-1" id="noteref-1" epub:type="noteref">1</a> </p> <li id="note-1" epub:type="endnote"> <p>…HTMHell を読まなければ。</p> <a href="page.xhtml#noteref-1" epub:type="backlink">↩</a> </li>
epub:type は徐々に Digital Publishing WAI‑ARIA 規格で定義されたロール値へ置き換えられつつありますが、サポートはまだ限定的です。
さらに Z39.98‑2012 Structural Semantics Vocabulary が拡張を提供します(例:
<span epub:type="z3998:roman">DCLXVI</span>)。ただし、ブラウザの対応状況は稀です。
ePub の作成手順
を作り、パッケージファイルを指すように設定META-INF/container.xml- パッケージファイルにはメタデータ、XHTML ファイル(章)のマニフェスト、および読み順を示すスパインが含まれる
- XHTML ファイルを追加し、マニフェスト/スパインで参照
- ディレクトリ全体を ZIP し、拡張子を
に変更.epub
この記事の ready‑to‑use コピーは ePub として提供されています。解凍すると
src/epub/text が確認できます。
Tip: 標準的な電子書籍ツールセット(
se create-draft --white-label で下位構成を作成し、se build でビルド)から始めると、スキャフォールドと互換性が確保されます。
ロビン・ウィトルトンについて
自称「フロントエンド開発者」はそのままに、現在はアクセシビリティの普及に注力しています。
- サイト: robinwhittleton.com
- Mastodon: @front‑end.social/@robinwhittleton
他の記事 → 前日 (10), a11y freedom beaver, 翌日 12, A11y Considerations in Math on the Web