Dreamweaver TechniqueJAVA Script サンプル | CSS sample | JAVA Applet sample | Flash Sample
HTML4.0 reference | DynamicHTMLXHTML | XML sample | XSLT sample | RIKO's ASP Trial
ASP ADO リファレンス | PHP関数リファレンス | MySQL関数リファレンス

枠線のスタイル指定

■ 枠線のスタイル指定

これらのプロパティは、枠線の色を指定します。
「border-color」を指定すると、上下左右の枠線を一度に設定することができます。その場合、値を半角スペースで区切って指定しますが、与えられた値の個数によって、次のように枠線の色が指定されます。

値が1つの場合 値1→上下左右
値が2つの場合 値1→上下 値2→左右
値が3つの場合 値1→上 値2→左右 値3→下
値が4つの場合 値1→上 値2→右 値3→下 値4→左

なお、この値の初期値は、「color:色指定」で設定されている値となります。

■ 作例

HTMLソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>枠線の形式を指定する</title>
<style type="text/css">
<!--
body { margin: 2em }
p {
text-align: center;
font-weight: bold;
padding: 0.5em;
border: solid 8px #ff3300;
}
#sample1 { border-style: none }
#sample2 { border-style: solid }
#sample3 { border-style: double }
#sample4 { border-style: dashed }
#sample5 { border-style: dotted }
#sample6 { border-style: groove }
#sample7 { border-style: ridge }
#sample8 { border-style: inset }
#sample9 { border-style: outset }
-->
</style>
</head>
<body>
<p id="sample1">none</p>
<p id="sample2">solid</p>
<p id="sample3">double</p>
<p id="sample4">dashed</p>
<p id="sample5">dotted</p>
<p id="sample6">groove</p>
<p id="sample7">ridge</p>
<p id="sample8">inset</p>
<p id="sample9">outset</p>
</body>
</html>

<<<戻る

R HOUSE | RIKO's Trial Page | Shirley's Pettit Case | Shirley's i-box | Shirley's little box | CSS Trial