<<PREV | TOP | NEXT>>

CSS の 'border'

last modified 10th/Oct. 2000

CSS では、任意の要素の周囲にボーダーを指定できます。

border-width
ボーダーの太さを指定します。
border-style
ボーダーの種類を指定します。
border-color
ボーダーの色を指定します。
border
以上の三つのプロパティの簡略化プロパティ

ここでは CSS の仕組みに付いては触れません。差し当たり、「 CSS の説明」を参照ください。

border-width

border-width[ [ thin | medium | thick | <length> ]{1,4} ] | inherit

'inherit' は親要素の値を継承すると云う指定です。

線の太さが細い順に、「 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

border-color<color>{1,4} | transparent | inherit

'transparent' では透明になり、親要素の背景色が透過します。このとき、border-widthの値は残り、パッディング領域とマージン領域の間に、ボーダー領域が残ります。

'inherit' は親要素の値を継承すると云う指定です。

'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<border-style>{1,4} | inherit

'inherit' は親要素の値を継承すると云う指定です。

'border-style' プロパティは一つから四つまでの値を持つ事が出来ます;

<border-style> の定義
none ボーダーを無しにします。この値を指定すると'border-width'の算出値は強制的に'0'になる。ただし、表関連要素で隣接する要素とボーダーを共有している場合、隣接要素の共有ボーダーが指定されていれば、それに従う。
hidden 'none'とほぼ同じ。ただし、表関連要素で隣接する要素とボーダーを共有している場合、隣接要素との共有ボーダーも強制的に非表示にする。
dotted ボーダーを点線にする。
dashed ボーダーを破線にする。
solid ボーダーを切れ目の無い実線にする。
double ボーダーを二重線にする。 2本の実線とその間の空白との合計幅が'border-width'の値と等しくなる。
groove キャンバスの凹としてボーダーを表示する。
ridge 'groove'の逆で、キャンバスの凸としてボーダーを表示する。
inset ボックスのボーダーより内側全体がキャンバスの窪みの底面になる様に表示する。
outset 'inset'の逆で、ボックスのボーダーより内側全体がキャンバスの隆起の上面になる様に表示する。
border-styleの種類
dotted
点線
dashed
破線
solid
実線
double
二重線
groove
凹線
reidge
凸線
inset
底面
outset
上面

border

以上の三つのプロパティを、一箇所で指定できます。

四方の個別指定;

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>

Victory of Samothrace, Danae, Moulin Rouge - La Goulue, The Repentant Peter

a:link, a:hover 等に付いては、「A 要素の見栄えの調整」を参照ください。

<<PREV | TOP | NEXT>>

SEO [PR] [ Windows7 f ^T[o[ Cu`bg SEO