ボーダー

Since: 27th/May/2002; Last Modified: 28th/May/2002

本項では、要素の開始線の周りに表示するボーダーを指定します。padding 領域と margin 領域の間が border 領域です。

margin は要素の開始線をずらして、表示可能領域の大きさを変更するものであり、 margin 領域は親要素の領域なので、親要素の背景が使われました。padding は要素の大きさを膨らませるものであり、膨らんだ padding 領域の背景は当該要素の背景が使われました。border に対しては、ボーダーの太さ／種類／色を個別に指定できます。

言い替えると、 border の内側から内容の開始までの領域が padding 領域で、 border から外側が margin 領域です。

図：border があらわす範囲

ボーダーの太さ - `border-width`

ボーダーの太さを指定する CSS プロパティが border-width です。

引数一つ... 上下左右一括指定
引数二つ... 上下指定と左右指定
引数三つ... 上指定、左右指定、下指定
引数四つ... 上指定、右指定、下指定、左指定

`border-width` で指定できる値
`thin`	細い線
`medium`	中くらいの線
`thick`	太い線
`<length>`	具体的な単位と定義は別項参照
`inherit`	親要素での指定を継承

次の例は、 h2 要素の上下のボーダーの太さを４px、左右のボーダーの太さを１em に指定したものです。

h2 { border-width: 4px 1em }

ボーダーの種類 - `border-style`

ボーダーの種類を指定する CSS プロパティが border-style です。

引数一つ... 上下左右一括指定
引数二つ... 上下指定と左右指定
引数三つ... 上指定、左右指定、下指定
引数四つ... 上指定、右指定、下指定、左指定

`border-style` で指定できる値
`none`	ボーダーなし。隣接する要素でボーダーが指定されていればそのボーダーを表示
`hidden`	ボーダーなし。隣接する要素でボーダーが指定されていても強制的に非表示。
`dotted`	点線
`dashed`	破線
`solid`	実線
`double`	二重線
`groove`	窪み線（凹線）
`ridge`	浮き線（凸線）
`inset`	ボーダーは内側への下り傾斜として表現され、要素がキャンバスに埋もれた底面のように表現。
`outset`	要素がキャンバスから浮き上がった天面のように表現。ボーダーは内側への上り傾斜として表現され、要素がキャンバスから浮き上がった天面のように表現。。
`inherit`	親要素での指定を継承

次の例は、h2 のボーダーの種類を、上は二重線、右はなし、下もなし、左は実線に指定したものです。

h2 { border-style: double none none solid }

ボーダーの色 - `border-color`

ボーダーの色を指定する CSS プロパティが border-color です。

引数は１つから４つまでとれます。

引数一つ... 上下左右一括指定
引数二つ... 上下指定と左右指定
引数三つ... 上指定、左右指定、下指定
引数四つ... 上指定、右指定、下指定、左指定

`border-color` で指定できる値
`<color>`	具体的な値と定義は別項参照。
`inherit`	親要素での指定を継承する指定。

選択できる値は、 <color> と inherit です。

次の例は、h2 要素のボーダーの色を、上下左右共に濃紺 (navy) に指定したものです。

h2 { border-color: navy }

ボーダーの完全な指定

ボーダーは、太さ／種類／色の三つを指定して完全に指定された事になります。上の説明で挙げたサンプルを三つ合わせると次のようになります。

h2 { border-width: 4px 1em;
    border-style: double none none solid;
    border-color: navy }

これを適用した HTML 文書は次のように表示されます。

図：簡単な例

これは h2 へのボーダー指定だけをした HTML 文書の表示例です。h2 要素の上ボーダーは細い二重線、左ボーダーは太い実線となり、色が navy になっていることが確認できます。

サンプル

本項でも前項と同じサンプルを使います。

HTML 文書

HTML 文書は三つありますが、さし当たって index.html は次のようになっています：

<?xml version="1.0" encoding="Shift_JIS" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=Shift_JIS" />
<meta http-equiv="content-style-type" content="text/css" />
<title>坂口安吾を考える</title>
<link rel="stylesheet" href="./ango.css" type="text/css" media="screen" />
<?xml-stylesheet href="./ango.css" type="text/css" media="screen" ?>
</head>
<body>
<h1>坂口安吾を考える</h1>
<p><a href="./yonagahime.html">進む</a></p>
<p>坂口安吾は、「堕落論」、「日本文化私観」、「白恥」、「桜の森の満開の下」、
「夜長姫と耳男」などが有名な物書きです。明治３９年新潟に生まれ、第二次大戦後１０
年、昭和３０年に脳溢血で没しました。享年４８歳。無頼派として有名であり、「反逆」
と「堕落」がキーワードです。神田のアテネ・フランセで仏文を学んでいた経験からか、
「生」、「生活」、「肉体」、「実質」にこだわり、「枯淡」、「諦念」、「侘び錆び」
を徹頭徹尾否定します。</p>
<p>私は自分の欲望に忠実である事が「誠実」と言う事だと考えます。己の欲するところ
を外的要因で為さぬのならば、それは単純に敗北を意味する。この点で、常軌を逸したと
ころには必ず真実が宿り、強靭であれば正義だと思っています。逆に言えば、己の為すと
ころは、己の欲するところである事が必然的な結論になります。絶望は愚か者の結論。坂
口安吾は絶望して取り澄ますことを嫌い、七転八倒、顛倒混乱、羞恥の底にもがき苦しむ
ことを望みます。</p>
<p>「好きなものは咒うか殺すか争うかしなければならないのよ。」全く同感です。</p>
<p><a href="./yonagahime.html">進む</a></p>
<address>
Copyright (C) 2002 <a href="mailto:メールアドレス">SUGAI, Manabu</a>.
All rights reserved.
</address>
</body>
</html>

外部スタイルシート

この HTML 文書が参照している外部スタイルシート ango.css は、前項の最後では次のようになっています：

body { background: url("./rindou5.gif") navy;
    color: #ccf }h1 { font-style: italic;
    font-weight: normal;
    font-size: 3em;
    font-family: cursive;
    text-align: center;
    text-decoration: underline overline;
    margin: 1em }
p { background : #ccf;
    color: navy;
    font-weight: bold;
    line-height: 1.5;
    font-family: serif;
    text-indent:1em;
    letter-spacing: 0.2em;
    margin: 1em 5%;
    padding: 1em 2em }
    
address { font-style: normal;
    font-variant: small-caps;
    font-weight: bold;
    font-size: 0.9em;
    line-height: 1;
    font-family: monospace;
    text-align: right;
    margin: 2em 5% 1em;
    padding: 1em }
a:link, a:visited { text-decoration: underline }
a:link { color: #0ff }
a:visited { color: red }
a:hover { color: #ccf; background: navy;
    text-decoration: none }
p a:link, p a:visited { text-decoration: underline }
p a:link { color: navy }
p a:visited { color: maroon }
p a:hover { color: #ccf; background: navy;
	text-decoration: none }

背景画像ファイル

外部スタイルシートでは、 body 要素の背景に次の画像ファイルが使われています。未だ作っていない方は、HTML 文書、外部スタイルシート、画像ファイルを同じディレクトリに保存してください。

図：rindou5.gif

index.html をブラウザで開いて表示を確認してください。

`border` の指定

p 要素にボーダーを、上下は２px、左右は１em、上下左右共に実線 (solid)、紫 (purple) を指定します。また、 address 要素にボーダーを、上下左右共に、２px、実線、薄紫 (#73a) を指定します。

ango.css を次のように編集して保存してください。

body { background: url("./rindou5.gif") navy;
    color: #ccf }
h1 { font-style: italic;
    font-weight: normal;
    font-size: 3em;
    font-family: cursive;
    text-align: center;
    text-decoration: underline overline;
    margin: 1em }
p { background : #ccf;
    color: navy;
    font-weight: bold;
    line-height: 1.5;
    font-family: serif;
    text-indent:1em;
    letter-spacing: 0.2em;
    margin: 1em 5%;
    padding: 1em 2em;
    border-width: 2px 1em;
    border-style: solid;
    border-color: purple }
address { font-style: normal;
    font-variant: small-caps;
    font-weight: bold;
    font-size: 0.9em;
    line-height: 1;
    font-family: monospace;
    text-align: right;
    margin: 2em 5% 1em;
    padding: 1em;
    border-width: 2px;
    border-style: solid;
    border-color: #73a }
a:link, a:visited { text-decoration: underline }
a:link { color: #0ff }
a:visited { color: red }
a:hover { color: #ccf; background: navy;
    text-decoration: none }
p a:link, p a:visited { text-decoration: underline }
p a:link { color: navy }
p a:visited { color: maroon }
p a:hover { color: #ccf; background: navy;
	text-decoration: none }

index.html をブラウザで開くと、 p 要素と address 要素の周囲にボーダーが表示されているのを確認できます。

図： border 指定した表示例