ホームページの基礎（2. CSS 編）

2.12 ボックスモデル（ボーダー）

このページでは，ボックスモデルにおけるボーダー幅，色，形状に関する各プロパティについて説明します。

2.12.1 ボーダー幅のプロパティ

ボーダー幅を設定するプロパティには，「border-top-widthプロパティ（上ボーダー）」，「border-bottom-widthプロパティ（下ボーダー）」，「border-left-widthプロパティ（左ボーダー）」，「border-right-widthプロパティ（右ボーダー）」，およびこれら４種類のプロパティの 一括指定を行う簡略記法の「border-widthプロパティ」がある。

"border-top-width"，"border-bottom-width"，"border-left-width"，"border-right-width"の各プロパティの書式は以下のとおりです。

border-top-width，border-bottom-width，border-left-width，border-right-widthプロパティ
値	<ボーダー幅> | inherit
初期値	medium
適用対象	すべての要素
継承	しない
パーセント値	受けつけない

border-widthプロパティは上下左右のボーダー幅を一括して指定された値で等し指定されます。 その書式は以下のとおりです。

border-widthプロパティ
値	<ボーダー幅>{1,4} | inherit
初期値	個別のプロパティを参照する
適用対象	すべての要素
継承	しない
パーセント値	受けつけない

<ボーダー幅>に指定する値は次に示すとおりです。

thin

細い幅(※ 実際の幅は，ブラウザに依存します。)を意味するキーワードです。

medium

中間の幅(※ 実際の幅は，ブラウザに依存する。)を意味するキーワードです。

thick

太い幅(※ 実際の幅は，ブラウザに依存する。)を意味するキーワードです。

<長さ>

ボーダー幅をemやexなどの単位付き数値で指定する。負の数値を指定することはできません。

"border-widthプロパティ"の４つの値の指定方法は，"marginプロパティ"と同じです。

• ボーダー幅が「１つだけ指定」されている場合は，「上下左右のボーダー幅<」が指定された値で等し設定されます。

  p { border-width: thin }

• ボーダー幅が「２つ指定」されている場合は，最初に指定された値で「上下ボーダー」を等しく，２番目に指定された値で「左右ボーダー」を等しく設定します。

  p { border-width: thin 2em }

• ボーダー幅が「３つ指定」されている場合は，最初に指定された値で「上ボーダー」を，２番目に指定された値で「左右ボーダー」を等しく， ３番目に指定された値で「下ボーダー」を設定します。

  p { border-width: thin medium thick }

• ボーダー幅が「４つ指定」されている場合は，最初に指定された値で「上ボーダー」を，２番目に指定された値で「右ボーダー」を， ３番目に指定された値で「下ボーダー」を，４番目に指定された値で「左ボーダー」をそれぞれ設定します。

  p { border-width: 1em 2em 3em 4em }

CSS総目次 | ページ先頭に戻る

2.12.2 ボーダー色のプロパティ

ボーダーの色を設定するプロパティには，「border-top-colorプロパティ（上ボーダー）」，「border-bottom-colorプロパティ（下ボーダー）」，「border-left-colorプロパティ（左ボーダー）」，「border-right-colorプロパティ（右ボーダー）」，およびこれら４種類のプロパティの一括指定を行う簡略記法の「border-colorプロパティ」があります。

"border-top-width"，"border-bottom-width"，"border-left-width"，"border-right-width"の各プロパティの書式は以下のとおりです。

border-top-color，border-bottom-color，border-left-color，border-right-colorプロパティ
値	<ボーダー色> | transparent | inherit
初期値	colorプロパティを参照する
適用対象	すべての要素
継承	しない
パーセント値	受けつけない

「border-colorプロパティ」は上下左右のボーダー色を一括して指定します。その書式は以下のとおりです。

border-colorプロパティ
値	[<ボーダー色> | transparent]{1,4} | inherit
初期値	個別のプロパティを参照する
適用対象	すべての要素
継承	しない
パーセント値	受けつけない

<ボーダー色>

ボーダーの色を指定します。

transparent

ボーダーの色を透明にします。ボーダー幅が指定されている場合，指定された幅で透明な領域が確保されます。

"border-color"プロパティの４つの値の指定方法は，"marginプロパティ"と同じです。

• ボーダーの色が「１つだけ指定」されている場合は，「上下左右のボーダー色」が指定された値で等しく設定されます。

  p { border-color: red }

• ボーダーの色が「２つ指定」されている場合は，最初に指定された値で「上下ボーダー色」を等しく，２番目に指定された値で「左右ボーダー色」を等しく設定します。

  p { border-color: red #ff0000 }

• ボーダーの色が「３つ指定」されている場合は，最初に指定された値で「上ボーダー色」を，２番目に指定された値で「左右ボーダー色」を等しく，３番目に指定された値で「下ボーダー色」を設定します。

  p { border-color: red #f00 transparent }

• ボーダーの色が「４つ指定」されている場合は，最初に指定された値で「上ボーダー色」を，２番目に指定された値で「右ボーダー色」を，３番目に指定された値で「下ボーダー色」を，４番目に指定された値で「左ボーダー色」をそれぞれ設定します。

  p { border-color: red rgb(255,0,0) rgb(100%,0%,0%) #ff0000 }

CSS総目次 | ページ先頭に戻る

2.12.3 ボーダー形状のプロパティ

ボーダーの形状を設定するプロパティには，「border-top-styleプロパティ（上ボーダー）」，「border-bottom-styleプロパティ（下ボーダー）」，「border-left-styleプロパティ（左ボーダー）」，「border-right-styleプロパティ（右ボーダー）」，およびこれら４種類のプロパティの一括指定を行う簡略記法の「border-styleプロパティ」があります。

"border-top-style"，"border-bottom-style"，"border-left-style"，"border-right-style"の各ボーダー形状のプロパティは，以下の書式で指定します。

border-top-style，border-bottom-style，border-left-style，border-right-styleプロパティ
値	<ボーダー形状> | inherit
初期値	none
適用対象	すべての要素
継承	しない
パーセント値	受けつけない

「border-styleプロパティ」は上下左右のボーダー形状を一括して指定します。その書式は以下のとおりです。

border-styleプロパティ
値	<ボーダー形状>{1,4} | inherit
初期値	個別のプロパティを参照する
適用対象	すべての要素
継承	しない
パーセント値	受けつけない

<ボーダー形状>は以下のキーワードで指定します。

none

ボーダーなし。border-widthの計算値を０とします。

hidden

noneと同じ。ただし，表要素の境界競合に関する部分が異なります(※ 境界結合の解決については割愛します。詳しくはCSSの仕様書を参照してください。)。

dotted

ボーダー形状を点線とします。

dashed

ボーダー形状を破線とします。

solid

ボーダー形状を１重の実線とします。

double

ボーダー形状を２重の実線とします。

groove

ボーダー形状を刻み込んだ実線とします。

ridge

ボーダー形状を浮き出た実線とします。

inset

ボックス全体を埋め込んだように見せる形状です。

outset

ボックス全体を浮き出たように見せる形状です。

"border-styleプロパティ"の４つの値の指定方法は，"marginプロパティ"と同じです。

• ボーダーの形状が「１つだけ指定」されている場合は，「上下左右のボーダー形状」が指定された値で等しく設定されるます。

  p { border-style: none }

• ボーダーの形状が「２つ指定」されている場合は，最初に指定された値で「上下ボーダー形状」を等しく，２番目に指定された値で「左右ボーダー形状」を等しく設定します。

  p { border-style: solid dotted }

• ボーダーの形状が「３つ指定」されている場合は，最初に指定された値で「上ボーダー形状」を，２番目に指定された値で「左右ボーダー形状」を等しく，３番目に指定された値で「下ボーダー形状」を設定します。

  p { border-style: solid dashed double }

• ボーダーの形状が「４つ指定」されている場合は，最初に指定された値で「上ボーダー形状」を，２番目に指定された値で「右ボーダー形状」を，３番目に指定された値で「下ボーダー形状」を，４番目に指定された値で「左ボーダー形状」をそれぞれ設定します。

  p { border-style: solid dashed solid dotted }

CSS総目次 | ページ先頭に戻る

2.12.4 ボーダー幅，色，形状の一括指定

各ボーダーの幅，色，形状を一括で設定するプロパティに，「border-topプロパティ（上ボーダー）」，「border-bottomプロパティ（下ボーダー）」，「border-leftプロパティ（左ボーダー）」，「border-rightプロパティ（右ボーダー）」，およびこれら４種類のプロパティ，つまり上下左右ボーダーに同一の幅，色，形状を一括指定する簡略記法の「borderプロパティ」があります。

各ボーダーのプロパティは，以下の書式で指定します。

border-top，border-bottom，border-left，border-rightプロパティ
値	[<ボーダー幅> || <ボーダー色> || <ボーダー形状>] | inherit
初期値	各プロパティを参照する
適用対象	すべての要素
継承	しない
パーセント値	受けつけない

「borderプロパティ」は上下左右のボーダー幅，色，形状を同一にして一括指定します。その書式は以下のとおりです。

borderプロパティ
値	[<ボーダー幅> || <ボーダー色> || <ボーダー形状>] | inherit
初期値	各プロパティを参照する
適用対象	すべての要素
継承	しない
パーセント値	受けつけない

以下に例を示しておきます。

h1 { border-left: 2em solid #080 }
h2 { border: 2px solid #ccc }
blockquote {
    border-left:  3px dashed #ccc;
    border-right: 3px dashed #ccc;
}

CSS総目次 | ページ先頭に戻る