lHTML スタイル 浮動領域 '98. 4. 7

l.お知らせ 内容 LINK FILE   HTML Win PC Unix MS-DOS C C++ Mfc Java 
.全般_ .スタイル .名前. _一覧_
 備考  スタイル  文字 ( 配置 )  縁取り枠  領域  浮動域  座標  シート    
浮動配置   文字の大きさ 

浮動配置 FLOAT
文字など、他の何かを基準にして(浮動的に) 配置します。
他の何かを基準に浮動配置する領域は、浮動領域と呼ぶことにします。

内側余白 PADDING、外側余白 MARGIN は有効です。
ただし 負の外側余白は、
 Netscape=縦方向のみ。IExplore=横方向のみ。
 ネストされている内側では、親の領域を越えることはできません。


LEFT . . . 他の何かの、左側に配置します。(この例では AA BB の左側。)
<SPAN STYLE="BACKGROUND:F0FFF0; WIDTH:200PX; FLOAT:LEFT;">
aa<BR>bb<BR>cc<BR><dd<BR></SPAN>
AA<BR>BB<BR CLEAR=LEFT>
次の内容。
aa
bb
cc
dd
AA
BB



次の内容。

<SPAN>〜</SPAN>の後の、<BR CLEAR=LEFT>までの内容位置を基準にします。
基準に使われる内容は、浮動領域の右側に、移動配置されます。
<BR CLEAR=LEFT>は、<BR CLEAR=ALL>と書くこともできます。
これを書かないと、次の内容は、浮動領域の右側に表示されます。

基準の範囲を限定するには、CLEAR:LEFT; というスタイルもあります。
しかし、IExplore と Netscape では、その働きが違います。
IExplore : 空の領域では指定しても無効です。
Netscape : FLOAT:LEFT; などといっしょに書くと無効です。
<BR CLEAR=ALL>と書くのが 簡単で確実です。


RIGHT . . . 他の何かの、右側に配置します。(この例では AA BB の右側。)
<SPAN STYLE="BACKGROUND:E0FFE0; WIDTH:300PX; FLOAT:RIGHT;">
aa<BR>bb<BR>cc<BR>dd<BR></SPAN>
AA<BR>BB<BR CLEAR=RIGHT>
次の内容。
aa
bb
cc
dd
AA
BB
次の内容。

<BR CLEAR=RIGHT>は、<BR CLEAR=ALL>と書くこともできます。


LEFT & RIGHT . . . 他の何かの、左右に配置します。(この例では AA BB の左右。)
<SPAN STYLE="BACKGROUND:C0FFC0; WIDTH:200PX; FLOAT:LEFT;">
aa<BR>bb<BR>cc<BR>dd<BR></SPAN>
<SPAN STYLE="BACKGROUND:C0FFC0; WIDTH:200PX; FLOAT:RIGHT;">
ee<BR>ff<BR>gg<BR>hh<BR></SPAN>
AA<BR>BB<BR CLEAR=ALL>
aa
bb
cc
dd
ee
ff
gg
hh
AA
BB



LEFT & LEFT . . . 他の何かの左側に、続けて配置します。(この例では AA BB の左側。)
<SPAN STYLE="BACKGROUND:D0FFC0; WIDTH:200PX; FLOAT:LEFT;">
aa<BR>bb<BR>cc<BR></SPAN>
<SPAN STYLE="BACKGROUND:B0F0B0; WIDTH:200PX; FLOAT:LEFT;">
ee<BR>ff<BR>gg<BR>hh<BR></SPAN>
AA<BR>BB<BR CLEAR=ALL>
aa
bb
cc
ee
ff
gg
hh
AA
BB



NONE . . . 浮動配置しません。
<SPAN STYLE="BACKGROUND-COLOR:FFFF00; WIDTH:100PX; FLOAT:NONE;">
aa<BR>bb<BR>cc<BR></SPAN>
AA<BR>
そのまま
aa
bb
cc
AA
IExplore
aa
bb
cc
 
 
AA
Netscape
aa
bb
cc
AA
Netscape では、NONE の指定では背景色が無効になる場合があります。
( 上記は表の中に表示しているので、実際には背景色を十進数指定しています。)
なお、右の二つは擬似表現されています。


CENTER または MIDDLE ( Netscape のみ。)
左右の中央に配置します。  . . . 用例は省略します。



ネストの例 (1)
<!--左側--> <SPAN STYLE="BORDER-STYLE:SOLID; BORDER-WIDTH:1PX; BACKGROUND:F0F0FF; WIDTH:180PX; FLOAT:LEFT;"> <SPAN STYLE="BACKGROUND:A0A0FF; WIDTH:40PX; FLOAT:LEFT;"> 左<BR>の<BR>1<BR></SPAN> <SPAN STYLE="BACKGROUND:B0B0FF; WIDTH:40PX; FLOAT:LEFT;"> 左<BR>の<BR>2<BR></SPAN> <SPAN STYLE="BACKGROUND:D0D0FF; WIDTH:40PX; FLOAT:RIGHT;"> 左<BR>の<BR>3<BR></SPAN> 左側<BR> </SPAN> <!--右側--> <SPAN STYLE="BORDER-STYLE:SOLID; BORDER-WIDTH:1PX; BACKGROUND:FFF0F0; WIDTH:180PX; FLOAT:RIGHT;"> <SPAN STYLE="BACKGROUND:FFD0D0; WIDTH:40PX; FLOAT:LEFT;"> 右<BR>の<BR>1左<BR></SPAN> <SPAN STYLE="BACKGROUND:FFB0B0; WIDTH:40PX; FLOAT:RIGHT;"> 右<BR>の<BR>2右<BR></SPAN> <SPAN STYLE="BACKGROUND:FFA0A0; WIDTH:40PX; FLOAT:RIGHT;"> 右<BR>の<BR>3右<BR></SPAN> 右側<BR></SPAN> <!--左の続き--> <SPAN STYLE="BACKGROUND:F0FFF0; WIDTH:110PX; FLOAT:LEFT;">左の続き<BR> <SPAN STYLE="BORDER-STYLE:SOLID; BORDER-WIDTH:1PX; BACKGROUND:A0FFB0; WIDTH:50PX; FLOAT:LEFT;"> 中の<BR>1<BR></SPAN> <SPAN STYLE="BORDER-STYLE:SOLID; BORDER-WIDTH:1PX; BACKGROUND:B0FFA0; WIDTH:50PX; FLOAT:LEFT;"> 中の<BR>2<BR></SPAN></SPAN> <BR CLEAR=ALL>


 1


 2


 3
左側
 右
 の
1左
 右
 の
2右
 右
 の
3右
右側
左の続き
中の
 1
中の
 2






ネストの例 (2)
<!--左側--> <SPAN STYLE="BACKGROUND:F8F0C8; WIDTH:110PX; FLOAT:LEFT;">左側<BR> <SPAN STYLE="Z-INDEX:1; BACKGROUND:E8E0B8; WIDTH:50PX; FLOAT:LEFT;">左<BR>の<BR>1<BR></SPAN> <SPAN STYLE="Z-INDEX:2; BACKGROUND:E4CCA0; WIDTH:50PX; FLOAT:LEFT; MARGIN-TOP:10PX; MARGIN-LEFT:-20PX;">左<BR>の<BR>2<BR></SPAN><BR CLEAR=LEFT> 左の終り。 </SPAN> <!--左の続き--> <SPAN STYLE="BACKGROUND:FFE090; WIDTH:120PX; FLOAT:LEFT; MARGIN-LEFT:20PX;">左の続き<BR> <SPAN STYLE="WIDTH:10PX; FLOAT:LEFT;"> </SPAN> <SPAN STYLE="BACKGROUND:F0D080; WIDTH:100PX; FLOAT:LEFT;">続きの中<BR></SPAN><BR CLEAR=LEFT> 続きの終り。 </SPAN> <!--右側--> <SPAN STYLE="BACKGROUND:F8F0C8; WIDTH:110PX; FLOAT:RIGHT;">右側<BR> <DIV STYLE="BACKGROUND:E8E0B8; WIDTH:100PX; FLOAT:TOP;">右の1<BR></DIV> <DIV STYLE="BACKGROUND:E6D8AC; WIDTH:100PX; FLOAT:MIDDLE;">右の2<BR></DIV> <DIV STYLE="BACKGROUND:E4CCA0; WIDTH:100PX; FLOAT:BOTTOM;">右の3<BR></DIV> </SPAN> <!--基準--> 浮動表示の<BR>後の内容。<BR CLEAR=ALL>
左側


 1


 2

左の終り。
左の続き
  続きの中

続きの終り。
右側
右の1
右の2
右の3
浮動表示の
後の内容。


メモ : Netscape では、[左の2]より [左の1]が上に表示されます。
  IExplore では、後に書かれた [左の2]が上に表示されます。
  浮動配置の場合には、重ね順を変更できません。( と思います。)



文字の大きさ
上記の例はすべて、文字の大きさを指定するコードを省略しています。

Netscape では、文字の大きさは 浮動配置のスタイルとは別に指定します
なお、Netscape では、BODY で指定したスタイルは、
 浮動領域の中および表の中には届きません。
 浮動領域の中と表の中は、ブラウザのデフォルトのスタイルになるようです。
<SPAN STYLE="BACKGROUND:F0FFF0; WIDTH:200PX; FLOAT:LEFT;">
<FONT FACE="MS Pゴシック"
   STYLE="FONT-SIZE:20PX; COLOR:RED; LINE-HEIGHT:110%;">
浮動領域の中
</FONT>
</SPAN>
浮動領域の外<BR CLEAR=LEFT>
浮動領域の中
浮動領域の外


高さについて
IExplore  LINE-HEIGHT: で行間を指定します。(文字の高さ)
 枠の縦幅は、枠の外側で指定した文字の高さによって決められます。
 HEIGHT(縦幅) を指定できますが、文字の配置は 枠外側の文字の大きさが基準です。
 上記のように LINE-HEIGHT(行間) を設定すれば正しく配置できます。
Netscape  枠の縦幅は、特に行間を指定しなくても、中の文字の高さになります。
 HEIGHT(縦幅) は書いても無効です。必要なら、PADDING: で余白を作ります。



T

  mtoga@sannet.ne.jp   登録日 '96. 6.15
URL : http://www.page.sannet.ne.jp/mtoga/index.html