昨日は、画像を左右に寄せてテキストを回り込みさせるためのCAS-UBの指定方法を説明しました([1])。今日は回り込みを解除する方法を説明します。
画像にテキストの回り込み(フロート)を指定すると、後続のテキスト・見出し・画像などの要素があるとき、それらの要素も回り込みしてしまいます(図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)
見出しに直接スタイルを指定するのではなく、(1)見出しにクラス属性(:clear)を設定し、(2)クリアクラス属性にクリアプロパティを指定するユーザー指定スタイルシート(style.css)ファイルを用意する方法もあります。
...転換するのに最適なツールです。
==:clear 見出し
360ピクセル×360ピクセルの正方形画像を右フロート
style.cssに次のようなCSSプロパティを指定します。
.clear {
clear:both;
}