EPUB形式のデータを作成
続いてEPUB形式のデータを作成します。オーサリングツールには前回までと同様「Sigil」を使います。まず、Sigilを起動して新規ドキュメントを作成し、テキストを流し込みます。
最初にテキストを流し込む
次に、画像を配置してページを一通り作っていきます（詳しい手順は前回の記事を参照）。テキストの流し込みと画像の配置が済んだら、スタイルシート（CSS）を使って、文字のサイズや色、行間を調整します。
Sigilでスタイルシートを設定する。ここでは見出しと行間調整、プログラム部分のフォントなどを指定した。なお、SigilはXHTMLファイル内にスタイルを記述するが、本来は別ファイルに分離する方が好ましい
EPUBのスタイルシートはWebで一般的に使われているCSS 2.1をベースにしていますが、すべてのプロパティが使えるわけではありません。
[＋] EPUBで使用できるCSSプロパティ一覧（クリックで表示）
| CSSプロパティ名 | 指定できる値 | 備考 |
|---|---|---|
| @media | aural, all | |
| @page | :left, :right, :first | |
| margin-top | 値か割合 | |
| margin-bottom | 値か割合 | |
| margin-left | 値か割合 | |
| margin-right | 値か割合 | |
| margin | 値か割合（複数箇所指定可） | |
| auto | 0か1 | |
| padding-top | 値か割合 | |
| padding-bottom | 値か割合 | |
| padding-left | 値か割合 | |
| padding-right | 値か割合 | |
| padding | 値か割合（複数箇所指定可） | |
| border-top-width | thin, medium, thick, 値 | |
| border-bottom-width | thin, medium, thick, 値 | |
| border-left-width | thin, medium, thick, 値 | |
| border-right-width | thin, medium, thick, 値 | |
| border-width | thin, medium, thick, 値（複数箇所指定可） | |
| border-top-color | transparent, カラー | |
| border-bottom-color | transparent, カラー | |
| border-left-color | transparent, カラー | |
| border-right-color | transparent, カラー | |
| border-color | transparent, カラー（複数箇所指定可） | |
| border-top-style | none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset | dotted, dashed, double, groove, ridge, inset, outsetはsolidで表示 |
| border-bottom-style | none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset | dotted, dashed, double, groove, ridge, inset, outsetはsolidで表示 |
| border-left-style | none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset | dotted, dashed, double, groove, ridge, inset, outsetはsolidで表示 |
| border-right-style | none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset | dotted, dashed, double, groove, ridge, inset, outsetはsolidで表示 |
| border-style | none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset（複数箇所指定可） | dotted, dashed, double, groove, ridge, inset, outsetはsolidで表示 |
| border-top | border関連で指定できるカラー、太さ、種類 | |
| border-bottom | border関連で指定できるカラー、太さ、種類 | |
| border-left | border関連で指定できるカラー、太さ、種類 | |
| border-right | border関連で指定できるカラー、太さ、種類 | |
| border | border関連で指定できるカラー、太さ、種類（複数箇所指定可） | |
| display | none, inline, block, run-in, table, inline-table, table-row-group, table-header-group, table-footer-group, table-column-group, table-row, table-column, table-cell, table-caption, inherit, oeb-page-head, oeb-page-foot | oeb-page-head, oeb-page-footは表示位置を先頭か末尾に固定 |
| float | left, right, none, inherit | |
| clear | none, left, right, both, inherit | |
| direction | ltr, rtl, inherit | |
| unicode-bidi | normal, embed, bidi-override, inherit | |
| oeb-column-number | auto, 段組数 | 段組表示がサポートされていない場合は1にセットされる（段組なし） |
| width | auto, inherit, 値か割合 | |
| min-width | inherit, 値か割合 | |
| max-width | auto, inherit, 値か割合 | |
| height | auto, inherit, 値か割合 | |
| min-height | inherit, 値か割合 | |
| max-height | none, inherit, 値か割合 | |
| line-height | normal, inherit, 値か割合 | |
| vertical-align | baseline, sub, super, top, text-top, middle, bottom, ext-bottom, inherit | |
| content | inherit, 文字列 | |
| list-style-type | none,disc,circle,square,decimal,decimal-leading-zero,lower-roman,upper-roman,lower-greek,upper-greek,lower-alpha,lower-latin,upper-alpha,upper-latin,hebrew,armenian,georgian,cjk-ideographic,hiragana,katakana,hiragana-iroha,katakana-iroha,inherit | |
| list-style-position | inside, outside, inherit | |
| list-style | リスト関連で指定できる種類と位置 | |
| page-break-before | auto, always, avoid, left, right, inherit | |
| page-break-after | auto, always, avoid, left, right, inherit | |
| page-break-inside | auto, avoid, inherit | |
| orphans | inherit, 値 | |
| widows | inherit, 値 | |
| color | inherit, カラー | |
| background-color | inherit, transparent, カラー | |
| @font-face | font-family,font-style,font-variant,font-weight,font-size,src | |
| font-style | normal, italic, oblique, inherit | |
| font-variant | normal, small-caps | |
| font-weight | normal, bold, 100-900, inherit | |
| font-size | xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger, inherit, 値か割合 | |
| font | フォント関連で指定できる形状や太さ | |
| text-indent | inherit, 値か割合 | |
| text-align | left, right, center, justify, inherit | |
| text-decoration | none, line-through, underline, inherit | |
| white-space | normal, pre, nowrap, inherit | |
| caption-side | top, bottom, left, right, inherit | |
| table-layout | fixed, auto, inherit | |
| speak-header | once, always, inherit | |
| volume | silent, x-soft, soft, medium, loud, x-loud, inherit, 0-100, 割合 | |
| speak | normal, none, spell-out, inherit | |
| pause-before | inherit, 割合, 時間 | |
| pause-after | inherit, 割合, 時間 | |
| pause | inherit, 割合, 時間 | |
| cue-before | none, inherit, URIを指定 | |
| cue-after | none, inherit, URIを指定 | |
| cue | none, inherit, URIを指定 | |
| speech-rate | x-slow, slow, medium, fast, x-fast, faster, slower, inherit, 値 | |
| voice-family | male, female, child, inherit | |
| picth | x-low, low, medium, high, x-high, inherit, 周波数 | |
| stress | 0-100, inherit | |
| richness | 0-100, inherit | |
| speak-punctuation | code, none, inherit | |
| speak-numeral | digits, continuous, inherit |
たとえば背景画像などは指定できませんし、位置揃えは左／中央／右の3種類しかないので、雑誌のような複雑なレイアウトはできません。また、現在のEPUBの仕様では、ルビや縦書き、HTML5の要素やCSS3のプロパティも使えません(*2)。
しかも、仕様では定義されているCSSプロパティであっても、すべての電子書籍リーダーで期待通りに表示される保証はありません。閲覧環境によって表示結果に違いがあるのはWebの世界では当然のことですが、印刷／DTP関係の方は納得がいかない点だと思います。制作者側で意図したレイアウトや書体を厳密に再現したい場合は、EPUBではなくPDFを選択するのが妥当でしょう。
なお、iPadのiBooksは描画エンジンにWebKitを使用しているようです。iBooksをターゲットとしたEPUBデータを作成したい場合は、Mac OS XやWindows用のSafariで表示結果を確認しながら進めるのも手です。
400
作成したEPUBをiBooksで表示した結果。iBooksの場合、設定したCSSはかなり期待通りに反映される。コード部分のフォントにはCourierを指定
*2 iPadのiBooks限定であればCSSを駆使することでルビや縦書きも一応は再現できます
