ボックススタイル

ボックス・プロパティー

ボックス・プロパティでは、ブロック要素に対する様々なスタイルを定義します。

MARGIN
PADDING
BORDER
幅（Width）
高さ（Height）
回り込み回避（Float）
回り込み回避解除（Clear）
ボックス指定の注意事項

margin-top上部マージン

Functional list
書式	margin-top: <value:値>
値	<length> \|<percentage> \| auto
Initial value:値:	0
適用要素	全ての要素
継承性	不可

margin-topプロパティーはlengthかpercentageを特定することで、要素の上方マージンを設定します。パーセント値は親要素幅を参照します。マイナス・マージンも許されます。

例えば、以下の規則は文書の上方マージンを除きます：

BODY { margin-top: 0 }

垂直マージンを結び付け、マージン値の最高を使うと破綻することに注意して下さい。

例css/ex/margin-top.html

margin-right右側マージン

margin-rightとは、右のマージンを指定するためのプロパティです。値は数値に単位をつけて指定、もしくは自動的に設定する際にはautoを指定します。マージンにはマイナスを指定することができます。

Functional list
書式	margin-right: <value:値>
値	<length> \|<percentage> \| auto
初期値	0
適用要素	全ての要素
継承性	No

margin-rightプロパティーは、lengthかpercentageを特定して、要素の右マージンを設定します。パーセント値は親要素幅を参照します。

負のマージンも許されます。

P.narrow { margin-right: 50% }

水平方向のマージンを結び付ても破綻しないことを知っておく。

例css/ex/margin-right.html

margin-bottom下部マージン

margin-bottomとは、下のマージンを指定するためのプロパティです。値は数値に単位をつけて指定、もしくは自動的に設定する際にはautoを指定します。マージンにはマイナスを指定することができます。

Functional list
書式	margin-bottom: <value:値>
値	<length> \|<percentage> \| auto
初期値	0
適用要素	全ての要素
継承性	不可No

margin-bottomプロパティーは、lengthかpercentageを特定して、要素の下部マージンを設定します。パーセント値は親要素幅を参照します。負のマージンは許されます。

DT { margin-bottom: 3em }

垂直マージンを結び付け、マージン値の最大値を使うと破綻することに注意しておきます。

例css/ex/margin-bottom.html

margin-left左側マージン

margin-leftとは、左のマージンを指定するためのプロパティです。値は数値に単位をつけて指定、もしくは自動的に設定する際にはautoを指定します。マージンにはマイナスを指定することができます。

Functional list
書式	margin-left: <value:値>
値	<length> \|<percentage> \| auto
初期値	0
適用要素	全ての要素：
継承性	不可

margin-leftプロパティーは、lengthかpercentageを特定して、要素の左マージンを設定します。パーセント値は親要素幅を参照します。負マージンも許されます。

ADDRESS { margin-left: 50% }

水平方向マージンと結び付けても破綻されません。

例css/ex/margin-left.html

marginマージン

marginとは、上下左右のマージンに関する設定を一括して指定するためのプロパティです。値がひとつだけのときには全てのマージンを等しく指定しますが、値の数によって上下と左右のそれぞれを等しく指定したり、左右のみを等しく指定したり、あるいは全てのマージンに異なる値を指定できます。値は数値に単位をつけて指定、もしくは自動的に設定する際にはautoを指定します。

Functional list
書式	margin: <value:値>
値	[<length> \|<percentage> \| auto ]{1,4}
初期値	未定義
適用要素	全ての要素
継承性	不可

marginプロパティーは、一つから四つの値を特定して要素のマージンを設定し、各値はlength・percentageまたは autoです。パーセント値は親要素の幅を参照します。負のマージンは許されます。四つの値が与えられるなら、上部・右・下部・左マージンそれぞれに、適用されます。二つか三つなら、見当たらない値は反対の側から取られます。

マージン宣言の例です：

BODY { margin: 5em } /* 全マージン 5em */

P { margin: 2em 4em }/* topとbottomマージン 2em,leftとrightマージン 4em */

DIV { margin: 1em 2em 3em 4em }/* top margin 1em, right margin 2em,
bottom margin 3em,left margin 4em */

垂直方向のマージンと結び付け、マージン値の最高値を使うと破綻することに注意しておきます。水平方向にマージンは破綻しません。marginプロパティーで、一つで全てのマージンを設定できます；代わりに、プロパティーmargin-top・margin-bottom・margin-leftそしてmargin-rightを使うかもしれません。

例css/ex/margin.html

padding-top上部パディング

padding-topとは、上のパディングを指定するためのプロパティです。値は実数値に単位をつけて指定します。パディングにはマイナスを指定することができません。初期値は0です。

Functional list
書式	padding-top: <value:値>
値	<length> \|<percentage>
初期値	0
適用要素	全ての要素
継承性	不可

padding-topプロパティーは、top-borderとセレクターの内容の間にどの位の空白を置くかを記載します。値はlengthかpercentageです。パーセント値は親要素の幅を参照します。マイナスはゆるされません.

例css/ex/padding-right.html

padding-right右側パディング

padding-rightとは、右のパディングを指定するためのプロパティです。値は実数値に単位をつけて指定します。パディングにはマイナスを指定することができません。初期値は0です。

Functional list
書式	padding-right: <value:値>
値	<length> \|<percentage>
初期値	0
適用要素	全ての要素
継承性	不可

padding-rightプロパティーで、right borderとセレクターの内容の間の空白をどのくらいにするかを記載します。値はlengthかpercentageです。パーセント値は親要素の幅を参照します。マイナスは許されません。

例css/ex/padding-right.html

padding-bottom下部パディング

padding-bottomとは、下のパディングを指定するためのプロパティです。値は実数値に単位をつけて指定します。パディングにはマイナスを指定することができません。初期値は0です。

Functional list
書式	padding-bottom: <value:値>
値	<length> \|<percentage>
初期値	0
適用要素	全ての要素
継承性	不可

padding-bottomプロパティーで、bottom-borderとセレクターの内容の間にどの位の空白を置くかを記載します。値はlengthかpercentageです。パーセント値は親要素の幅を参照します。マイナスは許されません。

例css/ex/padding-bottom.html

padding-left左側パディング

padding-leftとは、左のパディングを指定するためのプロパティです。値は実数値に単位をつけて指定します。パディングにはマイナスを指定することができません。初期値は0です。

Functional list
書式	padding-left: <value:値>
値	<length> \|<percentage>
初期値	0
適用要素	全ての要素
継承性	不可

padding-leftプロパティーで、left-borderとセレクターの内容にどの位の空白を置くかを記載します。値は、lengthかpercentageです。パーセント値は親要素の幅を参照します。マイナスは許されません

例css/ex/padding-left.html

paddingパディング

paddingとは、上下左右のパディングに関する設定を一括して指定するためのプロパティです。値がひとつだけのときには全てのマージンを等しく指定しますが、値の数によって上下と左右のそれぞれを等しく指定したり、左右のみを等しく指定したり、あるいは全てのパディングに異なる値を指定できます。値は数値に単位をつけて指定しますが、マイナスは指定できません。

Functional list
書式	padding: <value:値>
値	[<length> \|<percentage> ]{1,4}
初期値	0
適用要素	全ての要素
継承性	不可

paddingプロパティーは、padding-top・padding-right・padding-bottomとpadding-leftプロパティイーの短縮型です。要素のパディングは、borderと要素の内容の間の空白の量です。一から四の値が与えられ、各値はlengthかpercentageです。パーセント値は親要素の幅を参照します。マイナスは許されません。

四つの値があるなら、それぞれ上部・右側・下部・左側パディングです。一つの値なら、全ての側に適用されます。二または三の値が与えられるなら、見えない値は反対側から取られます。

例えば、以下の規則は上部パディングを2emに、右側パディングを4emに、下部ッパディングを5emに、左側パディングを4emに設定しています：

BLOCKQUOTE { padding: 2em 4em 5em }

例css/ex/padding.html

border-top-width上部境界線幅

border-top-widthとは、上側のボーダーの太さを指定するためのプロパティです。初期値はmediumであり、中ぐらいのボーダーとなりますが、数値に単位をつけて指定します。なお、ボーダーの太さにマイナスを指定することはできません。

Functional list
書式	border-top-width: <value:値>
値	thin \| medium \| thick \|<length>
初期値	medium
適用要素	全ての要素
継承性	不可

border-top-widthプロパティーは要素の上部境界線の幅を特定するのに使われます。値は三つのキーワードから一つ選び、文字サイズや相対的な幅を達成するのに使われるlengthに影響されません。マイナスは許されません。

border-top・border-widthまたは短縮型borderも使えます。

例css/ex/border-style7.html

border-right-width右側境界線幅

border-right-widthとは、右側のボーダーの太さを指定するためのプロパティです。初期値はmediumであり、中ぐらいのボーダーとなりますが、数値に単位をつけて指定します。なお、ボーダーの太さにマイナスを指定することはできません。

Functional list
書式	border-right-width: <value:値>
値	thin \| medium \| thick \|<length>
初期値	medium
適用要素	全ての要素：
継承性	不可

border-right-widthプロパティーは、要素の右側境界線の幅を特定するのに使われます。値は、三つのキーワードの一つを選べ、文字サイズや相対的な幅を達成するのに使えるlengthによって影響をうけません。マイナスは許されません。

border-right・border-widthまたは短縮型プロパティーであるborderも使えます。

例css/ex/border-style6.html

border-bottom-width下部境界線幅

border-bottom-widthとは、下側のボーダーの太さを指定するためのプロパティです。初期値はmediumであり、中ぐらいのボーダーとなりますが、数値に単位をつけて指定します。なお、ボーダーの太さにマイナスを指定することはできません。

Functional list
書式	border-bottom-width: <value:値>
値	thin \| medium \| thick \|<length>
初期値	medium
適用要素	全ての要素：
継承性	不可

border-bottom-widthプロパティーは要素の下部境界線の幅を特定するのに使われます。値は三つのキーワードから一つを選び文字サイズや相対的な幅を達成するのに使われるlengthに影響されません。マイナスは許されません。

border-bottom・border-widthまたは短縮型プロパティーであるborderも使えます。

例css/ex/border-style4.html

border-left-width左側境界線幅

border-left-widthとは、左側のボーダーの太さを指定するためのプロパティです。初期値はmediumであり、中ぐらいのボーダーとなりますが、数値に単位をつけて指定します。なお、ボーダーの太さにマイナスを指定することはできません。

Functional list
書式	border-left-width: <value:値>
値	thin \| medium \| thick \|<length>
初期値	medium
適用要素	全ての要素：
継承性	不可

border-left-widthプロパティーは要素の左側境界線の幅を特定するのに使われます。値は三つのキーワードから一つ選び、文字サイズや相対的な幅を達成するのに使われるlengthによって影響をされません。border-left・border-widthまたは短縮型プロパティーであるborderも使えます。

例css/ex/border-style5.html

border-width境界線幅

borderとは、上下左右のボーダーに関する設定を一括して指定するためのプロパティです。具体的には、border-color、border-style、border-bwidthで指定する値を任意の順序でスペースで区切って指定します。ただし、この場合、上下左右に別個の設定を行うことはできません。

Functional list
書式	border-width: <value:値>
値	[ thin \| medium \| thick \|<length> ]{1,4}
初期値	未定義
適用要素	全ての要素
継承性	不可

border-widthプロパティーは一から四つまでの値を特定して要素の境界線幅を設定するのに使い、各値はキーワードまたはlengthです。負の長さは許されません。四つの値が与えられたら、それぞれ上部・右側・下部・左側境界線幅に適用されます。一つの値なら、それが全ての側面に当てはめられます。二つか三つが与えられているなら、記載ない値は反対側の値から取られます。

このプロパティーは、border-top-width・border-right-width・border-bottom-widthそしてborder-left-widthプロパティー用の短縮型です。短縮型プロパティーborderも使います。

例css/ex/border-width.html

border-color境界線色彩

border-colorとは、ボーダーの色を指定するためのプロパティです。RGB値やキーワードで任意の色を指定することができます。値がひとつだけのときには上下左右の各ボーダーを同じ色で描画しますが、値の数によって上下と左右のそれぞれに同じ色を指定したり、左右のみに同じ色を指定したり、あるいは全てのボーダーに異なる色を指定できます。

また、値にtransparentを指定すると、幅を確保した状態で透明なボーダーが描画されます。

Functional list
書式	border-color: <value:値>
値	<color>{1,4}
初期値	colorプロパティーの値
適用要素	全ての要素
継承性	不可

border-colorプロパティーは要素の境界線の色を設定します。いちから四つに色彩値が特定されます。四つの値があると、それぞれ上部・右側・下部・左側境界線の色に適用されます。一つの値なら全ての側面に当てられます。二から三の値なら、記載されていない値は反対側から取られてきます。短縮型であるborderも使います。

例css/ex/border-style3.html

border-style境界線様式

border-styleとは、ボーダーの形を指定するためのプロパティです。初期値はnoneであり、ボーダーは表示されません。取りうる主な値には、solid（実線）やdotted（点線）、double（2本線）などがあります。値がひとつだけのときには上下左右の各ボーダーを同じ形式で描画しますが、値の数によって上下と左右のそれぞれに同じ形式を指定したり、左右のみに同じ形式を指定したり、あるいは全てのボーダーに異なる形式を指定できます。

Functional list
書式	border-style: <value:値>
値	[ none \| dotted \| dashed \| solid \| double \| groove \| ridge \| inset \| outset ]{1,4}
初期値	none
適用要素	全ての要素：All elements
継承性	No

border-styleプロパティーは要素の境界線の様式（スタイル）を設定します。このプロパティーは視覚的な場合の境界線用に特定しなくてはなりません。一つから四つのキーワードが特定されます。四つの値があれば、それぞれ上部・右側・下部・左側境界線様式ね適用されます。一つの値なら、全ての側面に適用されます。二から三の値の場合記載ない値は反対側から取られます。短縮型プロパティーであるborderも使います。

例css/ex/border-style.html

border-top上部境界線

border-topとは、上側のボーダーに関する設定を一括して指定するためのプロパティです。具体的には、border-top-color、border-top-style、border-top-widthで指定する値を任意の順序でスペースで区切って指定します。

Functional list
書式	border-top: <value:値>
値	<border-top-width> \| \|<border-style> \|\|<color>
初期値	未定義
適用要素	全ての要素
継承性	不可

border-topプロパティーは要素の上部境界線用のwidth・styleそしてcolorを設定する短縮型です。ただ一つのborder-style値しか与えられないことに注意して下さい。短縮型プロパティーであるborderも使えます。

border-right右側境界線

border-rightとは、右側のボーダーに関する設定を一括して指定するためのプロパティです。具体的には、border-right-color、border-right-style、border-right-widthで指定する値を任意の順序でスペースで区切って指定します。

Functional list
書式	border-right: <value:値>
値	<border-right-width> \| \|<border-style> \|\|<color>
初期値	未定義
適用要素	全ての要素
継承性	不可

border-rightプロパティ－は要素の右側境界線のwidth・styleそしてcolorを設定する短縮型です。ただ一つのborder-style値が与えられることに注意してください。短縮型であるborderも使います。

例css/ex/border-right.html

border-bottom下部境界線）

border-bottomとは、下側のボーダーに関する設定を一括して指定するためのプロパティです。具体的には、border-bottom-color、border-bottom-style、border-bottom-widthで指定する値を任意の順序でスペースで区切って指定します。

Functional list
書式	border-bottom: <value:値>
値	<border-bottom-width> \| \|<border-style> \|\|<color>
初期値	未定義
適用要素	全ての要素：
継承性	不可

border-bottomプロパティーは要素の下部境界線のwidth・styleそしてcolorを設定する短縮型です。ただ一つのborder-style値だけが与えられることに注意してください。短縮型プロパティーであるborderも使います。

例css/ex/border-style8.html

border-left左側境界線

border-leftとは、左側のボーダーに関する設定を一括して指定するためのプロパティです。具体的には、border-left-color、border-left-style、border-left-widthで指定する値を任意の順序でスペースで区切って指定します。

Functional list
書式	border-left: <value:値>
値	<border-left-width> \| \|<border-style> \|\|<color>
初期値	未定義
適用要素	全ての要素
継承性	不可

border-leftプロパティーは要素の左側境界線のwidth・styleそしてcolorを設定する短縮型です。ただ一つのborder-style値が与えられることに注意してください。短縮型プロパティーであるborderも使います。

例css/ex/border-style9.html

border境界線

borderとは、上下左右のボーダーに関する設定を一括して指定するためのプロパティです。具体的には、border-color、border-style、border-widthで指定する値を任意の順序でスペースで区切って指定します。ただし、この場合、上下左右に別個の設定を行うことはできません。

Functional list
書式	border: <value:値>
値	<border-width> \|\|<border-style> \| \|<color>
初期値	未定義
適用要素	全ての要素
継承性	不可

borderプロパティーは要素の境界線のwidth・styleそしてcolorを設定する短縮型です。境界線宣言の例では以下のものを含んでいます：

H2 { border: groove 3em }
A:link { border: solid blue }
A:visited { border: thin dotted #800080 }
A:active { border: thick double red }

borderプロパティーは四つの境界線全てを設定するだけです；ただ一つの境界線幅と境界線様式が与えられます。要素の四つの境界線に異なる値を与えるには、制作者は一つ以上の以下に示すプロパティーを使わなければなりません。

width幅

widthとは、ブロックレベル要素や置換要素の横幅を指定するためのプロパティです。実数値に単位を付けて指定します。初期値はautoであり、自動的に適切な内容幅が設定されます。

Functional list
書式	width: <value:値>
値	<length> \|<percentage> \| auto
初期値	auto
適用要素	ブロック－レベルとそれに代わる要素
継承性	不可

各ブロック－レベルまたは置き代えられる要素は、幅を持ち得て、length・percentageまたはautoとして特定されます（置き代えられる要素は、内部次元のみが知られているものの一つ。置き代えられるHTML要素にはIMG・INPUT・TEXTAREA・SELECTそしてOBJECTがあります）。widthプロパティーの初期値はautoで、これは結果として要素の内部幅になります（例、要素自身の幅は、例えば画像の幅）。パーセントは親要素の幅を参照します。マイナスは許されていません。

このプロパティーは、送信（submit）や再設定（reset）ボタンのような INPUT要素に共通の幅を与えるのに使うことができます：

INPUT.button { width: 10em }

height高さ

heightとは、ボックスのコンテンツの高さを指定するためのプロパティです。初期値はautoであり、高さは場合に応じて自動的に決定されます。また、実数値に単位をつけて指定することもできます。なお、マイナスを指定することはできません。

Functional list
書式	height: <value:値>
値	<length> \| auto
初期値	auto
適用要素	ブロック－レベルと置き代えできる要素
継承性	不可

各ブロック－レベルまたは置き代えられる要素は高さが与えられ、lengthかautoとして特定されます（置き代えられる要素は、IMG・INPUT・TEXTAREA・SELECTそしてOBJECTを含みます）。heightプロパティーの初期値はautoで、結果的に要素の内部の高さになります（例、要素自身の高さは、例えば画像の高さに）。負の高さは許されていません。

widthプロパティーでのように、heightは画像を計測するのに使えます：

IMG.foo { width: 40px; height: 40px }

多くの場合制作者は画像編集プログラムで画像を計測するよう忠告されますすが、というのはブラウザは精度の高い画像計測をしないようだからで、小規模化がユーザーに不必要に大きなファイルを保存させることになるからです。しかし、widthやheightプロパティーでの小規模化は、視覚問題を克服するするために、ユーザー定義のスタイル・シートでの有用な選択です。

float回り込み回避

floatとは、指定されたボックスの後続の要素を回り込ませるためのプロパティです。初期値はnoneであり、後続の要素を回り込ませません。値にleftあるいはrightを指定すると、それぞれ後続の要素を右または左に回り込ませます。

Functional list
書式	float: <value:値>
値	left \| right \| none
初期値	none
適用要素	全ての要素
継承性	不可

floatプロパティーは、要素の周囲でテキストを折り返すことができます。これはIMG要素のHTMLのALIGN=leftやALIGN=rightと目的は同じですが、CSS1は全ての要素で「回り込み回避」ができ、HTML3.2でできるimagesやtablesだけではありません。

例css/ex/float.html

clear回り込み回避解除

clearとは、floatプロパティで配置されたボックスに対する回り込みを解除するためのプロパティです。初期値はnoneで、回り込みを解除しません。leftを指定すると左に配置されたボックスへの回り込み、rightを指定すると右に配置されたボックスへの回りこみ、bothではすべてのボックスに対する回りこみの解除を行います。

Functional list
書式	clear: <value:値>
値	none \| left \| right \| both
初期値	none
適用要素	全ての要素
継承性	不可

clearプロパティーは、要素が側面に要素の回り込み回避を可能にするかどうかを特定します。leftの値は、左側で回避する要素の下に要素を移動するのを可能にします；rightは右側で回避する要素で同じ様に作用します。

別の値はnoneで、両側面で回避する要素の下に要素を移動するのを可能にします。このプロパティーはHTML<BRCLEAR=left|right|all|none>に機能的に似ていますが、全ての要素に適用可能です。

HOME スタイルシートボックス