ボックス・プロパティー

Box Properties

• 上部マージン（Top Margin）
• 右側マージン（Right Margin）
• 下部マージン（Bottom Margin）

• 左側マージン（Left Margin）

• マージン（Margin）

• 上部パディング（Top Padding）
• 右側パディング（Right Padding）
• 下部パディング（Bottom Padding）

• 左側パディング（Left Padding）

• パディング（Padding）

• 上部境界線幅（Top Border Width）
• 右側境界線幅（Right Border Width）
• 下部境界線幅（Bottom Border Width）

• 左側境界線幅（Left Border Width）

• 境界線の幅（Border Width）
• 境界線色彩（Border Color）

• 境界線様式（Border Style）

• 上部境界線（Top Border）
• 右側境界線（Right Border）
• 下部境界線（Bottom Border）

• 左側境界線（Left Border）

• 境界線　　　　　（Border）
• 幅　　　　　　　（Width）
• 高さ　　　　　　（Height）
• 回り込み回避　　（Float）
• 回り込み回避解除（Clear）

上部マージン（Top Margin）

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

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

BODY { margin-top: 0 }

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

右側マージン（Right Margin）

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

例：

P.narrow { margin-right: 50% }

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

下部マージン（Bottom Margin）

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

例：

DT { margin-bottom: 3em }

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

左側マージン（Left Margin）

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

例：

ADDRESS { margin-left: 50% }

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

マージン（Margin）

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を使うかもしれません。

上部パディング（Top Padding）

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

右側パディング（Right Padding）

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

下部パディング（Bottom Padding）

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

左側パディング（Left Padding）

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

パディング（Padding）

paddingプロパティーは、 padding-top・ padding-right・ padding-bottomとpadding-leftプロパティイーの短縮型です。

要素のパディングは、 borderと要素の内容の間の空白の量です。一から四の値が与えられ、各値は lengthか percentageです。パーセント値は親要素の幅を参照します。負の値は許されません。

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

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

BLOCKQUOTE { padding: 2em 4em 5em }

上部境界線幅（Top Border Width）

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

border-top・ border-width乃至 短縮型 borderも使えます。

右側境界線幅（Right Border Width）

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

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

下部境界線幅（Bottom Border Width）

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

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

左側境界線幅（Left Border Width）

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

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

境界線幅（Border Width）

border-widthプロパティーは一から四つまでの値を特定して要素の境界線幅を設定するのに使い、各値はキーワード乃至は lengthです。負の長さは許されません。

四つの値が与えられたら、それぞれ上部・右側・下部・左側境界線幅に適用されます。一つの値なら、それが全ての側面に当てはめられます。二つか三つが与えられているなら、記載ない値は反対側の値から取られます。

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

短縮型プロパティーborderも使います。

境界線色彩（Border Color）

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

短縮型である borderも使います。

境界線様式（Border Style）

border-styleプロパティーは要素の 境界線の様式（スタイル）を設定します。このプロパティーは視覚的な場合の境界線用に特定しなくてはなりません。

一つから四つのキーワードが特定されます。四つの値があれば、それぞれ上部・右側・下部・左側境界線様式ね適用されます。一つの値なら、全ての側面に適用されます。二から三の値の場合記載ない値は反対側から取られます。

短縮型プロパティーであるborderも使います。

上部境界線（Top Border）

border-topプロパティーは要素の上部境界線用の width・ styleそして colorを設定する短縮型です。

ただ一つの border-style値しか与えられないことに注意して下さい。

短縮型プロパティーである borderも使えます。

右側境界線（Right Border）

border-rightプロパティ−は要素の右側境界線の width・ styleそして colorを設定する短縮型です。

ただ一つの border-style値が与えられることに注意してください。

短縮型である borderも使います。

下部境界線（Bottom Border）

border-bottomプロパティーは要素の下部境界線の width・ styleそして colorを設定する短縮型です。

ただ一つの border-style値だけが与えられることに注意してください。

短縮型プロパティーである borderも使います。

左側境界線（Left Border）

border-leftプロパティーは要素の左側境界線の width・ styleそして colorを設定する短縮型です。

ただ一つの border-style値が与えられることに注意してください。

短縮型プロパティーである borderも使います。

境界線（Border）

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プロパティーは四つの境界線全てを設定するだけです；ただ一つの境界線幅と境界線様式が与えられます。要素の四つの境界線に異なる値を与えるには、制作者は一つ以上の border-top・ border-right・ border-bottom・ border-left・ border-color・ border-width・ border-style・ border-top-width・ border-right-width・ border-bottom-width乃至は border-left-widthプロパティーを使わなければなりません。

幅（Width）

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

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

INPUT.button { width: 10em }

高さ（Height）

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

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

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

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

回り込み回避（Float）

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

回り込み回避解除（Clear）

clearプロパティーは、要素が側面に要素の回り込み回避を可能にするかどうかを特定します。 leftの値は、左側で回避する要素の下に要素を移動するのを可能にします； rightは右側で回避する要素で同じ様に作用します。別の値は noneで、両側面で回避する要素の下に要素を移動するのを可能にします。このプロパティーは HTML 3.2の <BR CLEAR=left|right|all|none>に機能的に似ていますが、全ての要素に適用可能です。

Maintained by John Pozadzides and Liam Quinn

CSSインデックス ‾ CSS構造 ‾ CSSプロパティー

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.