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

l.お知らせ　内容　LINK　FILE 　 HTML　Win　PC　Unix　MS-DOS　C　C++　Mfc　Java　
.全般_ .スタイル .色の名前. _色一覧_
　備考 　スタイル 　文字 ( 配置 ) 　縁取り枠 　領域 　浮動域 　座標 　シート 　他 　
領域の大きさ 　 内部・外部余白 　 ネスト　
 ◆ 領域の大きさ
Netscape : 次の書式では、実際に使用しない領域は確保されません。
<SPAN STYLE="BACKGROUND:Wheat; WIDTH:200PX; HEIGHT:50PX">
  A<BR>B<BR></SPAN>
IExplore
A
B

 Netscape
A

B


幅を確保するには 縁取りの指定をします。( 対 Netscape )
<DIV STYLE="BORDER-STYLE:SOLID; BORDER-WIDTH:1PX;
  BACKGROUND:Wheat; WIDTH:300PX;">幅 300PX</DIV>
幅 300PX
縁取りがいらなくても、BORDER-STYLE と BORDER-WIDTH を書きます。
縁取りを表示したくないときは、SOLID の代わりに NONE を書きます。( 見えなくなります。)
縁取りの指定をしても、Netscape では 実際に使用しない高さは確保されません。

確実に領域を確保するには空の内容を作ります。
<DIV STYLE="BORDER-STYLE:NONE; BORDER-WIDTH:1PX; BACKGROUND:F0F0F0;
WIDTH:500PX;">
<BR>
<BR>
<BR>
<BR>
</DIV>

<DIV STYLE="BORDER-STYLE:NONE; BORDER-WIDTH:1PX; BACKGROUND:F0F0F0;
WIDTH:500PX;">
<TABLE HEIGHT=60><TR><TD>〜</TD></TR></TABLE>
</DIV>

幅を指定しなかったとき
IExplore　幅は 100% になります。( 内容がなければ０％ )
Netscape 内容の幅になります。( 内容がなくても、縁取りだけは描かれます。 )
ただし、内側に別な領域がネストされているときは、外側領域は 100% 幅になります。
外側領域 内側領域 　

指定値よりも内容の方が大きいとき → 拡大されます。
幅が指定されているときは、折り返されて 縦幅が拡大されます。

表の中に入れたとき
IExplore　:　普通の場合と同じ扱いになります。
Netscape　:　STYLE の外側で指定した NOWRAP( 折返し禁止 )は、STYLE の中には効きません。
　　. . . スタイル領域の幅に合わせて折り返されます。
　　※　COLSPAN を使った表を作ると、その後のフォントサイズが変わる。？
◆ 内容の余白と、領域の余白　
内容の周囲に余白を作るには、PADDING を書きます。
<SPAN STYLE="BORDER-STYLE:SOLID; BORDER-WIDTH:1PX; WIDTH:210PX;
PADDING-LEFT:50PX">左余白( PADDING )</SPAN>
左余白( PADDING ) LEFT/RIGHT/TOP/BOTTOM
Netscape では、縁取りの指定をしたときに限り、</SPAN>の後で改行されます。
<DIV>を使えば、Netscape でも IExplore でも改行されるので 同じ表示になります。

領域の周囲に余白を作るには、MARGIN を書きます。
<DIV STYLE="BORDER-STYLE:SOLID; BORDER-WIDTH:1PX; WIDTH:150PX;
MARGIN-LEFT:50PX">左余白( MARGIN )</DIV>
左余白( MARGIN )
LEFT/RIGHT/TOP/BOTTOM


◆ ネスト　
横並び
<SPAN STYLE="BORDER-STYLE:SOLID; BORDER-WIDTH:1PX; WIDTH:500PX;
MARGIN-LEFT:50PX; BACKGROUND:FFF0E0;">左余白( MARGIN )
<SPAN STYLE="BACKGROUND:FFE0D0;">中の一番目
<SPAN STYLE="BACKGROUND:FFC0B0;">中の<BR>二番目<BR></SPAN>
</SPAN>
</SPAN><BR>
左余白( MARGIN )中の一番目中の
二番目
この書式では、中の領域は１個の文字のように配置されます。
IExplore : </SPAN>の後で改行されません。
Netscape : </SPAN>の後で改行されます。 　中の領域に縁取りを付けられますが、縁取りを付けると改行されます。
　中の領域に MARGIM(領域の余白)を設けることができます。
　指定色によっては、背景色が表示されません。
　ゆっくりスクロールしたときは、再描画しないと背景色が表示されません。

 入れ子
<DIV STYLE="BORDER-STYLE:SOLID; BORDER-WIDTH:1PX; WIDTH:350PX;">
外側の領域
<DIV STYLE="BORDER-STYLE:SOLID; BORDER-WIDTH:1PX; WIDTH:100PX;">
中の領域<BR></DIV>
外側の領域終り。</DIV>
外側の領域
中の領域
外側の領域終り。
この書式では、負の MARGIN は指定できません。
つまり、中に入れることはできますが、中の領域同士を重ねることはできません。
縁取り枠を表示したくないときは、SOLID の代わりに NONE を書きます。
Netscape では、縁取り枠の指定は必要です。　負の MARGIN も指定できます。

背景色、領域余白、内容余白 を指定する例。
<DIV STYLE="BORDER-STYLE:SOLID; BORDER-WIDTH:1PX; WIDTH:350PX;
BACKGROUND:F8F8E0; MARGIN-LEFT:50PX;">外側の領域
<DIV STYLE="BORDER-STYLE:SOLID; BORDER-WIDTH:1PX; WIDTH:200PX;
BACKGROUND:F0F0C0; MARGIN-LEFT:20PX;">中の領域
<DIV STYLE="BORDER-STYLE:SOLID; BORDER-WIDTH:1PX; WIDTH:100PX;
BACKGROUND:E0E0A0; MARGIN-LEFT:20PX; MARGIN-TOP:10PX;
PADDING-LEFT:20PX; PADDING-BOTTOM:10PX;">
一番中<BR>の領域<BR></DIV>
中の領域終り。</DIV>
外側の領域終り。</DIV>
外側の領域
中の領域
一番中
の領域
中の領域終り。
外側の領域終り。



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