表に並ぶ文字の位置を指定する


float: ***;

ブラウザ
Internet Explorer Netscape6 Firefox Opera
参考
書式基本 要素名 クラス ID

float は、回り込みを指定するプロパティです。

表を左か右に寄せて、逆側にテキストなどを回り込ませることができます。


#example {
float: left;
}


float left … (表を左に配置・テキストなどを右側に回り込ませます)
right … (表を右に配置・テキストなどを左側に回り込ませます)
none … (指定なし)デフォルト

回り込みを終了させるための clear プロパティもご覧ください。

【IEの不具合】

背景色(または背景画像)が指定された要素内で回り込みの指定を行うと、回り込ませたテキストの一部が消えたり、背景色の一部が反映されなかったり、といった不具合が発生する場合があります。(親要素に対してサイズの指定(width)を行っておくと、この不具合を回避することができます。)


使用例

テキストの回り込み

<html>
<head>
<title>TAG index Webサイト</title>

<style type="text/css">
<!--

#exampleA {
width: 100%;
}

table, td {
border: 2px #2b2b2b solid;
}
table {
width: 200px;
}


#example1 {
float: left;
}
#example2 {
float: right;
}


-->
</style>

</head>
<body>

<div id="exampleA">

<table id="example1">
<tr>
<td>HP作成A</td>
<td>HP作成B</td>
</tr>
<tr>
<td>HP作成C</td>
<td>HP作成D</td>
</tr>
<tr>
<td>HP作成E</td>
<td>HP作成F</td>
</tr>
</table>

<p>
表の右側に<br>
複数行のテキストを<br>
表示してみます
</p>

<p style="clear: left;">--- 回り込みを解除 ---</p>

<table id="example2">
<tr>
<td>HP作成A</td>
<td>HP作成B</td>
</tr>
<tr>
<td>HP作成C</td>
<td>HP作成D</td>
</tr>
<tr>
<td>HP作成E</td>
<td>HP作成F</td>
</tr>
</table>

<p>
表の左側に<br>
複数行のテキストを<br>
表示してみます
</p>

<p style="clear: right;">--- 回り込みを解除 ---</p>

</div>

</body>
</html>

これをブラウザで見ると次のように表示されます

HP作成A HP作成B
HP作成C HP作成D
HP作成E HP作成F

表の右側に
複数行のテキストを
表示してみます

--- 回り込みを解除 ---

HP作成A HP作成B
HP作成C HP作成D
HP作成E HP作成F

表の左側に
複数行のテキストを
表示してみます

--- 回り込みを解除 ---


表を横に並べる

<html>
<head>
<title>TAG index Webサイト</title>

<style type="text/css">
<!--

#exampleB {
width: 450px;
}

table, td {
border: 2px #2b2b2b solid;
}


#exampleB table {
width: 200px;
margin-right: 20px;

float: left;
}


-->
</style>

</head>
<body>

<div id="exampleB">

<table>
<tr>
<td>HP作成A</td>
<td>HP作成B</td>
</tr>
<tr>
<td>HP作成C</td>
<td>HP作成D</td>
</tr>
<tr>
<td>HP作成E</td>
<td>HP作成F</td>
</tr>
</table>

<table>
<tr>
<td>HP作成G</td>
<td>HP作成H</td>
</tr>
<tr>
<td>HP作成I</td>
<td>HP作成J</td>
</tr>
<tr>
<td>HP作成K</td>
<td>HP作成L</td>
</tr>
</table>

<p style="clear: both;">表を並べてみました</p>

</div>

</body>
</html>

これをブラウザで見ると次のように表示されます

HP作成A HP作成B
HP作成C HP作成D
HP作成E HP作成F
HP作成G HP作成H
HP作成I HP作成J
HP作成K HP作成L

表を並べてみました



[特集] レンタルサーバー比較 & サーバー選びのチェックポイント
[統計] HTMLからXHTMLへの移行を進めていますか?