Part 1. Let's begin CSS : Chapter 3. “要素の整形”

3.4 枠(2)

 CSS のボックスにおいて,枠にはスタイル・太さ・色の 3 つのファクタを指定する。ここでは,枠の太さのプロパティを見ていこう。

枠の太さ

 枠の各辺の太さを指定するのは,border-top-widthborder-right-widthborder-bottom-width および border-left-width プロパティである。

border-top-width: 長さ;
border-top-width: キーワード;

border-right-width: 長さ;
border-right-width: キーワード;

border-bottom-width: 長さ;
border-bottom-width: キーワード;

border-left-width: 長さ;
border-left-width: キーワード;

 これらのプロパティは,

  • すべての要素に適用される。
  • 初期値は,キーワード medium である。
  • プロパティの値は,継承されない。

基本的に,これらのプロパティには,枠の太さを長さでもって与える。ただし,長さとして負の値を与えることは許されない。キーワードの指定も可能であり,次の 3 つの中から 1 つを指定する。

thin
細い枠。具体的な太さはブラウザに依存する。
medium
中くらいの太さの枠。具体的な太さはブラウザに依存するが,少なくとも thin より細くなく,thick よりは太くない。
thick
太い枠。具体的な太さはブラウザに依存するが,少なくとも medium より細くない。

 繰り返し注意するが,枠の太さを指定しても,枠のスタイルの初期値が none であるので,適切な値に枠のスタイルを指定しないと枠は描かれない。

 枠のスタイルの場合と同様に,枠の太さに関しても 4 つの辺を同時に指定できる border-width 短縮属性がある。

border-width: 全辺の枠の太さ;
border-width: 上下辺の枠の太さ 左右辺の枠の太さ;
border-width: 上辺の枠の太さ 左右辺の枠の太さ 下辺の枠の太さ;
border-width: 上辺の枠の太さ 右辺の枠の太さ 下辺の枠の太さ 左辺の枠の太さ;

 それぞれの値は各辺の枠の太さを指定する場合に準じ,長さまたはキーワードとなる。値の数と対応する辺の関係は,border-style 短縮プロパティの場合と同じである。

 枠の太さを指定するプロパティの例を見てみよう。

H3 { border-bottom-width: medium; border-bottom-style: solid; padding: 0.3em; /* 下辺だけに枠を描く */ }
P { line-height: 130%; }
.command { border-width: 1px; border-style: dashed; /* 短縮プロパティで全辺を同時に指定 */ }

<H3>Windows DHCP クライアントのトラブルシューティング</H3>
<P> Windows 機において,DHCP により IP アドレスを指定されてる場合,その状態を調べるには <CODE CLASS="command">winipcfg</CODE>(Windows 95/98/Me)または <CODE CLASS="command">ipconfig</CODE>(Windows NT 4.0/2000)を使用するとよい。</P>

 これを出力させる。

Windows DHCP クライアントのトラブルシューティング

 Windows 機において,DHCP により IP アドレスを指定されてる場合,その状態を調べるには winipcfg(Windows 95/98/Me)または ipconfig(Windows NT 4.0/2000)を使用するとよい。

また,キーワード thinmedium および thick がお手持ちの環境でどのように出力されるかを見てみよう。

P { border-style: solid; padding: 0.3em; }
#thin-border { border-width: thin; }
#medium-border { border-width: medium; }
#thick-border { border-width: thick; }

<P ID="thin-border">"Border-width" is "thin."</P>
<P ID="medium-border">"Border-width" is "medium."</P>
<P ID="thick-border">"Border-width" is "thick."</P>

 これを出力させる。

"Border-width" is "thin."

"Border-width" is "medium."

"Border-width" is "thick."

IE4, 5
画像など以外のインラインボックスを生成する要素に,枠は適用できない。