このページの本文へ

チュートリアルで学ぶ電子書籍制作の4つの方法 (3/5)

2010年08月23日 10時00分更新

文●古籏一浩

  • この記事をはてなブックマークに追加
本文印刷

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を駆使することでルビや縦書きも一応は再現できます

この連載の記事

一覧へ
Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く