lHTML　スタイル　縁取り枠 '98. 4. 7

l.お知らせ　内容　LINK　FILE 　 HTML　Win　PC　Unix　MS-DOS　C　C++　Mfc　Java　
.全般_ .スタイル .色の名前. _色一覧_
　備考 　スタイル 　文字 ( 配置 ) 　縁取り枠 　領域 　浮動域 　座標 　シート 　他 　
縁取り枠 　枠のスタイル 　 枠の色 　 幅と高さ 　 縁取り枠の幅 　 文字の大きさ 　 隙間　
T
　
  縁取り枠 
IExplore は、<DIV>などと共に使います。
Netscape では、縁取り枠を指定することで、領域の幅を確保できます。
　縁取り枠のスタイルと、フォントサイズのスタイルは、分けて書きます。
　[シート]のページにあるように、クラスやＩＤを使えば一緒に書けますが、
　その後、そのクラスまたはＩＤを使うと、指定しなくても縁取り枠が付いてしまいます。

<DIV STYLE="BORDER-STYLE:SOLID; BORDER-WIDTH:4PX 4PX 4PX 4PX;">SOLID</DIV>
<DIV STYLE="BORDER-STYLE:SOLID; BORDER-WIDTH:4PX;">SOLID</DIV>
 SOLID/NONE　　枠を表示する/表示はしない
BORDER-STYLE(スタイル) とBORDER-WIDTH(枠幅) は、必要がなくても記述します。
枠幅の単位を省略すると、 IExplore は PX、Netscape は PT になります。

NONE
SOLID
← 外側の枠は別です。
見易くするために表で区切っています。
IE4.0　:　BORDER-WIDTH を省略すると、縁取り幅は４になります。
Netscape4.0　:　省略すると縁取りは描かれません。
T 縁取り枠のスタイル
<DIV STYLE="BORDER-STYLE:SOLID; BORDER-WIDTH:12; BORDER-COLOR:AQUA;">
  SOLID</DIV>
　SOLID/DOUBLE/OUTSET/INSET/RIDGE/GROOVE / NONE
SOLID
DOUBLE
OUTSET (*).
INSET (*).
RIDGE
GROOVE
IExplore と Netscape での違い。
OUTSET と INSET は、Netscape では一重ですが、IExplore は二重です。( * )
陰影のあるものは、Netscape の影の色が、ほぼ IExplore の明るい部分の色です。


T 着色
<DIV STYLE="BORDER-STYLE:SOLID; BORDER-WIDTH:12; BORDER-COLOR:AQUA;
 BORDER-WIDTH:0; BORDER-TOP-WIDTH:10PX;"> SOLID</DIV>
TOP
RIGHT
BOTTOM
LEFT
BORDER-WIDTH:0PX;
BORDER-TOP-WIDTH:1PX;
BORDER-RIGHT-WIDTH:10PX;
Netscape : 幅を指定した辺だけが着色されます。
IExplore　:　BORDER-WIDTH:0; を書かなければ、幅を指定しない辺は 幅４で描かれます。
色の指定を省略したとき。
　Netscape : 黒。( デフォルトの色。)
　IExplore　:　COLOR: で指定した 文字と同じ色。

辺の塗り分け　( IExplore のみ )
上・右・下・左 の順に、色を指定します。Netscape は、一番目の色だけを使用します。
このとき Netscape のために、少なくとも一番目の色は、十進数記述します。
十進数以外では、指定する色によって、まったく別な色になっていまいます。
<DIV STYLE="BORDER-STYLE:SOLID; BORDER-WIDTH:12PX; WIDTH:300PX;
 BORDER-COLOR:RGB(0,255,255) YELLOW GREEN BLUE;"> 水・黄・緑・青</DIV>
水・黄・緑・青



T 領域の幅と高さ
<DIV STYLE="BORDER-STYLE:SOLID; BORDER-WIDTH:12PX; BORDER-COLOR:AQUA;
 WIDTH:300PX; HEIGHT:100PX; PADDING-BOTTOM:60PX;"> 300×100</DIV>
300×100
PADDING-BOTTOM による余白
Netscape では、高さの指定は無効です。内容の高さになります。
必要なら、PADDING-BOTTOM で下側余白を作ります。
余白高さ + 上下の枠の幅 + 内容の高さ = 全体高さ
メモ : 全角スペースはそのまま表示されます。

幅を指定しなかったとき
IExplore　幅は 100% になります。( 内容がなければ０％ )
Netscape 内容の幅になります。( 内容がなくても、縁取りだけは描かれます。 )



T 縁取り枠の幅
<DIV STYLE="BORDER-STYLE:SOLID; BORDER-COLOR:AQUA; WIDTH:150PX;
 BORDER-WIDTH:10PX 20PX 30PX 5PX;"> 10 20 30 5</DIV>
10 20 30 5

　上・右・下・左　　　
1 1 1 1

上・右・下・左
10

上下左右
10 20 30

上・左右・下
10 20

上下・左右

Netscape4.03 は、枠の高さを 上枠の幅だけで計算します。
下枠の方が広いと 次の内容と重なり、狭いと 下に余白ができます。
　
このように、次の内容が重なります。 ( これは擬似表現です。)　
 MARGIN-BOTTOM で 下に余白を作れば重なりませんが、IExplore にも余白ができます。
別の枠で囲むと下と重なりませんが、その後のスタイルが働かなくなります。
[浮動域]のページにあるように、FLOAT の指定をすれば、BR CLEAR で正しい終端を特定できます。

<DIV STYLE="BORDER-STYLE:SOLID; BORDER-COLOR:AQUA;
BORDER-WIDTH:10PT 20PX 40PX 5PX; WIDTH:40PX; FLOAT:LEFT">　</DIV>
<BR CLEAR=ALL>
　

次の内容



T 文字の大きさ
文字の大きさなどのスタイルは、縁取り枠とは別に書きます。( 対 Netscape )
Netscape では、
枠内で文章が折り返されると 外側で指定していた設定が無効になります。
そのときは、枠の内側で再設定します。
枠のスタイルに、文字の大きさもいっしょに書くと、他の部分が異常になる場合があります。
( 枠幅よりも短い文章のときには、再設定の必要はありません。)

上記の例ではすべて、文字の大きさのコードは省略されています。

<DIV STYLE="BACKGROUND:F0FFF0; WIDTH:200PX;
BORDER-STYLE:SOLID; BORDER-WIDTH:1PX; ">
<FONT FACE="ＭＳ Ｐゴシック"
   STYLE="FONT-SIZE:20PX; COLOR:RED; LINE-HEIGHT:110%;">
縁取り枠の中
</FONT>
</DIV>
縁取り枠の中

高さについて
IExplore　　LINE-HEIGHT: で行間を指定します。(一行の縦幅)
　枠の縦幅は、枠の外側で指定した文字の高さによって決められます。
　HEIGHT(縦幅) を指定できますが、文字の配置は 枠外側の行間設定が基準です。
　上記のように LINE-HEIGHT(行間) を設定すれば正しく配置できます。
Netscape　　枠の縦幅は、特に行間を指定しなくても、中の文字の高さになります。
　HEIGHT(縦幅) は書いても無効です。必要なら、PADDING: で余白を作ります。
　
 原因がわかりにくい異常表示の例
例えば、次のようなスタイルを、後記の [シート]のページのように定義してあるとします。
　#S3 { FONT-SIZE:20PX; }　
これを使って、縁取り枠内の、文字の大きさを 次のように指定したとします。
<DIV ID=S3 STYLE="BORDER-STYLE:SOLID; BORDER-WIDTH:1PX; WIDTH:200PX;">
縁取り枠内の文章
</DIV>
同じ文字サイズ S3 を使った他の部分がすべて、幅 200PX の枠で囲まれる場合があります。
上記のように 分けて書けば、解決します。
<DIV STYLE="BORDER-STYLE:SOLID; BORDER-WIDTH:1PX; WIDTH:200PX;">
<SPAN ID=S3> 縁取り枠内の文章 </SPAN>
</DIV>



T 背景と枠の、隙間

IExplore と Netscape の縁取り

IExplore は、縁取りと背景の間に隙間はありません。
　IExplore

Netscape は、縁取りと背景の間に隙間が設けられます。( これは擬似表現です。)
　Netscape


 次のコードはどちらのブラウザでも隙間はできません。 <DIV STYLE="BORDER-STYLE:NONE; BORDER-WIDTH:1PX; WIDTH:306PX; BACKGROUND-COLOR:F0F0F0;"> <DIV STYLE="BORDER-STYLE:SOLID; BORDER-WIDTH:1PX; WIDTH:306PX; BACKGROUND-COLOR:F0F0F0;">隙間なし</DIV> </DIV> 次のコードはどちらのブラウザでも隙間ができます。 <DIV STYLE="BORDER-STYLE:SOLID; BORDER-WIDTH:1PX; WIDTH:298PX; BACKGROUND-COLOR:F0F0F0; MARGIN-LEFT:4PX;"> <DIV STYLE="BORDER-STYLE:SOLID; BORDER-WIDTH:3PX; BORDER-COLOR=E0E0D0; WIDTH:298PX;">隙間あり</DIV> </DIV> BORDER-COLOR=E0E0D0; は、このページの背景色です。 MARGIN-LEFT:4PX; は、隙間なしとの位置合せ用で、必要ではありません。

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