lHTML　スタイル　座標指定配置 '98. 4. 7

l.お知らせ　内容　LINK　FILE 　 HTML　Win　PC　Unix　MS-DOS　C　C++　Mfc　Java　
.全般_ .スタイル .色の名前. _色一覧_
　備考 　スタイル 　文字 ( 配置 ) 　縁取り枠 　領域 　浮動域 　座標 　シート　他 　
座標指定配置 　 重ね順番の指定 　 基準領域の指定 　 変移指定配置
[ページ内] 　bih-h_ss.htm 　bih-h_st.htm 　bih-h_su.htm 　
 T 座標指定配置　ABSOLUTE

ページの左上を原点にして、座標を指定してスタイル領域を配置します。
Netscape で領域全体に着色するには、縁取り枠付の領域を使います。
この領域は、他の内容と重なって表示されます。
重ねたくないときは、あらかじめ空白を作っておきます。
内側余白 PADDING と 外側余白 MARGIN は、共に有効です。

このページに表示するには座標を決めるのが面倒なので、次のような別なページを作ります。
三つの枠内の文字の大きさは、[縁取り枠]のページのように、別に指定します。
下記の例では、文字の大きさを指定する部分は省略されています。
　</HEAD>の記述が抜けていました。 '99. 3 訂正。
<HTML><HEAD>
<!--必要に応じて、スタイルを定義するか、スタイルシートファイルを挿入します。-->
</HEAD><BODY>
座標指定配置の例 (１)<BR>
スタイル領域は、ページの左上を原点にして、座標を指定して配置できます。<BR>
<BR><BR><BR><BR> <BR><BR><BR><BR><BR>
↑ これは、表示位置を進めるために書いています。<BR>
上記のスタイル領域は、他の内容とは関係なく、重なって表示されます。<BR>
上記の実際のコードは、この文章の次に書かれています。→ ・ ・ ・<BR>

<SPAN STYLE="POSITION:ABSOLUTE; LEFT:20PX; TOP:50PX;
BORDER-STYLE:SOLID; BORDER-WIDTH:1PX; WIDTH:500PX;
BACKGROUND-COLOR:FFFFE0;">一番め<BR><BR><BR></SPAN>

<SPAN STYLE="POSITION:ABSOLUTE; LEFT:50PX; TOP:90PX;
BORDER-STYLE:SOLID; BORDER-WIDTH:1PX; WIDTH:500PX;
BACKGROUND-COLOR:FFF0C0;">二番め<BR><BR><BR></SPAN>

<SPAN STYLE="POSITION:ABSOLUTE; LEFT:80PX; TOP:130PX;
BORDER-STYLE:SOLID; BORDER-WIDTH:1PX; WIDTH:500PX;
BACKGROUND-COLOR:FFE0B0;">三番め<BR><BR><BR></SPAN>
</BODY></HTML>
上記のページを、下記に表示します。
フローティングフレーム(IExplore) または レイヤ(Netscape)で、挿入しています。
次の例は、ちょっと大きな領域をもう一つ追加します。
また、<BR>をたくさん書く代わりに、高さを指定した表を使っています。
座標指定配置の例 (２)<BR>
<TABLE HEIGHT=210><TR><TD>　</TD></TR></TABLE>
 紫の領域の位置に、他の領域の位置を重ねています。<BR>

<SPAN STYLE="POSITION:ABSOLUTE; LEFT:10PX; TOP:30PX;
BORDER-STYLE:SOLID; BORDER-WIDTH:1PX; WIDTH:600PX;
BACKGROUND-COLOR:FFE0FF;">
<TABLE HEIGHT=190><TR><TD VALIGN=TOP>
大きな領域</TD></TR></TABLE>
 </SPAN>

<SPAN STYLE="POSITION:ABSOLUTE; LEFT:30PX; TOP:70PX;
BORDER-STYLE:SOLID; BORDER-WIDTH:1PX; WIDTH:500PX;
BACKGROUND-COLOR:FFFFE0;">一番め<BR><BR><BR></SPAN>

<SPAN STYLE="POSITION:ABSOLUTE; LEFT:60PX; TOP:100PX;
BORDER-STYLE:SOLID; BORDER-WIDTH:1PX; WIDTH:500PX;
BACKGROUND-COLOR:FFF0C0;">二番め<BR><BR><BR></SPAN>

<SPAN STYLE="POSITION:ABSOLUTE; LEFT:90PX; TOP:130PX;
BORDER-STYLE:SOLID; BORDER-WIDTH:1PX; WIDTH:500PX;
BACKGROUND-COLOR:FFE0B0;">三番め<BR><BR><BR></SPAN>
T重ね順番の指定　Z-INDEX

領域が重なると、後に書いたものが上に表示されます。
領域に番号を付けると、番号の大きいものが上に表示されるようになります。
次の例は [ 座標指定配置の例 (１) ] と同じですが、番号を付けて重ね順を逆にしています。
重ね番号を指定する例<BR>
<BR><BR><BR><BR> <BR><BR><BR><BR><BR>
先に書いたものが上に表示されています。<BR>

<SPAN STYLE="Z-INDEX:5; POSITION:ABSOLUTE; LEFT:20PX; TOP:30PX;
BORDER-STYLE:SOLID; BORDER-WIDTH:1PX; WIDTH:500PX;
BACKGROUND-COLOR:FFFFE0;"><BR><BR>一番め<BR></SPAN>

<SPAN STYLE="Z-INDEX:4; POSITION:ABSOLUTE; LEFT:50PX; TOP:70PX;
BORDER-STYLE:SOLID; BORDER-WIDTH:1PX; WIDTH:500PX;
BACKGROUND-COLOR:FFF0C0;"><BR><BR>二番め<BR></SPAN>

<SPAN STYLE="Z-INDEX:3; POSITION:ABSOLUTE; LEFT:80PX; TOP:110PX;
BORDER-STYLE:SOLID; BORDER-WIDTH:1PX; WIDTH:500PX;
BACKGROUND-COLOR:FFE0B0;"><BR><BR>三番め<BR></SPAN>
T 基準領域の指定　RELATIVE　( IExplore のみ。)

上記の例はすべて、ページの左上を基準に配置しました。
ページの途中に配置したいときには、座標を計算するのが大変です。
IExplore では、基準になる親の領域を用意して、親領域の座標を基準に配置できます。

Netscape では、親の位置を基準に配置できないか、またはその方法が分かりません。
もし以下のように RELATIV を使用すると、その後スタイルが全て無効になります。
そのため、Netscape では LAYER を使って擬似表現しています。
<NOLAYER> <!-- Netscape には表示されません。 -->
<SPAN STYLE="POSITION:RELATIVE; LEFT:10PX; TOP:0PX;
BORDER-STYLE:SOLID; BORDER-WIDTH:1PX; WIDTH:600PX;
BACKGROUND-COLOR:FFE0FF;">
外側
<TABLE HEIGHT=160><TR><TD>　</TD></TR></TABLE>
外側終り。
<SPAN STYLE="POSITION:ABSOLUTE; LEFT:20PX; TOP:30PX;
BORDER-STYLE:SOLID; BORDER-WIDTH:1PX; WIDTH:500PX;
BACKGROUND-COLOR:FFFFE0;">一番め<BR><BR><BR></SPAN>

<SPAN STYLE="POSITION:ABSOLUTE; LEFT:50PX; TOP:70PX;
BORDER-STYLE:SOLID; BORDER-WIDTH:1PX; WIDTH:500PX;
BACKGROUND-COLOR:FFF0C0;">二番め<BR><BR><BR></SPAN>

<SPAN STYLE="POSITION:ABSOLUTE; LEFT:80PX; TOP:110PX;
BORDER-STYLE:SOLID; BORDER-WIDTH:1PX; WIDTH:500PX;
BACKGROUND-COLOR:FFE0B0;">三番め<BR><BR><BR></SPAN>
</SPAN>
</NOLAYER>
外側
　
外側終り。 一番め


 二番め


 三番め
上記は、Netscape では次のコードで表示されています。
<IFRAME WIDTH=0 HEIGHT=0> <!-- IExplore には表示されません。-->
<LAYER> <!-- ← このレイヤを基準に使います。-->
<LAYER WIDTH=400 HEIGHT=200 LEFT=0 TOP=10 BGCOLOR=FFE0FF>
外側</LAYER>

<LAYER WIDTH=300 HEIGHT=70 LEFT=20 TOP=30 BGCOLOR=FFFFE0>
一番め</LAYER>
<LAYER WIDTH=300 HEIGHT=70 LEFT=50 TOP=70 BGCOLOR=FFF0C0>
二番め</LAYER>
<LAYER WIDTH=300 HEIGHT=70 LEFT=80 TOP=110 BGCOLOR=FFE0B0>
三番め</LAYER><SMALL>

<LAYER LEFT=0 TOP=180>外側終り。</LAYER>
</LAYER>
<TABLE HEIGHT=200><TR><TD>　</TD></TR></TABLE><BR>
</IFRAME>
T 変移指定配置　RELATIVE　( IExplore のみ。)

上記で 他の領域の基準に使った RELATIVE 領域を、ずらして配置します。
X または Y 方向の移動距離を指定して、配置する位置を ずらします。
( MARGIN で、正または負の余白を取っても、実質的に移動させることができます。)

ずらす前の例
<SPAN STYLE="BACKGROUND:E8F0E8; WIDTH:100PX; HEIGHT:70PX;">a</SPAN>
<SPAN STYLE="BACKGROUND:D8E0D8; WIDTH:100PX; HEIGHT:70PX;">b</SPAN>
<SPAN STYLE="BACKGROUND:C0D0C0; WIDTH:100PX; HEIGHT:70PX;">c</SPAN><BR>
abc

 元の位置を基準に、b と c を動かします。 ( a だけそのまま。)
<NOLAYER>   <!-- Netscape には表示されません。 -->
<SPAN STYLE="BACKGROUND:D0F8D0; WIDTH:100PX; HEIGHT:70PX;">a</SPAN>
<SPAN STYLE="BACKGROUND:B0F0B0; WIDTH:100PX; HEIGHT:70PX;
   POSITION:RELATIVE; TOP:20PX; LEFT:-30PX">b'</SPAN>
<SPAN STYLE="BACKGROUND:90D090; WIDTH:100PX; HEIGHT:70PX;
   POSITION:RELATIVE; TOP:-20PX; LEFT:30PX">c'</SPAN><BR>

</NOLAYER>

abc

b'
　TOP:20PX
　LEFT:-30PX
 c'
　TOP:-20PX
　LEFT:30PX
上記は、Netscape では次のコードで表示されています。
<IFRAME WIDTH=0 HEIGHT=0>   <!-- IExplore には表示されません。-->
<LAYER>
<LAYER WIDTH=100 HEIGHT=70 TOP=0 LEFT=0 BGCOLOR=D1F8D2>a</LAYER>
<LAYER WIDTH=100 HEIGHT=70 TOP=0 LEFT=100 BGCOLOR=D8E0D8>b</LAYER>
<LAYER WIDTH=100 HEIGHT=70 TOP=0 LEFT=200 BGCOLOR=C0D0C0>c</LAYER>
<LAYER WIDTH=100 HEIGHT=70 TOP=20 LEFT=70 BGCOLOR=B0F0B0>
  b'<BR>　<SMALL>TOP:10PT<BR>　LEFT:-20PT</SMALL><BR></LAYER>
<LAYER WIDTH=100 HEIGHT=70 TOP=-20 LEFT=235 BGCOLOR=90D090>
  c'<BR>　<SMALL>TOP:-10PT<BR>　LEFT:20PT</SMALL><BR></LAYER>
</LAYER>
<TABLE HEIGHT=115><TR><TD>　</TD></TR></TABLE>
</IFRAME>


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


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