CSS解説 : Shorthand Properties (border)
概要
この文書は、World Wide Web Consortium W3Cの提供しているCSSのテストサイトについて解説しています。
ここでは、CSS2.1 1.4.3 Shorthand properties (border)のテストについて解説を行います。
解説
プロパティ
borderは簡略プロパティ(shorthand property)と呼ばれるプロパティです。一つの指定で、ボックスの四辺に幅(width)、枠線の種類(style)、色(color)を指定します。例えば、次の指定は等価なものとして扱われます。
P { border : 1px solid blue }
P {
border-top : 1px solid blue;
border-right : 1px solid blue;
border-bottom: 1px solid blue;
border-left : 1px solid blue;
}
幅、線種、色の3つがそろっていなくても指定できます
P {
border: 1px solid;
}
上記の例の場合、枠線の色は、colorの値を参照します。
テスト解説
W3Cの CSS Test: Shorthand Properties (border)は下記のようになっています。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>CSS 2.1 Test Suite: Shorthand Properties (border)</title>
<link rel="author" href="http://dbaron.org/" title="L. David Baron">
<link rel="help" href="http://www.w3.org/TR/CSS21/about.html#shorthand">
<style type="text/css">
body { background: white; }
span { color: black; }
p { color: red; }
p { border-color: red; }
p { border: medium solid; }
p { color: green; }
</style>
</head>
<body>
<p><span>This text should have a green border.</span></p>
</body>
</html>
上記のCSS指定で見てみると、
body { background: white; } (1)
span { color: black; } (2)
p { color: red; } (3)
p { border-color: red; } (4)
p { border: medium solid; } (5)
p { color: green; } (6)
まず、(1)で全体の背景が白なります。
(2)では、This～border.までを囲んでいる<span>タグに対し、文字色を黒に指定しています。
(3)では<span>タグを囲んでいるPタグの文字色を赤に指定していますが、タグとして内側にある(2)の指定が有効になり、文字色は黒くなります
次に、(4)の指定ではborderの色を赤に設定しています。
(5)で指定した
p { border: medium solid; }
について、borderプロパティが、medium, solid という幅とスタイル値の他に、指定されていない色の値を設定してしまいます。
明示的に指定されていない場合、colorで指定された値をborder-colorとして設定します。
テストコンテンツでは(3)と(6)の2回colorの指定を行っています。CSSでは、スタイル指定で詳細度が、同じものは後に登場したものが優先されます。
したがって(6)の設定が
colorとして設定されます。結果、このスタイルでは、borderはgreen, medium, solidと設定され、緑色の枠が表示されます。
