,
,
,
last modified 10th/Oct. 2000
ここでは CSS の仕組みに付いては触れません。差し当たり、「 CSS の説明」を参照ください。
| border-width | [ [ thin | medium | thick | <length> ]{1,4} ] | inherit |
|---|
'inherit' は親要素の値を継承すると云う指定です。
medium です。線の太さが細い順に、「 thin 細 < medium 中 < thick 太」 になります。
'border-width' プロパティは一つから四つまでの値を持つ事が出来ます；
img { border-width: 2pt }
この例では、 IMG 要素の周囲のボーダーの幅を 2pt に指定して有ります。
h1 { border-width: 2pt 10pt }
この例では、 H1 要素の上下のボーダーの幅を 2pt 、左右のボーダーの幅を 10pt に指定して有ります。
p { border-width: 2px 10px 4px 1px }
この例では、 P 要素の上のボーダーの幅を 2 ピクセル、右のボーダーの幅を 10 ピクセル、下のボーダーの幅を 4 ピクセル、左のボーダー幅を 1 ピクセルに指定して有ります。
| border-color | <color>{1,4} | transparent | inherit |
|---|
'transparent' では透明になり、親要素の背景色が透過します。このとき、border-widthの値は残り、パッディング領域とマージン領域の間に、ボーダー領域が残ります。
'inherit' は親要素の値を継承すると云う指定です。
color' プロパティの値です。'border-color' プロパティは一つから四つまでの値を持つ事が出来ます；
img { border-color: red }
この例では、 IMG 要素の周囲のボーダーの色を red （赤）に指定して有ります。
h1 { border-color: silver #030 }
この例では、 H1 要素の上下のボーダーの色を silver （薄い灰色）、左右のボーダーの色を #030 (#003300, 濃い緑) に指定して有ります。
p { border-width: silver silver #0cf #069 }
この例では、 P 要素の上のボーダーの色を silver 、右のボーダーの色を silver、下のボーダーの色を #0cf (#00ccff)、左のボーダー色を #069 (#006699) に指定して有ります。
| border-style | <border-style>{1,4} | inherit |
|---|
'inherit' は親要素の値を継承すると云う指定です。
none です。'border-style' プロパティは一つから四つまでの値を持つ事が出来ます；
| none | ボーダーを無しにします。この値を指定すると'border-width'の算出値は強制的に'0'になる。ただし、表関連要素で隣接する要素とボーダーを共有している場合、隣接要素の共有ボーダーが指定されていれば、それに従う。 |
|---|---|
| hidden | 'none'とほぼ同じ。ただし、表関連要素で隣接する要素とボーダーを共有している場合、隣接要素との共有ボーダーも強制的に非表示にする。 |
| dotted | ボーダーを点線にする。 |
| dashed | ボーダーを破線にする。 |
| solid | ボーダーを切れ目の無い実線にする。 |
| double | ボーダーを二重線にする。 2本の実線とその間の空白との合計幅が'border-width'の値と等しくなる。 |
| groove | キャンバスの凹としてボーダーを表示する。 |
| ridge | 'groove'の逆で、キャンバスの凸としてボーダーを表示する。 |
| inset | ボックスのボーダーより内側全体がキャンバスの窪みの底面になる様に表示する。 |
| outset | 'inset'の逆で、ボックスのボーダーより内側全体がキャンバスの隆起の上面になる様に表示する。 |
| dotted 点線 |
dashed 破線 |
solid 実線 |
double 二重線 |
| groove 凹線 |
reidge 凸線 |
inset 底面 |
outset 上面 |
以上の三つのプロパティを、一箇所で指定できます。
四方の個別指定；
p { border-top: 2pt solid silver;
border-right: 4pt dashed navy;
border-bottom: 4pt dotted silver;
border-left: 3pt double red }
四方の一括指定；
img { border: 1px solid blue }
CSS を利用して、画像がリンクアンカーになっている場合のボーダーを指定してみましょう。
STYLE 要素；
<head>
</title>CSS の border プロパティの利用法</title>
...
<meta http-equiv="content-sty;e-type" type="text/css">
<style type="text/css">
<!--
a:link img { border: 2pt solid #0cf }
/* 未訪問のリンク */
a:visited img { border: 2pt dashed #630 }
/* 訪問済みのリンク */
a:hover img { border: none }
/* カーソルが上に乗っている状態のリンク */
a:focus img { border:none;
text-deocration: blink }
/* ユーザの操作にフォーカスされている状態のリンク */
a:active { border: 2pt inset blue }
/* 活動中（作動中）のリンク */
-->
</style>
</head>
BODY 要素の中身；
<a href="http://www.louvre.or.jp/louvre/anglais/collec/ager/ag3_1.htm" title="Greek Art of the 3rd-1st Century BC" target="_top"><img src="http://www.louvre.or.jp/louvre/img/photos/collec/ager/vignet/ma2369.jpg" alt="Victory of Samothrace" width="67" height="130"></a>
,
,
,
a:link, a:hover 等に付いては、「A 要素の見栄えの調整」を参照ください。