2009年6月16日火曜日

回り込み

HTMLでは、画像をテキストの左側に回り込ませたい場合、「align=”left”」を使ったり、画像とテキストの間隔はhspace(左右の余白)、vspace(上下の余白)で指定したりしました。
しかしXHTMLではこれらはすべて非推奨属性であるので、「float」「margin」を使いCSSのimg要素に対して定義をおこないます。

img{
float: left;
margin-right: 30px;
margin-bottom: 20px;
}

floatプロパティを使ったあとで回り込みを解除するには、clearプロパティを用います。
XHTML側で、次のように記述します。「あいうえお」行から回り込みが解除されます。

<p class=”clearfloat”>あいうえお</p>


対して、CSS側では次のように指定します。

p.clearfloat {
clear: left;
}

なお、画像ではなくテキストを回り込みの対象とするとclearプロパティでは解除できません。

HTML要素のalign属性、hspace属性、vspace属性は、凝ったデザインになるほどファイルサイズが肥大化していきます。
CSSを用いれば、デザインはすべてCSSで管理できるので、XHTMLソースはシンプルになります。

このようにCSSのデザインの作業は、情報の表示順序を決めるリニアライズ(線形化)から始まり、情報をfloatプロパティで並べ替えたりして段組みをおこない、そのあと見栄えを整えていくことになります。
段組みプロパティは、現行のCSS2には用意されておらず、CSS3に含まれることになっています。