<<PREV | TOP | NEXT>>

'float' プロパティと 'clear' プロパティ

last modified 10th/Oct. 2000

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

要素の浮動化は CSS によってより柔軟に指定できます。

STYLE 要素での宣言;

<head>
<title>vertical-align の例</title>
<meta http-equiv="content-style-type" content="text/css">
<style type="text/css">
<!--
img { float: left }
p { clear: left }
-->
</style>
</head>

この例では、当該文書中に現れる全ての IMG 要素が左端にフロートするように指定されています。

且つ、当該文書中に現れる全ての P 要素が左側のフロート要素に対して、流れ込むことを禁止されています。

ここは段落要素の内容部です。 Leonardo da Vinci (1452-1519); The Mona Lisa (1479 - d. before 1550) この文書中に挿入された画像は全て左端にフロートします。従って、普通に書いているだけで、後続の要素やテキストは画像の右側に周り込もうとします。この段落要素にもスタイル宣言 clear:left が適用されていることに注意してください。

しかし、段落要素は左端のフロート要素に対して、周りこみが禁じられているので、段落が改まると、フロート要素の下端から新たに行を始めます。

clear プロパティは、先行する浮動要素に対するものであり、子孫要素に浮動要素を持っていても、何も影響しません。

CSS の 'float' プロパティと 'clear' プロパティの概要です;

floatleft | right | none | inherit

'position' プロパティで absolute | fixed が指定されていない要素に限り、あらゆる要素に指定できます。

例えば、 position: absolute が指定されていると、 float プロパティは無視されます。

浮動化されたボックスの四方のマージンは、隣接する如何なるボックスとも相殺せず、隣接するマージンの値は単純に加算されます。

clearnone | left | right | both | inherit

clear プロパティは、ボックスの右側か左側(或は両方)が、先行する浮動化された要素に対して隣接してはならないかどうかを指定します。先行する要素に対してだけ有効で、子要素に浮動化された要素があっても、この要素に対しては何も影響しません。

ここでは CSS プロパティが値に取り得るキワードの意味に付いては説明しません。詳しくは、「CSS 入門」を参照ください。

或る一つの要素だけにスタイルを適用したい場合は、 id 属性を利用するか、 style 属性によるインラインスタイルを利用します。

インラインスタイルの例

<p style="clear:left">
この要素は左側のフロート要素の直下のから新たに行を始めます。
</p>

或る一つの要素だけを浮動化したい場合も、同様に id 属性かインラインスタイルを利用します。今度は id 属性を利用します;

HEAD 要素の中

<title>vertical-align の例</title>
<meta http-equiv="content-style-type" content="text/css">
<style type="text/css">
<!--
p#hogehoge { float: left; width: 40% }
-->
</style>

BODY 要素の中

<p id="hogehoge">
この要素は左端にフロートします。
</p>

<<PREV | TOP | NEXT>>

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