まゆたまガジェット開発逆引き辞典

電子工作やプログラミングのHowtoを逆引き形式で掲載しています。作りたいモノを決めて学んでいくスタイル。プログラマではないので、コードの汚さはお許しを

ePubはXHTML+CSSを書いたほうがいい?

所用で電子書籍関係にタッチすることになって、いろいろと試してみました。
結論から言うと、現段階ではInDesignやPagesを使うより、Dreamweaver等でXHTML+CSSを書いていったほうがいいと思います。
以下の条件でどれかひとつ選べと言われたら、InDesignで見出し用・本文用段落スタイルを設定して(ただしスタイル名は必ず英語で)sigil等の電子書籍用エディタでCSSを編集するのがいちばんいいのかもしれません。

ただePub書き出しに関してCS5以降改善されているというお話もありますから、今後に期待ですね。

ePubで文字組みがどこまで反映されるのか試しに以下の条件でやってみました。
できることは限られていますが実際どうなるか見てみたかったので、これはできるこれはできないと考えずやってみました。
比較のために1からデザインする時間の余裕がなかったので、以前印刷所に入稿したIllustratorデータをもとにInDesignとPagesでレイアウトしました。
こんな感じの冊子でした。

●InDesignCS3(5.0.4)
1.表を使いまくってできるだけ紙に近いレイアウトにする。文字スタイルはコントロールパネルで設定
レイアウト


結果(CSS修正前)  

考察:
スタイル・表ともに完全に無視。なぜか英語と日本語が逆になるという現象が発生。


2.段落スタイル・文字スタイルを使用して目次も生成
結果(CSS修正前)

考察:
目次用段落スタイルを適用したタイトル→文字の大きさと色のみ反映、フォントは無視。
本文用段落スタイルを適用した本文→文字の大きさと行間は反映している気がする。フォント・フレームグリッドの位置は無視。たぶん文字スタイルは反映されてない。


3.目次になる本文タイトルのみ段落スタイルを使用、後はグリッドで自由に配置。文字スタイルはコントロールパネルで設定
結果(CSS修正前) 

考察:
目次用段落スタイルを適用したタイトル→文字の大きさと色のみ反映、フォントは無視。
文字スタイルを適用した本文→完全に無視

●Pages4.0.4
1.目次にしたいところに段落スタイルを適用するのみで後は普段のPagesと同じ(ただし画像はインラインで)
結果(CSS修正前) 

考察:
目次用に見出しタイトルをつけたところは文字の大きさと色のみ反映、見出しのフォントはたぶん無視されてる(ような気がする)。本文のフォント設定は完全無視。なぜか無駄に改行が多く入っている。行間も無視されてるかも。写真が中央寄せっぽくなってるのはワザとです。中央寄せにしたりとかは反映されるみたい。