Cascading Style Sheets解説

Properties・ボックス関連[1]

margin マージン

値：
[ <単位指定> | <パーセント> | auto ]{1,4}
初期値：
各プロパティの初期値
適用対象：
全要素
継承：
されない
<パーセント>：
上位要素の上部マージンに対する比率
マイナス値：
可能

解説：

要素に対する余白を指定します。その要素のボーダーの外側に設定されます。

マージン領域は常に透明なので、親要素が透けて見えます。

例（注意）：

p{margin: 1em}　/* 上下左右：1em */
p{margin: 1em 1.5em}　/* 上下：1em　左右：1.5em */
p{margin: 1em 5em 2em}　/* 上：1em　左右：5em　下：2em */
p{margin: 1em 1.2em 150% 2em}　/* 上：1em　右：1.2em　下：150%　左：2em */

padding パディング

値：
[ <単位指定> | <パーセント> ]{1,4}
初期値：
各プロパティの初期値
適用対象：
全要素
継承：
されない
<パーセント>：
上位要素の幅に対する比率
マイナス値：
不可

解説：

要素に対する余白を指定します。その要素のボーダーの内側に設定されます。

パディング領域には要素自身と同じ背景が用いられます。

例（注意）：

p{padding: 1em}　/* 上下左右：1em */
p{padding: 1em 1.5em}　/* 上下：1em　左右：1.5em */
p{padding: 1em 3em 2em}　/* 上：1em　左右：3em　下：2em */
p{padding: 1em 1.2em 150% 2em}　/* 上：1em　右：1.2em　下：150%　左：2em */

border-width ボーダーの幅

値：
[ thin | medium | thick | <単位指定> ]{1,4}
初期値：
medium
適用対象：
全要素
継承：
されない
マイナス値：
不可

解説：

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

同時に「border-style」も指定しなければボーダーは表示されません。（「border-style」の初期値が「none」のため）

値意味
thin細い
medium普通
thick太い

例（注意）：

p{border-width: thin}　/* 上下左右：thin */
p{border-width: thin medium}　/* 上下：thin　左右：medium */
p{border-width: thin thick 1em}　/* 上：thin　左右：thick　下：1em */
p{border-width: thin medium thick 2em}　/* 上：thin　右：medium　下：thick　左：2em */

border-color ボーダーの色

値：
<color>{1,4}
初期値：
指定した要素の「color」の値
適用対象：
全要素
継承：
されない

解説：

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

例：

p{border-color: #008080}　/* 上下左右：#008080 */
p{border-color: #008080 blue}　/* 上下：#008080　左右：blue */
p{border-color: #008080 blue black}　/* 上：#008080　左右：blue　下：black */
p{border-color: #008080 blue black silver}　/* 上：#008080　右：blue　下：black　左：silver */

border-sytle ボーダーの種類

値：
[ none | dotted | dashed | solid | double | groove | ridge | inset | outset ]{1,4}
初期値：
none
適用対象：
全要素
継承：
されない

解説：

ボーダーの形状を指定します。

値意味
dottedボーダーは点線で描かれる
dashedボーダーは破線で描かれる
solidボーダーは実線で描かれる
doubleボーダーは二重線で描かれる
groove3次元の溝の様に描かれる
ridge3次元の出っ張った枠の様に描かれる
inset3次元のボタンの様に描かれる
outset3次元のへこんだボタンの様に描かれる

例（注意）：

p{border-style : solid}　/* 上下左右：solid */
p{border-style: none solid}　/* 上下：なし　左右：solid */
p{border-style: double solid none}　/* 上：double　左右：solid　下：なし */
p{border-style: solid none none solid}　/* 上：solid　右：なし　下：なし　左：solid */

width 表示の幅

値：
<単位指定> | <パーセント> | auto
初期値：
auto
適用対象：
ブロック要素と置換要素
継承：
されない
<パーセント>：
上要素の幅に対する比率
マイナス値：
不可

解説：

表示の幅を指定します。画像のような要素との置き換えにも利用されます。

height 表示の高さ

値：
<単位指定> | （ <パーセント> ） | auto
初期値：
auto
適用対象：
ブロック要素と置換要素
継承：
されない
<パーセント>：
上要素の幅に対する比率
マイナス値：
不可

解説：

表示の高さを指定します。画像のような要素との置き換えにも利用されます。

float 囲み（回り込み）

値：
left | right | none
初期値：
none
適用対象：
全要素
継承：
されない

解説：

値を「left」とした場合、 指定した要素は左に移動し、その要素の右側への後続テキストの回り込みが許可されます。同様に、値を「right」とした場合は要素の左側への回り込みが許可されます。

指定した値が「left」か「right」の場合、その要素はブロック要素（浮動要素）として扱われます（「display」の指定も無視されます）。

例：

table{float: right}　/* 要素の左側への回り込みを許可 */

clear 囲み（回り込み）の解除

値：
none | left | right | both
初期値：
none
適用対象：
全要素
継承：
されない

解説：

「float」属性による回り込みを解除します。

値効果
left「float : left」による回り込みを解除
right「float : right」による回り込みを解除
both左右両方の回り込みを解除

例：

h1,h2,h3,h4,h5,h6{clear: both}

border ボーダーの一括指定

値：
<border-width> || <border-style> || <border-color>
初期値：
各プロパティの初期値
適用対象：
全要素
継承：
されない

解説：

ボーダーの幅（「border-width」）、スタイル（「border-style」）、色（「border-color」）を上下左右一括で指定します。

例：

dl{border: thin solid #606060}

[Back(b)][Cover(c)]