絳アト日記: ePub 2.0 ことはじめ (7) スタイルの追加

の続きです。

ePub 2.0 ことはじめ (3) と (6) で構造化テキストの作成ができる様になりました。本章では、構造化したテキストにスタイルを追加して見栄えを良くする方法を説明します。

スタイルは CSS 2.1 で設定します。

最初に、スタイルの適用前と適用後の違いをお見せします。

今回はシンプルに、p 要素で出来る「空行」をなくすスタイルを適用してみます。

スタイル適用前は上のスクリーン・ショットの様に空行が空いています。スタイル適用後は、下のスクリーン・ショットの様に空行がなくなります。

ちょっと見た目が悪いですかね? text-indent なども設定すると良いと思います。今回は、一番シンプルで分かり易いサンプルということで、勘弁して下さい。

スタイル・シート「style.css」を OEBPS ディレクトリーの中に置きます。style.css の中身は下記の通りです (サンプルなので、かなり大雑把です m(_ _)m):

p {
  margin: 0;
}

CSS ファイルを使う全ての XHTML ファイルから、style.css へのリンクを張ります。

XHTML の head 要素に次の link 要素を追記します。

<link rel="stylesheet" href="style.css"/>

最後に、ePub ドキュメントに style.css を認識させる作業が必要です。

content.opf ファイルの manifest 要素にスタイル・シートの item を追記します。次の様になるでしょう。


 <manifest>
   <item id="ncx" href="toc.ncx" media-type="text/xml" />
   <item id="style" href="style.css" media-type="text/css" />
   ...

以上で、スタイル・シートの追加作業はおわりです。CSS の参考書を頼りに、読み易いスタイルを作成しましょう。

絳アト日記