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% になります。( 内容がなければ0% )
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 )中の一番目中の
二番目

この書式では、中の領域は1個の文字のように配置されます。
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