border同じ枠の幅・スタイル・色
p { border: thick solid blue;}border-width/border-style/color の順
下記と同じ設定になる。p {
    border-top: thick solid blue;
    border-right: thick solid blue;
    border-bottom: thick solid blue;
    border-left: thick solid blue
}
p { border: none;}上下左右の罫線が消える。
ボックスの枠をまとめて指定します。
適用範囲:すべての要素
継承:しない
初期値:個々の属性の初期値
レベル:CSS_1.0:○ CSS_2.0:○
border-bottom下枠の幅・スタイル・色
h1 { border-bottom: thick solid blue;}border-bottom-width/border-style/color の順
p { border-bottom: none;}下の罫線が消える。
上枠、右枠、下枠、左枠の幅・スタイル・色を個別に指定します。
適用範囲:すべての要素
継承:しない
初期値:個々の属性の初期値
レベル:CSS_1.0:○ CSS_2.0:○
border-bottom-color下枠の色
上枠、右枠、下枠、左枠の色を個別に指定します。
適用範囲:すべての要素
継承:しない
初期値:the value of the 'color' property
レベル:CSS_1.0:○ CSS_2.0:○
border-bottom-style下枠のスタイル
上枠、右枠、下枠、左枠のスタイルを個別に指定します。
適用範囲:すべての要素
継承:しない
初期値:none
レベル:CSS_1.0:○ CSS_2.0:○
border-bottom-width下枠の幅
p { border-bottom-width: thin;}thin(細)| medium(中)| thick(太)(太さ:ブラウザ依存)
p { border-bottom-width: 0.3em;} 単位つきの数値で直接指定
上枠、右枠、下枠、左枠の幅を個別に指定します。
適用範囲:すべての要素
継承:しない
初期値:medium
レベル:CSS_1.0:○ CSS_2.0:○
border-color枠の色
p { border-color: red } aqua | gray | navy | silver | black |
green | olive | teal | blue | lime | purple |
white | fuchsia | maroon | red | yellow
p { border-color: #ff0000;} 16進数のRGB値で指定
p { border-color: #f00;} 16進数のRGB値で指定
p { border-color: rgb(255, 0, 0);} 10進数のRGB値で指定
p { border-color: rgb(100%, 0%, 0%);} 10進数のRGB値で指定
p { border-color: red;} 上下左右
p { border-color: red blue;} 上下・左右
p { border-color: red blue white; } 上・左右・下
p { border-color: red blue white black;} 上・右・下・左
ボックスの枠( 上枠、右枠、下枠、左枠すべて ) の色を指定します。
適用範囲:すべての要素
継承:しない
初期値:個々の属性の初期値
レベル:CSS_1.0:○ CSS_2.0:○
border-left左枠の幅・スタイル・色
h1 { border-left: thick solid blue;}border-left-width/border-style/color の順
p { border-left: none;}左の罫線が消える。
上枠、右枠、下枠、左枠の幅・スタイル・色を個別に指定します。
適用範囲:すべての要素
継承:しない
初期値:個々の属性の初期値
レベル:CSS_1.0:○ CSS_2.0:○
border-left-color左枠の色
上枠、右枠、下枠、左枠の色を個別に指定します。
適用範囲:すべての要素
継承:しない
初期値:the value of the 'color' property
レベル:CSS_1.0:○ CSS_2.0:○
border-left-style左枠のスタイル
上枠、右枠、下枠、左枠のスタイルを個別に指定します。
適用範囲:すべての要素
継承:しない
初期値:none
レベル:CSS_1.0:○ CSS_2.0:○
border-left-width左枠の幅
p { border-left-width: thin;}thin(細)| medium(中)| thick(太)(太さ:ブラウザ依存)
p { border-left-width: 0.3em;} 単位つきの数値で直接指定
上枠、右枠、下枠、左枠の幅を個別に指定します。
適用範囲:すべての要素
継承:しない
初期値:medium
レベル:CSS_1.0:○ CSS_2.0:○
border-right右枠の幅・スタイル・色
h1 { border-right:thick solid blue;}border-right-width/border-style/color の順
p { border-right: none;}右の罫線が消える。
上枠、右枠、下枠、左枠の幅・スタイル・色を個別に指定します。
適用範囲:すべての要素
継承:しない
初期値:個々の属性の初期値
レベル:CSS_1.0:○ CSS_2.0:○
border-right-color右枠の色
上枠、右枠、下枠、左枠の色を個別に指定します。
適用範囲:すべての要素
継承:しない
初期値:the value of the 'color' property
レベル:CSS_1.0:○ CSS_2.0:○
border-right-style右枠のスタイル
上枠、右枠、下枠、左枠のスタイルを個別に指定します。
適用範囲:すべての要素
継承:しない
初期値:none
レベル:CSS_1.0:○ CSS_2.0:○
border-right-width上右下左枠の幅
p { border-right-width: thin;}thin(細)| medium(中)| thick(太)(太さ:ブラウザ依存)
p { border-right-width: 0.3em;} 単位つきの数値で直接指定
上枠、右枠、下枠、左枠の幅を個別に指定します。
適用範囲:すべての要素
継承:しない
初期値:medium
レベル:CSS_1.0:○ CSS_2.0:○
border-style上下左右の枠のスタイル
p { border-style: solid;}none(枠の表示なし)| dotted(点)| dashed(点線)| solid(単一線)| double(2重線)| groove(窪んだ線)| ridge(出っ張った線)| inset(窪んだボックス)| outset(出っ張ったボックス)
p { border-style: dotted;} 上下左右
p { border-style: dotted dashed;} 上下・左右
p { border-style: dotted dashed double;} 上・左右・下
p { border-style: dotted dashed double groove;} 上・右・下・左
ボックスの枠( 上枠、右枠、下枠、左枠すべて ) のスタイルを指定します。
適用範囲:すべての要素
継承:しない
初期値:個々の属性の初期値
レベル:CSS_1.0:○ CSS_2.0:○
border-top上枠の幅・スタイル・色
h1 { border-top: thick solid blue;}border-top-width/border-style/color の順
p { border-top: none;}上の罫線が消える。
上枠、右枠、下枠、左枠の幅・スタイル・色を個別に指定します。
適用範囲:すべての要素
継承:しない
初期値:個々の属性の初期値
レベル:CSS_1.0:○ CSS_2.0:○
border-top-color上枠の色
上枠、右枠、下枠、左枠の色を個別に指定します。
適用範囲:すべての要素
継承:しない
初期値:the value of the 'color' property
レベル:CSS_1.0:○ CSS_2.0:○
border-top-style上枠のスタイル
上枠、右枠、下枠、左枠のスタイルを個別に指定します。
適用範囲:すべての要素
継承:しない
初期値:none
レベル:CSS_1.0:○ CSS_2.0:○
border-top-width上枠の幅
p { border-top-width: thin;}thin(細)| medium(中)| thick(太)(太さ:ブラウザ依存)
p { border-top-width: 0.3em;} 単位つきの数値で直接指定
上枠、右枠、下枠、左枠の幅を個別に指定します。
適用範囲:すべての要素
継承:しない
初期値:medium
レベル:CSS_1.0:○ CSS_2.0:○
border-width上下左右の枠の幅
p { border-width: thin;}thin(細)| medium(中)| thick(太)(太さ:ブラウザ依存)
p { border-width: 4em } 単位つきの数値で直接指定 上・下・左・右
p { border-width: 3em 5em;} 単位つきの数値で直接指定 上下・左右
p { border-width: 1em 2em 3em;} 単位つきの数値で直接指定 上・左右・下
p { border-width: 1em 2em 3em 4em;} 単位つきの数値で直接指定 上・右・下・左
ボックスの枠( 上枠、右枠、下枠、左枠すべて ) の幅を指定します。
適用範囲:すべての要素
継承:しない
初期値:個々の属性の初期値
レベル:CSS_1.0:○ CSS_2.0:○
clear文字の回り込み解除
h1 { clear: left;}none | left | right | both

none : 両側の回り込みを許可

left : ボックスの右側にテキストを表示する指定を解除

right : ボックスの左側にテキストを表示する指定を解除

both : 両側にあるボックスの間にテキストを表示する指定を解除

float で設定した、文字の回りこみの指定を解除します。
適用範囲:ブロックレベル要素
継承:しない
初期値:none
レベル:CSS_1.0:○ CSS_2.0:○
float文字の回り込み
img.button { float: left;}none | left | right

none : 回込みしない

left : ボックスをテキストの左に配置

right : ボックスをテキストの右に配置

文字の回りこみを指定します。
適用範囲:すべての要素
継承:しない
初期値:none
レベル:CSS_1.0:○ CSS_2.0:○
height高さ
img.button { height: auto;}auto 自動設定
img.button { height: 20px;} 単位つきの数値で直接指定
高さを指定します。
適用範囲:すべての要素
継承:しない
初期値:auto
レベル:CSS_1.0:○ CSS_2.0:○
margin上右下左マージン
body { margin: auto;}上下左右とも自動設定する。
左右自動設定の場合、中央寄せになる。
body { margin: 10% 10%;}パーセントで指定する。
2つ指定する場合は、上下・左右の順
body { margin: 1em 2em 3em;}単位つきの数値で直接指定する。
3つ指定する場合は、上・左右・下の順
body { margin: 1px 2px 3px 4px;}ピクセル単位の数値で直接指定する。
4つ指定する場合は、上・右・下・左の順
上下左右のマージンをまとめて指定します。
参考: margin を使用した センタリング
適用範囲:すべての要素
継承:しない
初期値:個々の属性の初期値
レベル:CSS_1.0:○ CSS_2.0:○
margin-bottom下マージン
h1 { margin-bottom: auto;}自動設定
h1 { margin-bottom: 3em;} 単位つきの数値で直接指定(ポイントやミリメートル)
h1 { margin-bottom: 10%;} パーセントで指定
上下のマージンを個別に指定します。
適用範囲:すべての要素
継承:しない
初期値:0
レベル:CSS_1.0:○ CSS_2.0:○
margin-left左マージン
h1 { margin-left: auto;}自動設定
h1 { margin-left: 3em;} 単位つきの数値で直接指定(ポイントやミリメートル)
h1 { margin-left: 10%;} パーセントで指定
左右のマージンを個別に指定します。
適用範囲:すべての要素
継承:しない
初期値:0
レベル:CSS_1.0:○ CSS_2.0:○
margin-right右マージン
h1 { margin-right: auto;}自動設定
h1 { margin-right: 3em;} 単位つきの数値で直接指定(ポイントやミリメートル)
h1 { margin-right: 10%;} パーセントで指定
左右のマージンを個別に指定します。
適用範囲:すべての要素
継承:しない
初期値:0
レベル:CSS_1.0:○ CSS_2.0:○
margin-top上マージン
h1 { margin-top: auto;}自動設定
h1 { margin-top: 3em;} 単位つきの数値で直接指定(ポイントやミリメートル)
h1 { margin-top: 10%;} パーセントで指定
上下のマージンを個別に指定します。
適用範囲:すべての要素
継承:しない
初期値:0
レベル:CSS_1.0:○ CSS_2.0:○
padding枠と内容の間隔まとめて設定
body { padding: 10%;} 上下左右 パーセントで指定
body { padding: 3em 5em;} 上下と左右 単位つきの数値で直接指定
body { padding: 1em 2em 3em;} 上・左右・下 単位つきの数値で直接指定
body { padding: 1em 2em 3em 4em;} 上・右・下・左 単位つきの数値で直接指定
上下左右のパッディングをまとめて指定します。
適用範囲:すべての要素
継承:しない
初期値:個々の属性の初期値
レベル:CSS_1.0:○ CSS_2.0:○
padding-bottom下の枠と内容の間隔
h1 { padding-bottom: 8px;} 単位つきの数値で直接指定
h1 { padding-bottom: 10%;} パーセントで指定(幅に対するパーセント)
上下左右のパッディングを個別に指定します。
適用範囲:すべての要素
継承:しない
初期値:0
レベル:CSS_1.0:○ CSS_2.0:○
padding-left左の枠と内容の間隔
h1 { padding-left: 8px;} 単位つきの数値で直接指定
h1 { padding-left: 10%;} パーセントで指定(幅に対するパーセント)
上下左右のパッディングを個別に指定します。
適用範囲:すべての要素
継承:しない
初期値:0
レベル:CSS_1.0:○ CSS_2.0:○
padding-right右の枠と内容の間隔
h1 { padding-right: 8px;} 単位つきの数値で直接指定
h1 { padding-right: 10%;} パーセントで指定(幅に対するパーセント)
上下左右のパッディングを個別に指定します。
適用範囲:すべての要素
継承:しない
初期値:0
レベル:CSS_1.0:○ CSS_2.0:○
padding-top上の枠と内容の間隔
h1 { padding-top: 0.5em;} 単位つきの数値で直接指定
h1 { padding-top: 10%;} パーセントで指定(幅に対するパーセント)
上下左右のパッディングを個別に指定します。
適用範囲:すべての要素
継承:しない
初期値:0
レベル:CSS_1.0:○ CSS_2.0:○
width
img.button { width: auto;}auto 自動設定
img.button { width: 80px;} 単位つきの数値で直接指定
img.button { width: 10%; } パーセントで指定(幅に対するパーセント)
幅を指定します。
適用範囲:すべての要素
継承:しない
初期値:auto
レベル:CSS_1.0:○ CSS_2.0:○