<<PREV | TOP | NEXT>>

要素の浮動化とテキストの周り込み

last modified 10th/Oct. 2000

  1. 画像要素
  2. IMG 要素の基本
    1. 代替テキストの指定 - alt 属性と title 属性の利用
    2. 画像をより軽快に - フォーマットなど
  3. 画像の垂直方向の表示位置
  4. 浮動化と後続テキストの周りこみ
  5. 周囲に空白を挿入
  6. 周囲にボーダーを表示

オブジェクト、画像フレームなどの align 属性は、それらを左または右端に浮動させます。可能な値は次の2つ;

例えば、表を表す TABLE 要素に対しては、 center も指定できますが、この時浮動化は起こらず、左右のマージンの間の空間が計算されて、その中央に表示されます。

align 属性は、段落を表す P 要素と、ブロック要素のグループ化要素である DIV 要素に対しても定義されていますが、この場合は要素の浮動化は起こらず、当該要素の内容が中央に揃えられます。

浮動化の例

<img align="left" src="http://foo.com/animage.gif" alt="わたしのボート">

この画像は左端に浮動化され、後続するテキストは右脇に流れ込みます。

表示例;

leonardo da vinci (1452-1519); the mona lisa (1479 - d. before 1550) 画像の貼り付けの例として、ダビンチのモナリザを文章中に置いてみる。

これは align="left" を指定した画像です。画像が左側に寄せられ、後続する要素は右側に流れ込みます。新しい要素や改行があっても、新しい行は画像の横から新たに始まります。
 

align 属性自身が廃止予定の非推奨属性ですから、出来るだけスタイルシートで実現しましょう。

流れ込みの禁止 - BR 要素

浮動化されたオブジェクトの脇にテキストが流れ込むのを禁止したい場合は、 BR 要素に定義された clear 属性を用います;

<p>
<img src="../back.jpg" float="left">
左端にフロートした要素に対して後続するテキストは、
フロート要素の右脇に流れ込みます。<br clear="left">
clear 属性をもつ BR 要素を利用すると、流れ込みが禁止できます。
</p>

clear 属性align 属性と同じく廃止予定の非推奨属性です。

clear = none|left|right|all [CI]

BR 要素は %Special に属するインライン要素です。

利用例;

Leonardo da Vinci (1452-1519); The Mona Lisa (1479 - d. before 1550) 浮動化の例として、ダビンチのモナリザを文章中に挿入してみる。

これは align="left" を指定した画像です。画像が左側に寄せられ、後続する要素は右側に流れ込みます。新しい要素や改行があっても、新しい行は画像の横から新たに始まります。


align="right" を与えた表
ここは表要素です。
align="right" が与えられています。
右端に浮動化される筈です。
後続する要素は左脇に流れ込みます。
途中で画像の下端の、次の行から新たにテキスト行を始めたい場合は、周り込みを解消したい位置に <br clear="left"> を記述します。 これで、浮動化した要素に後続する要素は、要素の下端、次の行から新たに始まります。
浮動化され右側に寄せられた要素に対して後続する要素の周り込みを解消したい場合は、 clear="right" です。

ここでは、「モナリザ」に与えたalign="left"のために、画像が浮動化して左端に寄せられ、後続するテキストが、右側に流れたので、流れ込みを終了させる目的で<br clear="left">を書きました。

TABLE 要素のalign="right"に対しては、<BR clear="right">によって周りこみが解消します。

BR 要素の clear 属性と、IMG 要素や TABLE 要素などの align 属性は旧版の HTML との下位互換のために用意されたものの、廃止予定の非推奨属性です。できるだけスタイルシートで実現するように御奨めします。

次に、 CSS の 'float' プロパティによる要素の不動化と、 'clear' プロパティによる周り込みの中止に付いて紹介します。

<<PREV | TOP | NEXT>>

SEO [PR] [ Windows7 f ^T[o[ Cu`bg SEO