電子書籍づくり実践（EPUBの構造 xhtmlとcss）
このブログでは、前々回のエントリまで数回に渡り
- 文章にタグ付けをし
- 用意したEPUBテンプレートにコピペし
- その内容をブラウザで表示確認をする
という作業をして来ました。
今回はそこで使った「テンプレート」を通して、EPUBの構造を学んでおきましょう。「構造」などというと難しく聞こえますが、押さえておくのは下記の点だけです。
.epubとは
- 必要なファイル類を
- 定められたフォルダ構成に従って配置し、
- 圧縮したもの。
以上です。
その構造を絵的に表すと下記の通りになります。
テンプレートとして、既にこの構造になっているデータ*1があるわけですから、特にこの構造を覚えるたりとか、イチから自分で作ったりする必要もありません。現時点で押さえておきたいのは
- テンプレートのどこに手を入れる必要があるか？
- その部分はどんな働きをしているのか？
という点だけです。
それではEPUBを構成する「中身」を見ていきましょう。
ここからは書かれる文字を追うだけでなく、前々回使ったテンプレートを開いて、内容を対比させながら読み進めると理解しやすいと思います。
xhtmlファイルは「本の中身」（xhtmlフォルダ）
電子書籍づくりで一番たくさんの手を入れるのが、xhtmlフォルダの「ページファイル（拡張子.xhtml）」です。
このファイルに、電子書籍で表示させたい内容を書き込みます。書き込むルールはhtmlが進化したxhtmlという記述言語です。*2
cssで「見た目」をコントロールする（styleフォルダ）
xhtmlフォルダと同じ階層に「style」という名前のフォルダあります。
このフォルダには、拡張子が「.css」となっているファイルが複数入っています。「css」とは、フォルダ名の通り、「スタイル」をコントロールするためのファイルです。といっても「？」だと思うので、それでは実際に「コントロール」してみましょう。
スタイルをコントロール「する側」の記述
前々回に使用した「book-template - コピー」フォルダを用意してください。その中にある「styleフォルダ」を開き、その中の「book-style.css」をエディタで開きます。開いたら「tobira-midashi」で検索を掛けます。
そうすると該当箇所として下記が表示されます。
ここに下記の内容を追記します。
.vrtl .tobira-midashi {
と
}
の間に
font-size:3em;
.vrtl .oo-midashi {
と
}
の間に
font-size:2em;
このようになります。
問題なければ上書き保存してください。
それでは、いま記述した内容が何なのか説明します。
font-size
とは読んで字の通り「文字（フォント）のサイズ」を指定しています。
em
とは文字サイズの単位で、基本サイズを「1em」とし、数値が大きくなるほど文字サイズも大きくなります。
上のように記述することにより
- スタイル名*3
- tobira-midashi
- 指示内容
- 文字サイズを3emに
- スタイル名
- oo-midashi
- 指示内容
- 文字サイズを2emに
というスタイルが、CSSのファイルに登録されたことになります。
次にこのスタイルの指示を「受ける側」の設定をします。
今回は
- 「tobira-midashi」のスタイルを反映させるのはh1の文章
- 「oo-midashi」のスタイルを反映させるのはh2の文章
とします。
スタイルをコントロール「される側」の記述
xhtmlフォルダ内の「p-002.xhtml」をエディタで開き、下記の検索置換を2回に分けて掛けます。
- 検索
- <h1>
- 置換
- <h1 class="tobira-midashi">
- 検索
- <h2>
- 置換
- <h2 class="oo-midashi">
下のようになればOKです。
問題なければ上書き保存してください。
cssに記述したスタイルを反映させるには、上のように反映したい箇所の開始タグに「class="スタイル名"」と記述をします。
それでは文字サイズの指定がされた「p-002.xhtmlの見出し（h1、h2）」がどのように見えるか確認してみましょう。
p-002.xhtmをブラウザで開きます。
見出しの文字サイズが大きくなっていることが確認できます。またh1、h2でそのサイズが異なっている（h1のほうがh2より大きい）のも確認できます。
これが「CSSに登録されたスタイルが、xhtml側のしかるべき場所（今回の場合h1とh2）に反映させた状態」です。
CSSについての知識
今回、話しの中心となった「CSS」ですが、説明としてはこれから電子書籍をつくり進めるうえで、必要最低限の内容になっています。
こちらもHTML同様、知識の積み増しをした方がより楽しく電子書籍を制作することができますし、またweb制作にも深く関係している技術なので、そちらの知識習得も兼ねて学び進めるのも良いと思います。
初心者向けの解説サイトとしては
やさしいホームページ入門：CSS入門
http://www.ink.or.jp/~bigblock/css/index.html
が解りやすくておすすめです。
また「CSS 入門」などのキーワードでGoogle検索して、自分に合った学習サイトを探してみるのも良いかもしれません。
そうしてCSSへの理解を深められたら、現在使っているEPUBテンプレートと一緒にダウンロードしたデータの中にある「CSS機能一覧.pdf」に目を通してみてください。これはテンプレート内で「既に設定されているスタイルの一覧」で、今後電子書籍づくりを進める際にとても役に立ちます。
今日のまとめ
EPUBの構造。今回は
の役割について説明しました。
その関係性は
となります。
次回は
電子書籍づくり実践（EPUBの構造 目次を作る１）についてお話します。
*1:日本電子書籍出版社協会電書協EPUB 3 制作ガイド。下記よりダウンロードできます。http://www.ebpaj.jp/guide.html
その中にある「book-template.epub」というファイルの拡張子を.zipに変更し、解凍すると上図の構造を持ったフォルダが作られます
*2:ここでhtmlとxhtmlの違いは意識しなくてもOKです。同じようなものと理解しておいてください。
*3:この部分を正式には「class名」といいます
