XHTML/CSS・トップ | CSSプロパティ・目次

●枠線をまとめて指定する(応用編)

 枠線の種類、太さ、色を上下左右の枠線ごとに詳細に指定する方法を解説します。(二通り、解説します。)

■ border-style は枠線の種類を指定するプロパティです。すべての要素に適用でき、値を1〜4個並べて上下左右の枠線の種類を個別に指定することができます。

■ border-width は枠線の太さを指定するプロパティです。すべての要素に適用でき、値を1〜4個並べて上下左右の枠線の太さを個別に指定することができます。

■ border-color は枠線の色を指定するプロパティです。すべての要素に適用でき、値を1〜4個並べて上下左右の枠線の色を個別に指定することができます。


■値として指定できる枠線の種類

種類 説明
dashed 破線
dotted 点線
double 二重線
groove 彫り線、みぞ線
hidden 隠れという意味があり、非表示のこと
inset 差し込み線、要素をへこませたような効果
none 非表示
outset insetとは逆に要素を浮き上がらせる効果
ridge 山脈の意味があり、浮き彫り効果の線
solid 実線

■値として、1〜4個指定する

※ 値を1〜4個の範囲内で指定し、値は半角スペースで区切ります。

値が一個 上下左右の枠線

値が二個 最初の値が上下、二つ目の値が左右の枠線

値が三個 上、左右、下の枠線

値が四個 上、右、下、左の枠線


【CSS】

body {
 background-color: #000000;
 color: #ffffff
}
.sample1 {
 border-style: solid dotted double dashed;
 border-color: #ff00ff #ffff00 #00ffff #c0c0c0;
 border-width: 18px 14px 16px 20px
}
.sample2 {
 border-style: groove inset outset ridge;
 border-color: #ff00ff #ffff00 #00ffff #c0c0c0;
 border-width: 18px 14px 16px 20px
}


【HTML】

<p class="sample1">省略</p>
<p class="sample2">省略</p>

※クラス名の使い方は別項を参照にしてください。


 ここの p要素(段落)は上の枠線に solid(実線)、#ff00ffの色、18pxの太さを指定し、右の枠線には dotted(点線)、#ffff00の色、14pxの太さ、下の枠線は double(二重線)、#00ffffの色、16pxの太さ、左の枠線には dashed(破線)、#c0c0c0の色、20pxの太さをそれぞれ指定しています。

 こちらの p要素には上の枠線に groove(彫り線)、#ff00ffの色、18pxの太さを指定し、右の枠線には inset(差し込み線)、#ffff00の色、14pxの太さ、下の枠線は outset(要素を前面に出す効果)、#00ffffの色、16pxの太さ、左の枠線には ridge(浮き彫り線)、#c0c0c0の色、20pxの太さをそれぞれ指定しています。

※ p要素に適用していますが、基本的にはすべての要素に適用することができます。また、ここでは指定していませんが、要素に枠線を適用した場合、枠線と内容領域との中間にパディング(padding)を考りょしなければならない場合があります。例えば、p要素に枠線を適用したとき、文章と枠線との中間として適度のパディングがあったほうが見やすくなります。


■まとめ

 border-style プロパティは border-top-style、border-bottom-style、border-left-style、border-right-style のプロパティを一度に指定するときに使います。

 border-color プロパティは border-top-color、border-bottom-color、border-left-color、border-right-color プロパティを一度に指定するときに使います。

 border-width プロパティは border-top-width、border-bottom-width、border-left-width、border-right-width プロパティを一度に指定するときに使います。

 本稿ではこれらのプロパティの解説は割愛しますが、それぞれに値を付けて、同じように上下左右の枠線に個別に種類、太さ、色を指定することができます。

.sample {
 border-top-width: 18px;
 border-right-width: 14px;
 border-bottom-width: 16px;
 border-left-width: 20px
}

 border-width プロパティの値の単位として、px(ピクセル)を使っていますが、使える値は長さを表す単位付きの数値となります。それ以外に使えるキーワードとして、thin(細い)、medium(中間)、thick(太い)があります。なお、枠線の種類のデザインおよび、枠線の実際の太さなどはブラウザの種類に影響されます。


■次の方法でも種類、太さ、色を一度に指定することができます。

【CSS】

.sample3 {
 border-top: solid 18px #ff00ff;
 border-bottom: double 16px #00ffff;
 border-left: dashed 20px #c0c0c0;
 border-right: dotted 14px #ffff00
}
.sample4 {
 border-top: groove 18px #ff00ff;
 border-bottom: outset 16px #00ffff;
 border-left: ridge 20px #c0c0c0;
 border-right: inset 14px #ffff00
}

 ここの p要素(段落)は上の枠線に solid(実線)、#ff00ffの色、18pxの太さを指定し、下の枠線は double(二重線)、#00ffffの色、16pxの太さ、左の枠線には dashed(破線)、#c0c0c0の色、20pxの太さ、右の枠線には dotted(点線)、#ffff00の色、14pxの太さをそれぞれ指定しています。

 こちらの p要素には上の枠線に groove(彫り線)、#ff00ffの色、18pxの太さを指定し、下の枠線は outset(要素を前面に出す効果)、#00ffffの色、16pxの太さ、左の枠線には ridge(浮き彫り線)、#c0c0c0の色、20pxの太さ、右の枠線には inset(差し込み線)、#ffff00の色、14pxの太さをそれぞれ指定しています。


【HTML】

<p class="sample3">省略</p>
<p class="sample4">省略</p>

【総括】

 最初のサンプルと表示はまったく同じですが、CSSソースの内容と手法は異なっています。どちらか使いやすいほうを選択すると良いでしょう。


※参照ページ

XHTML/CSS・目次 | 領域(ボックス)・目次

Copyright (C) 2005-2007 http://www.xml.vc/