**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 への変換がスムーズに行えます。

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
    ,
    xmlns:svg
    )を使った MathML/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 ファイルのマニフェスト、およびそれらを順序付けるスパインを含む
    これらのファイルは
    .epub
    に zip されます。

実用的なヒントとして、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 の作成手順

  1. META-INF/container.xml
    を作り、パッケージファイルを指すように設定
  2. パッケージファイルにはメタデータ、XHTML ファイル(章)のマニフェスト、および読み順を示すスパインが含まれる
  3. XHTML ファイルを追加し、マニフェスト/スパインで参照
  4. ディレクトリ全体を ZIP し、拡張子を
    .epub
    に変更

この記事の ready‑to‑use コピーは ePub として提供されています。解凍すると

src/epub/text
が確認できます。

Tip: 標準的な電子書籍ツールセット(

se create-draft --white-label
で下位構成を作成し、
se build
でビルド)から始めると、スキャフォールドと互換性が確保されます。


ロビン・ウィトルトンについて

自称「フロントエンド開発者」はそのままに、現在はアクセシビリティの普及に注力しています。

他の記事 → 前日 (10), a11y freedom beaver, 翌日 12, A11y Considerations in Math on the Web

同じ日のほかのニュース

一覧に戻る →

2026/01/01 15:15

**球状ヘビ**

## Japanese Translation: **概要** インターフェースは、矢印キーまたは画面上のボタンでナビゲートし、結果を公開リーダーボードに送信し、そのリーダーボードをページから直接閲覧できるようにします。これらすべての機能は GitHub 上で入手可能なオープンソースコードから構築されているため、開発者は実装を検証・フォーク・拡張することができます。

2026/01/07 6:10

プロバイオティクス摂取後の口腔マイクロバイオームシーケンス研究

## Japanese Translation: > 本研究では、BioGaia の市販オーラルプロバイオティクス「Prodentis」(*Limosilactobacillus reuteri* の2株を含む)が、30日間の自己投与試験中に口腔内で定着できるかどうかを検証しました。事前・治療中・治療後、および停止から1週間後の4つの唾液サンプルを Oxford Nanopore 技術と Plasmidsaurus を用いて解析しました。*L. reuteri* のリードは検出されず、最も近い一致は約91 % の類似度に留まりました。これは定着がなかったか、または検知限界以下のレベルであったことを示唆しています。 > 口腔マイクロバイオームは変化しました:Prodentis を中止した後、*Streptococcus salivarius* が全細菌に対して <2 % から約20 % に上昇しました。同時に *S. mitis* は急激に減少(≈15 % → 1 %)し、総合的な Streptococcus の割合はほぼ一定のままでした。これは *S. salivarius* がニッチを占有して置き換えたことを示唆しています。さらに *Veillonella tobetsuensis* は 2.1 % から 5.7 % に増加し、成長する *S. salivarius* が生成する乳酸に支えられた可能性があります。いずれのサンプルにも赤複合体(P. gingivalis, T. forsythia, T. denticola)は検出されませんでした。 > シーケンス解析は便利で費用対効果が高く、4サンプルに対して総額 240 ドルで済みました。高品質な ONT リード(中央値 Q 23、約1,500 nt)が得られました。この結果は口腔プロバイオティクスの定着検出の難しさを浮き彫りにし、短期間でも製品がマイクロバイオームを再構築できることを示しています。Prodentis は風味が良く、一時的な口腔健康効果を提供する可能性がありますが、本実験ではプロバイオティクス株の定着は検出されませんでした。将来的には、より高用量や代替投与システムを試し、定着と長期的影響を評価する研究が期待されます。

2026/01/07 5:24

**ハッカー全員へ:お金の仕組み(2024)**

## Japanese Translation: --- ## Summary 記事「Calling All Hackers」は、cts(別名 gf_256)が *Phrack* Volume 0x10、Issue 0x47、Phile #0x11 of 0x11 に掲載したもので、ハッカーが自らの技術スキルを持続可能なビジネスに転換できると主張しています―ただし、基本的な金融リテラシーを習得し、暗号資産やベンチャーキャピタル界隈で広く蔓延している投機的ハイプを避ける必要があります。 cts は「shitcoin」のポンプ&ダンプ手法と、「Western Way」と呼ばれるものを対比しています。後者は依然としてハイプに頼っていますが、実際の価値創造を主張しています。彼はトークンローンチの仕組みを説明し、取引所、市場メーカー、創業者、ベンチャーキャピタル(SAFT契約を含む)の役割を指摘します。同記事は、100×リターンに執着するベンチャーキャピタルを批判し、多くのVCファンドがパワーロウ分布に依存しているため創業者が高リスクな賭けへと押されることを指摘しています。 株主、従業員、顧客、コミュニティ間の緊張について語り、株主価値がしばしば他のステークホルダーを犠牲にして優先されると主張します。この短期的な焦点はレイオフや製品品質の低下、「カルトリーダー」CEO の登場につながり、持続可能なモデルよりもハイプによって推進されるケースがあると述べています。 ハッカーへの実務上の示唆としては、以下があります:プライベートでしっかり統治された企業を構築すること、責任を持って資金調達を行うこと、長期的なビジョンを維持すること、そして評価額の膨張などの虚栄心に駆られた指標を避けること。記事は Airbnb Class A株のSEC提出資料、Moxie Marlinspike のブログ投稿、Twitter スレッドなど具体的なソースを引用し、エクイティ構造とVC行動を示しています。 cts はハッカーコミュニティ(CTFチーム、Phrack スタッフ、Zellic メンバー)に感謝し、将来のテクノロジー生態系を形作りたいハッカーには、体系的な経済と金融を理解することが不可欠であると強調しています。付録では、IB、PE、HF、VC などの金融用語をハッカー向けに風刺的に定義したリストをユーモラスに掲載しています。 主旨は:ハッカーが金融リテラシーと持続可能なビジネス慣行を受け入れれば、よりレジリエントなテックエコシステムを構築し、VC の期待を真の価値創造へシフトさせ、エクイティ・ガバナンス・ステークホルダーのバランスに関する業界全体の規範に影響を与えることができるという点です。

**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 への変換がスムーズに行えます。 | そっか~ニュース