枠 BORDER

枠(BORDER)

borderとは、上下左右のボーダーに関する設定を一括して指定するためのプロパティです。具体的には、border-color、border-style、border-widthで指定する値を任意の順序でスペースで区切って指定します。

ただし、この場合、上下左右に別個の設定を行うことはできません。

border-width(枠の太さ上、左、右、下)
border-color (枠の色上、左、右、下)
border-style (枠のタイプ上、左、右、下)
border (枠一般上、左、右、下)

boder-width (枠の太さ上、左、右、下)

border-bottom-widthとは、下側のボーダーの太さを指定するためのプロパティです。初期値はmediumであり、中ぐらいのボーダーとなりますが、数値に単位をつけて指定します。なお、ボーダーの太さにマイナスを指定することはできません。

border-widthとは、ボーダーの太さを指定するためのプロパティです。数値に単位をつけて指定します。値がひとつだけのときには上下左右の各ボーダーを同じ太さで描画しますが、値の数によって上下と左右のそれぞれに同じ太さを指定したり、左右のみに同じ太さを指定したり、あるいは全てのボーダーに異なる太さを指定できます。

なお、ボーダーの太さにマイナスを指定することはできません。

border-width
書式	border-width: <value:値>
値	[ thin \| medium \| thick \| <length> ]{1,4}
初期値	未定義
適用要素	全ての要素
継承性	不可

border-widthプロパティーは一から四つまでの値を特定して要素の境界線幅を設定するのに使い、各値はキーワードまたは lengthです。マイナスの長さは許されません。四つの値が与えられたら、それぞれ上部・右側・下部・左側境界線幅に適用されます。一つの値なら、それが全ての側面に当てはめられます。二つか三つが与えられているなら、記載ない値は反対側の値から取られます。

このプロパティーは、border-top-width・border-right-width・border-bottom-widthそして border-left-widthプロパティー用の短縮型です。

短縮型プロパティーborderも使います。

例:実例: このようになります。

<html>
<head>
<title>border-width</title>
<style type="text/css">
#links {
      border-left-width:1cm;
      border-left-style: solid;
      border-color: red;
      padding-left:1cm;
      text-align: justify;
}

#linksrechts {
     border-left-width:1cm;
     border-left-style: solid;
     border-left-color: red;
     padding-left:1cm;
     border-right-width:1cm;
     border-right-style: solid;
     border-right-color: green;
     padding-right:1cm;
     text-align: justify;
}

#rundrum {
    border-width:1px;
    border-style: solid;
    border-color: blue;
    padding:1cm;
    text-align: justify;
}
</style>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<p id="links">xxxxx xxxxx xxxxx usw.</p>
<p id="linksrechts">xxxxx xxxxx xxxxx usw.</p>
<p id="rundrum">xxxxx xxxxx xxxxx usw.</p>
</body>
</html>

border-color(枠の色上、左、右、下)

border-colorとは、ボーダーの色を指定するためのプロパティです。RGB値やキーワードで任意の色を指定することができます。値がひとつだけのときには上下左右の各ボーダーを同じ色で描画しますが、値の数によって上下と左右のそれぞれに同じ色を指定したり、左右のみに同じ色を指定したり、あるいは全てのボーダーに異なる色を指定できます。また、値にtransparentを指定すると、幅を確保した状態で透明なボーダーが描画されます。

border-bottom-colorとは、下側のボーダーの色を指定するためのプロパティです。初期値は適用対象のcolorプロパティの値ですが、RGB値やキーワードで任意の色を指定することができます。また、transparentを指定すると、幅を確保した状態で透明なボーダーが描画されます。

border-right-colorとは、右側のボーダーの色を指定するためのプロパティです。初期値は適用対象のcolorプロパティの値ですが、RGB値やキーワードで任意の色を指定することができます。また、transparentを指定すると、幅を確保した状態で透明なボーダーが描画されます。

border-top-colorとは、上側のボーダーの色を指定するためのプロパティです。初期値は適用対象のcolorプロパティの値ですが、RGB値やキーワードで任意の色を指定することができます。また、transparentを指定すると、幅を確保した状態で透明なボーダーが描画されます。

Functional list
書式	border-color: <value:値>
値	<color>{1,4}
初期値	colorプロパティーの値
適用要素	全ての要素
継承性	不可

border-colorプロパティーは要素の境界線の色を設定します。いちから四つに色彩値が特定されます。四つの値があると、それぞれ上部・右側・下部・左側境界線の色に適用されます。一つの値なら全ての側面に当てられます。二から三の値なら、記載されていない値は反対側から取られてきます。

短縮型である borderも使います。

例:実例: このようになります。

<p
style="border-color:#FFFF00;
border-width:2px;
border-style: solid;
padding:4px">
xxxxx xxxxx xxxxx usw.</p>
<p
style="border-top-color:#FF00FF;
border-left-color:#00FF00;
border-right-color:#3333FF;
border-bottom-color:#FFFF00;
border-width:4px;
border-style: solid; padding:8px">
xxxxx xxxxx xxxxx usw.</p>
<p
style="border-color: cyan yellow;
border-width:8px;
border-style: solid;
padding:16px">
xxxxx xxxxx xxxxx usw.</p>

border-style (枠のタイプ上、左、右、下)

border-styleとは、ボーダーの形式を指定するためのプロパティです。初期値はnoneであり、ボーダーは表示されません。取りうる主な値には、solid（実線）やdotted（点線）、double（2本線）などがあります。値がひとつだけのときには上下左右の各ボーダーを同じ形式で描画しますが、値の数によって上下と左右のそれぞれに同じ形式を指定したり、左右のみに同じ形式を指定したり、あるいは全てのボーダーに異なる形式を指定できます。

border-bottom-styleとは、下側のボーダーの形式を指定するためのプロパティです。初期値はnoneであり、ボーダーは表示されません。取りうる主な値には、solid（実線）やdotted（点線）、double（2本線）などがあります。border-left-styleとは、左側のボーダーの形式を指定するためのプロパティです。初期値はnoneであり、ボーダーは表示されません。取りうる主な値には、solid（実線）やdotted（点線）、double（2本線）などがあります。

border-right-styleとは、右側のボーダーの形式を指定するためのプロパティです。初期値はnoneであり、ボーダーは表示されません。取りうる主な値には、solid（実線）やdotted（点線）、double（2本線）などがあります。

border-top-styleとは、上側のボーダーの形式を指定するためのプロパティです。初期値はnoneであり、ボーダーは表示されません。取りうる主な値には、solid（実線）やdotted（点線）、double（2本線）などがあります。

Functional list
書式	border-style: <value:値>
値	[ none \| dotted \| dashed \| solid \| double \| groove \| ridge \| inset \| outset ]{1,4}
初期値	none
適用要素Applies to:	全ての要素：All elements
継承性	No

border-styleプロパティーは要素の境界線の様式（スタイル）を設定します。このプロパティーは視覚的な場合の境界線用に特定しなくてはなりません。一つから四つのキーワードが特定されます。四つの値があれば、それぞれ上部・右側・下部・左側境界線様式ね適用されます。一つの値なら、全ての側面に適用されます。二から三の値の場合記載ない値は反対側から取られます。短縮型プロパティーであるborderも使います。

例:実例: このようになります。

border (枠)

orderとは、上下左右のボーダーに関する設定を一括して指定するためのプロパティです。具体的には、border-color、border-style、border-bwidthで指定する値を任意の順序でスペースで区切って指定します。ただし、この場合、上下左右に別個の設定を行うことはできません。

Functional list
書式	border: <value:値>
値	<border-width> \|\|<border-style> \|\|<color>
初期値	未定義
適用要素	全ての要素
継承性	不可

borderプロパティーは要素の境界線のwidth・styleそしてcolorを設定する短縮型です。

境界線宣言の例では以下のものを含んでいます：

H2 { border: groove 3em }
A:link { border: solid blue }
A:visited { border: thin dotted #800080 }
A:active { border: thick double red }

borderプロパティーは四つの境界線全てを設定するだけです；ただ一つの境界線幅と境界線様式が与えられます。要素の四つの境界線に異なる値を与えるには、制作者は一つ以上の border-top・ border-right・ border-bottom・ border-left・ border-color・ border-width・ border-style・ border-top-width・ border-right-width・ border-bottom-widthまたは border-left-widthプロパティーを使わなければなりません。

border-width border-style border-color

例:実例: このようになります。

<html>
<head>
<title>border</title>
<style type="text/css">
h1 {
border-bottom:4px double blue;
padding-bottom:4px; margin:0px;
}

h2 {
border-top:1px solid blue;
margin:0px;
}

p.info {
border:1px solid grey;
background-color:#E0E0E0;
padding:4px; margin:0px;
}

body {
font-family:Tahoma,Helvetica,sans-serif;
}

</style>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<h1>Überschrift erster Ordnung</h1>
<p>xxxxx xxxxx xxxxx usw.</p>
<h2>Überschrift zweiter Ordnung</h2>
<p>xxxxx xxxxx xxxxx usw.</p>
<p class="info">xxxxx xxxxx xxxxx usw.</p>
</body>
</html>

HOME スタイルシート枠

枠(BORDER)

boder-width (枠の太さ上、左、右、下)

border-color(枠の色上、左、右、下)

border-style (枠のタイプ上、左、右、下)

border (枠)

目的別属性

広告