電子書籍(EPUB)の制作:画像への回り込み解除するためのCAS-UBの指定方法

昨日は、画像を左右に寄せてテキストを回り込みさせるためのCAS-UBの指定方法を説明しました([1])。今日は回り込みを解除する方法を説明します。

画像にテキストの回り込み(フロート)を指定すると、後続のテキスト・見出し・画像などの要素があるとき、それらの要素も回り込みしてしまいます(図1)。

20141002
図1 画像に回り込みを指定すると後続の要素も回り込む

後続の要素の回り込みを解除するには、CSSでクリア(clear)プロパティを指定します。CAS-UBのCSSテーマではクリアを指定する方法が規定されていません。そこで、解除を設定したい要素に自分でクリアを設定します。

直接的な方法として、CSSを書いてしまうことができます。例えば、次の見出しでフロートを解除したいとき、その見出しにクリアを設定するには次のようにします。


...転換するのに最適なツールです。

==:style=clear~:both 見出し

360ピクセル×360ピクセルの正方形画像を右フロート

解説
CAS-UBでは、マークアップ(’==’はランク2の見出し(h2)のマークアップ)の直後に、次のように記述すると
:X=a
Xが属性名、aが属性の値と解釈しますので、HTMLでは<要素 x="a">となります。続けて’:’があると属性の始まりと解釈しますので’^:’のように前に’^’を置いて、’:’の役割を適用しないように(エスケープ)します。

上の例では、見出しの部分のHTMLコードは次になります。


<h2 style="clear:both"> 見出し</h2>

プレビュー(内容)表示で確認しますと、見出しの回り込みが解除されています(図2)

20141002a
図2 見出しで回り込みを解除

見出しに直接スタイルを指定するのではなく、(1)見出しにクラス属性(:clear)を設定し、(2)クリアクラス属性にクリアプロパティを指定するユーザー指定スタイルシート(style.css)ファイルを用意する方法もあります。


...転換するのに最適なツールです。

==:clear 見出し

360ピクセル×360ピクセルの正方形画像を右フロート

style.cssに次のようなCSSプロパティを指定します。


.clear {
clear:both;
}

[1] 電子書籍(EPUB)で、テキストを画像に回り込みさせるためのCAS-UBの指定方法