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

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

T
 
 縁取り枠 
IExplore は、<DIV>などと共に使います。
Netscape では、縁取り枠を指定することで、領域の幅を確保できます
 縁取り枠のスタイルと、フォントサイズのスタイルは、分けて書きます
 [シート]のページにあるように、クラスやIDを使えば一緒に書けますが、
 その後、そのクラスまたはIDを使うと、指定しなくても縁取り枠が付いてしまいます。

<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 を省略すると、縁取り幅は4になります。
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; を書かなければ、幅を指定しない辺は 幅4で描かれます。
色の指定を省略したとき。
 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% になります。( 内容がなければ0% )
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="MS Pゴシック"
   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