Section 9 : 枠(1)

 CSS を使うと,あらゆる要素に“枠”をつけることができる。これにより,無駄な記述をしないで上手なデザインを施すことができる。

枠の太さ

 枠はマージンの内側に描かれる。まず,を設けるのにまず考えるのは“太さ”であるが,これは次の属性で指定する。

border-top-width: (長さ または キーワード);
border-bottom-width: (長さ または キーワード);
border-left-width: (長さ または キーワード);
border-right-width: (長さ または キーワード);

 この属性は全要素について適用される。継承はされない。もし,継承されるとすると枠だらけというものすごいデザインになってしまい,不自然になってしまう。

 長さは単位を伴って与えるが,パーセント指定は許されていない。また,キーワード thinmediumthick があり,これはとくに実際の長さと関連づけられてはいないが,この順で太くなることは確かである。初期値は medium

 枠の太さに関しては短縮属性が定義されている。

border-width: (長さ または キーワード;1 値から 4 値);

 border-width 短縮属性は,margin 短縮属性と同じように,指定された値が

この順に半角スペースで区切って指定する。

 負の値を与えることはできない。

 IE4/5  border-width に関係する属性は置換されていないインライン要素には適用されない。

 IE3  border-width に関係する属性はサポートされていない。枠そのものがサポートされていない。

枠のスタイル

 border-style 属性は,枠の描かれ方を指定する。すべての要素について適用され,継承はされない

border-style: (キーワード;1 値から 4 値);

 キーワードは次のものが指定可能である。

none
border-width に関係する属性の指定に関わらず,枠は描かれない。初期値。
dotted
枠は点線で,背景色に重ねられて描かれる。
dashed
枠は破線で,背景色に重ねられて描かれる。
solid
枠は実線で描かれる。
double
枠は二重線で描かれる。border-width の値が小さいとつぶれて実線になってしまうことがある。
groove
枠が溝のように描かれる。
ridge
枠が盛り上がっているように描かれる。
inset
要素が一段低いところにあるように見える枠を描く。
outset
要素が一段高いところにあるように見える枠を描く。

気をつけなければならないのは,この属性の初期値が none であるため,border-width を指定しただけでは枠は描かれないことである。逆に,border-style だけを指定した場合は,border-width の初期値が medium であるために,枠は描かれる。

 与える値の数は 1 値から 4 値までで,値の数と指定のされ方の関係は margin 短縮属性やborder-width 短縮属性と同じである。枠のそれぞれの部分に異なった描かれ方を指定することができるということである。

<P>CSS では,あらゆる要素に<SPAN STYLE="border-width: thin; border-style: outset;">枠を描く</SPAN>ことができます。</P>
<P STYLE="border-style: dashed double;">枠を描くためには,少なくとも border-style 属性を指定する必要があります。</P>

CSS では,あらゆる要素に枠を描くことができます。

枠を描くためには,少なくとも border-style 属性を指定する必要があります。

 ブラウザはすべてのキーワードをそのとおり処理せずに,solid と同様に扱うこともある。

 あとで詳しく解説するが,背景色は枠を含めた内側に適用される。

 IE4/5  border-style 属性は置換されていないインライン要素には適用されない。また,dotteddashedsolid と同じ扱いになる。

 IE3  border-style 属性はサポートされていない。

 NN4  インライン要素に枠を指定するとその要素はブロック要素と同じ扱いになる。また,dotteddashedsolid と同じ扱いになる。border-style 属性に 2 値以上を指定すると意図どおりにならないことがある。枠を表示させるためには,border-style と border-width をあわせて指定しなければならない。したがって,上の後者の例には枠は表示されない。