【美ePub作成】iBooks（iPad・iPhone）用の本を作る場合、幅を全て横書き幅（400pixel）を意識し、合わせよう

iPad・iPhone用の本を書く際、
注意しておきたいのが画像と表の配置です。
これによって文字が変な場所に飛んだりもするので、
どのように見えるかきちんと理解しておきましょう。

※ePubに関する全体の目次はコチラ 

■例が長いので、先に結論

今回、色々例を使っているのでちょっと長いです。
そのため、画像や表を配置する際、気をつけるポイントを先に述べます。

• 描画領域
  • iPad
    • 縦表示：760×560
    • 横表示：540×400（を2ページ表示）
  • iPhone
    • 縦表示：おおよそ360×250
    • 横表示：おおよそ410×200（横長1ページ）
• 縦・横表示による影響
  • 縦・横を変えても文字の大きさは変わらない
  • 縦または横の大きさを超える画像を表示した場合、縦横比を変えずに画像を縮小表示する
    ※但し、iPhoneに限り、画像に対して文字が回り込むよう設定している＆画像の高さがオーバーしている場合、表示できない範囲を次ページに表示する。
  • 画像（imgタグ）のheight・widthは画像には反映されないが、使わないほうが無難。
    ※文字の回りこみに影響する（しかも悪い方向に）ため。
  • 表は横幅を超えても縮小されない。横表示にした場合にきれいに表示されるよう、表の横幅は最大400pxとすべき。
    ※高さを超えた場合は次ページに表示される。
    ※iPhoneの縦表示の場合は表が横に切れてしまうが、そもそも幅が狭いので諦める。
• ポイント
  • 画像・表は幅を400px以下にしておきましょう。
  • 画像に限ってはある程度縮小してくれるので、そんなに気を使わなくて良いです。
  • 画像に対して文字を回り込みさせると、iPhoneで表示させるときに結構読みづらくなります。

■iPadで表示する場合の高さ・幅を知る

他の方のブログより拝借した画像で大変申し訳ないのですが、
大変いいものがあるので、こちらを使わせていただきます。
（もらった元を忘れてしまいました・・・）

先に結論を申し上げると、ポイントは以下となります。

• iBooksを縦表示した場合、描画領域は760×560
• iBooksを横表示した場合、描画領域は540×400（を2ページ表示）
• 縦・横を変えても文字の大きさは変わらない
• 縦または横の大きさを超える画像を表示した場合、縦横比を変えずに画像を縮小表示する
• 表の横幅がiBooksの幅を超えても縮小されない。横表示にした場合にきれいに表示されるよう、表の横幅は最大400pxとすべき。高さを超えた場合は次ページに表示される。

▼iBooksを縦表示した場合の幅（iPad）

▼iBooksを横表示した場合の幅（iPad）

 

■iPhoneで表示する場合の高さ・幅を知る

先に結論を申し上げると、ポイントは以下となります。

• iBooksを縦表示した場合、描画領域はおおよそ360×250
• iBooksを横表示した場合、描画領域はおおよそ410×200（横長1ページ）
• 表は横幅を超えても縮小されないのはiPadと同じ。横表示にされた場合にきれいに表示されるよう、表の横幅は最大400pxとすべき。縦表示にされたときは、幅が狭いので切れるのを覚悟しておく。

▼iBooksを縦表示した場合の幅（iPhone）

下図の右の画面は、横408pxの表を表示したものですが、横幅を超えている範囲は表示されておりません。
切れてしまった内容はスクロール等で表示されることも無く、
次ページにも表示されないので、一切閲覧することが出来ません。
（これはiPadの場合も同じ）

 

▼iBooksを横表示した場合の幅（iPhone）

iPhoneでiBooksを横表示すると、iPadの場合と異なり、1ページを横幅を広げて表示する形になります。
そのため、表の表示には強くなるのですが、画像は結構縮小されます。
文字は多く表示される気がするので、個人的にはコチラの方が読みやすいです。

なお、iPhoneの横表示の特徴として、「画像に対して文字が回りこむよう設定している＆画像の高さが200px以上」の場合、画像が途中で切れ、残りが次ページに表示されるようになります。