SITEMAP [初めてのホームページ講座] [CSS] [CSS1] [プロパティ一覧][ボックス] [ボーダー]

CSS1 Reference

プロパティ

4. ボックス

ボックス系のプロパティとして、「マージン」「ボーダー」「パディング」が存在します。 この他にも幅や高さなどのプロパティを「その他」としてまとめました。 ボックス系の詳細の説明は、「整形モデル」に記してありますので参照して下さい。

4-3. ボーダー

ボーダーは、ブロックレベル要素インライン要素とで、 その枠線の付き方が変わってきます。ブロックレベル要素の場合は要素全体を1まとめにした枠線になりますが、 インライン要素の場合は1行1行に枠線が付きます。全体を囲みたい場合は、ブロックレベル要素にする必要があります。 代表的なHTMLに、DIV要素(汎用的なブロックレベル要素)があります。 (が、文法は守りましょう。例えば、P要素内にDIV要素は指定できません。 DIV要素を用いる場合は、<P>の後には</P>を付ける必要があります。・・・本来は省略可能ですが)

また、多くのプロパティが存在する分、その指定順序に留意しなければなりません。 例えば、ボーダー全体を指定しておいて、その後に上ボーダーを再度指定し直し、その際にある値を省略した場合などです。 サンプルを例に取ると、

P{
   font-size  : 36pt;             /*フォントサイズ36pt:でかい*/
   color      : blue;             /*フォントカラーを青*/
   text-align : center;           /*テキスト位置を中央寄せ*/
   border     : 0.8em solid red;  /*全ボーダーを36ptの0.8倍、実線、赤*/
   border-top : 0.8em solid;      /*上ボーダーを36ptの0.8倍、実線*/
   /*上ボーダーカラー未指定なのでフォントカラー青が初期値として用いられる*/
   /*NN4はならないのでバグ(^^;;  しかもこのサンプルもブロックレベルなのにインライン扱い・・・*/
}

4-3-1. border-top-width

thin | medium | thick | <length>
初期値
medium
適用要素
全て
継承性
無し
割合指定
無し
UL{
   border-style        : solid;     /*UL要素のボーダースタイルを実線*/
   border-color        : #0000ff;   /*UL要素のボーダーカラーを青*/
   border-top-width    : 1em;       /*UL要素の上ボーダーをフォントサイズの 1倍*/ 
   border-right-width  : 2em;       /*UL要素の右ボーダーをフォントサイズの 2倍*/
   border-bottom-width : 1em;       /*UL要素の下ボーダーをフォントサイズの 1倍*/
   border-left-width   : 2em;       /*UL要素の左ボーダーをフォントサイズの 2倍*/
}

上ボーダー(枠線)の幅を指定をします。 負の値は使用できません。

thin
細い
medium
普通
thick
太い

上記の曖昧な表現は、実際のボーダーの太さがブラウザに依るからです。 ただし、太さ関係は「thin」<=「medium」<=「thick」となります。

[Go To Top]

4-3-2. border-right-width

thin | medium | thick | <length>
初期値
medium
適用要素
全て
継承性
無し
割合指定
無し
UL{
   border-style        : solid;     /*UL要素のボーダースタイルを実線*/
   border-color        : #0000ff;   /*UL要素のボーダーカラーを青*/
   border-top-width    : 1em;       /*UL要素の上ボーダーをフォントサイズの 1倍*/ 
   border-right-width  : 2em;       /*UL要素の右ボーダーをフォントサイズの 2倍*/
   border-bottom-width : 1em;       /*UL要素の下ボーダーをフォントサイズの 1倍*/
   border-left-width   : 2em;       /*UL要素の左ボーダーをフォントサイズの 2倍*/
}

右ボーダー(枠線)の幅を指定をします。 負の値は使用できません。

thin
細い
medium
普通
thick
太い

上記の曖昧な表現は、実際のボーダーの太さがブラウザに依るからです。 ただし、太さ関係は「thin」<=「medium」<=「thick」となります。

[Go To Top]

4-3-3. border-bottom-width

thin | medium | thick | <length>
初期値
medium
適用要素
全て
継承性
無し
割合指定
無し
UL{
   border-style        : solid;     /*UL要素のボーダースタイルを実線*/
   border-color        : #0000ff;   /*UL要素のボーダーカラーを青*/
   border-top-width    : 1em;       /*UL要素の上ボーダーをフォントサイズの 1倍*/ 
   border-right-width  : 2em;       /*UL要素の右ボーダーをフォントサイズの 2倍*/
   border-bottom-width : 1em;       /*UL要素の下ボーダーをフォントサイズの 1倍*/
   border-left-width   : 2em;       /*UL要素の左ボーダーをフォントサイズの 2倍*/
}

下ボーダー(枠線)の幅を指定をします。 負の値は使用できません。

thin
細い
medium
普通
thick
太い

上記の曖昧な表現は、実際のボーダーの太さがブラウザに依るからです。 ただし、太さ関係は「thin」<=「medium」<=「thick」となります。

[Go To Top]

4-3-4. border-left-width

thin | medium | thick | <length>
初期値
medium
適用要素
全て
継承性
無し
割合指定
無し
UL{
   border-style        : solid;     /*UL要素のボーダースタイルを実線*/
   border-color        : #0000ff;   /*UL要素のボーダーカラーを青*/
   border-top-width    : 1em;       /*UL要素の上ボーダーをフォントサイズの 1倍*/ 
   border-right-width  : 2em;       /*UL要素の右ボーダーをフォントサイズの 2倍*/
   border-bottom-width : 1em;       /*UL要素の下ボーダーをフォントサイズの 1倍*/
   border-left-width   : 2em;       /*UL要素の左ボーダーをフォントサイズの 2倍*/
}

左ボーダー(枠線)の幅を指定をします。 負の値は使用できません。

thin
細い
medium
普通
thick
太い

上記の曖昧な表現は、実際のボーダーの太さがブラウザに依るからです。 ただし、太さ関係は「thin」<=「medium」<=「thick」となります。

[Go To Top]

4-3-5. border-width

[thin | medium | thick | <length>]{1,4}
初期値
各プロパティ参照(border-top-width,border-right-width,border-bottom-width,border-left-width
適用要素
全て
継承性
無し
割合指定
無し
UL{
   border-style : solid;     /*UL要素のボーダースタイルを実線*/
   border-color : #0000ff;   /*UL要素のボーダーカラーを青*/
   border-width : 1em 2em;   /*UL要素の上下、右左ボーダーをフォントサイズの 1倍 2倍*/ 
}

このプロパティは、border-top-width,border-right-width , border-bottom-width,border-left-width同時に指定可能です。 指定する値は1〜4個の任意で、指定した数により下表のように適用されます。 ただし、基本的に「上」「右」「下」「左」の順(0時から時計回りと覚えると良い)で指定します。 効率良い指定が可能です。

適用ボーダー
AAAAA
A , BABAB
A , B , CABCA
A , B , C , DABCD
thin
細い
medium
普通
thick
太い

上記の曖昧な表現は、実際のボーダーの太さがブラウザに依るからです。 ただし、太さ関係は「thin」<=「medium」<=「thick」となります。

[Go To Top]

4-3-6. border-color

[<color>]{1,4}
初期値
color」プロパティ値
適用要素
全て
継承性
無し
割合指定
無し
BODY{
   color        : #000000;   /*文書全体のフォントカラーを黒*/
}
P{
   border-style : solid;     /*P要素のボーダースタイルを実線*/
   border-width : 1em;       /*P要素の全ボーダーをフォントサイズの 1倍*/
   /*ボーダーカラーはBODY要素のフォントカラーを継承し黒*/ 
}
UL{
   border-style : solid;     /*UL要素のボーダースタイルを実線*/
   border-color : #0000ff;   /*UL要素のボーダーカラーを青*/
   border-width : 1em 2em;   /*UL要素の上下、右左ボーダーをフォントサイズの 1倍 2倍*/ 
}

ボーダー(枠線)の色を指定をします。 このプロパティは、一括指定が可能なプロパティで(逆に一辺ずつ色の指定をするプロパティは無い)、 指定する値は1〜4個の任意、指定した数により下表のように適用されます。 ただし、基本的に「上」「右」「下」「左」の順(0時から時計回りと覚えると良い)で指定します。

適用ボーダー
AAAAA
A , BABAB
A , B , CABCA
A , B , C , DABCD
[Go To Top]

4-3-7. border-style

none | dotted | dashed | solid | double | groove | ridge | inset | outset
初期値
none
適用要素
全て
継承性
無し
割合指定
無し
UL{
   /*こちらはスタイルが「none」のためボーダーは非表示*/
   border-color : #0000ff;   /*UL要素のボーダーカラーを青*/
   border-width : 1em;       /*UL要素の全ボーダーをフォントサイズの 1倍*/ 
}
UL UL{
   border-style : solid;     /*UL要素内のUL要素のボーダースタイルを実線*/
   border-color : #0000ff;   /*UL要素内のUL要素のボーダーカラーを青*/
   border-width : 1em;       /*UL要素内のUL要素の全ボーダーをフォントサイズの 1倍*/ 
}

ボーダー(枠線)のスタイルを指定をします。 このプロパティは、一括指定が可能なプロパティで(逆に一辺ずつスタイルの指定をするプロパティは無い)、 指定する値は1〜4個の任意、指定した数により下表のように適用されます。 ただし、基本的に「上」「右」「下」「左」の順(0時から時計回りと覚えると良い)で指定します。

none
非表示 ( サンプル )
dotted
点線 ( サンプル )
dashed
波線 ( サンプル )
solid
実線 ( サンプル )
double
2重線(線間のマージンも込みでボーダーの幅として扱う) ( サンプル )
groove
ボーダーを立体的な窪み ( サンプル )
ridge
ボーダーを立体的な隆起 ( サンプル )
inset
内部を立体的な窪み ( サンプル )
outset
内部を立体的な隆起 ( サンプル )

プロパティ値において、Cascading Style Sheets, level 1(REC-CSS1-19990111)では、 「Value: none | dotted | dashed | solid | double | groove | ridge | inset | outset」となっています。 が、記述の中では{1,4}的であり、更にサンプルもそうなっているので、勝手に{1,4}を付け加えました。(^^;;

CSS1コア:「none」以外は「solid」として扱っても良い(サンプルで説明通りに表示されなければお使いのブラウザがサポートしていない証拠です)

[Go To Top]

4-3-8. border-top

<border-top-width> || <border-style> || <color>
初期値
各プロパティ参照( border-top-width , border-style , border-color )
適用要素
全て
継承性
無し
割合指定
無し
H1{
   border-top : medium solid #0000ff;   /*H1要素の上ボーダーのみを幅普通、実線、青に指定*/
   /*上以外のボーダーは初期値の非表示になります*/
}

上ボーダー(枠線)の幅、スタイル、色を同時に指定します。 ボーダーの一辺だけを指定したいときに有効です。

[Go To Top]

4-3-9. border-right

<border-right-width> || <border-style> || <color>
初期値
各プロパティ参照( border-right-width , border-style , border-color )
適用要素
全て
継承性
無し
割合指定
無し
H1{
   border-right : medium solid #0000ff;   /*H1要素の右ボーダーのみを幅普通、実線、青に指定*/
   /*右以外のボーダーは初期値の非表示になります*/
}

右ボーダー(枠線)の幅、スタイル、色を同時に指定します。 ボーダーの一辺だけを指定したいときに有効です。

[Go To Top]

4-3-10. border-bottom

<border-bottom-width> || <border-style> || <color>
初期値
各プロパティ参照( border-bottom-width , border-style , border-color )
適用要素
全て
継承性
無し
割合指定
無し
H1{
   border-bottom : medium solid #0000ff;   /*H1要素の下ボーダーのみを幅普通、実線、青に指定*/
   /*下以外のボーダーは初期値の非表示になります*/
}

下ボーダー(枠線)の幅、スタイル、色を同時に指定します。 ボーダーの一辺だけを指定したいときに有効です。

[Go To Top]

4-3-11. border-left

<border-left-width> || <border-style> || <color>
初期値
各プロパティ参照( border-left-width , border-style , border-color )
適用要素
全て
継承性
無し
割合指定
無し
H1{
   border-left : medium solid #0000ff;   /*H1要素の左ボーダーのみを幅普通、実線、青に指定*/
   /*左以外のボーダーは初期値の非表示になります*/
}

左ボーダー(枠線)の幅、スタイル、色を同時に指定します。 ボーダーの一辺だけを指定したいときに有効です。

[Go To Top]

4-3-12. border

<border-width> || <border-style> || <color>
初期値
各プロパティ参照( border-width , border-style , border-color )
適用要素
全て
継承性
無し
割合指定
無し
P{
   border : thin solid #0000ff;   /*P要素の全ボーダーのみを細幅、実線、青に指定*/
}

全てのボーダー(枠線)の幅、スタイル、色を同時に指定します。 ボーダーを個々に指定する必要がないときはこのプロパティを使用します。

[Go To Top]

Last modified Apr,2002
Copyright(C)1999 Miyazaki , All Rights Reserved.