CSSリファレンス -- ボックス

[背景] [フォント] [テキスト] [ボックス] [配置] [リスト] [TABLE] [擬似] [UI]

[印刷] [音声]

CSS仕様の表記

CSS1 --- CSS Level 1、CSS Level 2で定義されている属性と値

CSS2 --- CSS Level 2で定義されている属性と値


margin-top,margin-right,margin-bottom,margin-left

要素のマージン(上下左右)を個別に設定する

CSS仕様: CSS1

機能 Windows Macintosh
数値+単位 em, ex, pt, px などの単位で指定 IE3以降 NS4以降 IE4以降 NS4以降
数値+% ひとつ外側のボックスに対する割合 IE3以降 NS4以降 IE4以降 NS4以降
auto 自動調整 IE3以降 NS4以降 IE4以降 NS4以降

適応要素 :すべての要素

継承 :しない (デフォルト値 = 0 )

ボックス領域とその内側にあるボックス領域の外枠との間隔(マージン)をそれぞれ指定する属性です。marji-top は上側、margin-bottom は下側、margin-left は左側、margin-right は右側のマージンにそれぞれ適用されます。 Sample26


margin 要素のマージン(上下左右)をまとめて設定する

CSS仕様: CSS1

機能 Windows Macintosh
数値+単位 em, ex, pt, px などの単位で指定 IE4以降 NS4以降 IE4以降 NS4以降
数値+% ひとつ外側のボックスに対する割合 IE4以降 NS4以降 IE4以降 NS4以降
auto 自動調整 IE6以降 NS4以降 IE4.5以降 NS6以降

適応要素 :すべての要素

継承 :しない (デフォルト値 = 各属性の初期値)

ボックス領域とその内側にあるボックス領域の外枠との間隔(マージン)をまとめてする属性です。指定する値の数によって、効果が表れる場所が異なり、値を1つ指定すると、上下左右に共通のマージンが設定され、値を4つ指定すると上下左右それぞれ異なったマージンが設定されます。 Sample27


padding-top,padding-right,padding-bottom,padding-left

要素の内容と枠の間の空間(上下左右)を個別に設定する

CSS仕様: CSS1

機能 Windows Macintosh
数値+単位 マージンと違い、マイナスは指定できない IE4以降 NS4以降 IE4以降 NS4以降
数値+% ひとつ外側のボックスに対する割合 IE4以降 NS4以降 IE4以降 NS4以降

適応要素 :すべての要素

継承 :しない (デフォルト値 = 0 )

コンテンツとそれを囲むボックス領域との間隔(パディング)を指定する属性です。padding-top は上側、padding-right は右側、padding-bottom は下側、padding-left は左側のパディングにそれぞれ設定します。 Sample28


padding 要素の内容と枠の間の空間(上下左右)をまとめて設定する

CSS仕様: CSS1

機能 Windows Macintosh
数値+単位 マージンと異なり、マイナスは指定できない IE4以降 NS4以降 IE4以降 NS4以降
数値+% ひとつ外側のボックスに対する割合 IE4以降 NS4以降 IE4以降 NS4以降

適応要素 :すべての要素

継承 :しない(デフォルト=各属性の初期値)

通常ボックス領域は、コンテンツと間隔をあけることなく形成されます。padding属性はコンテンツとボックス領域の間隔(パディング)を設定する属性です。 Sample29


border-top-width, border-right-width

border-bottom-width, border-left-width

要素の枠の太さ(上下左右)を個別に設定する

CSS仕様: CSS1

機能 Windows Macintosh
数値+単位 em, ex, pt, px などの単位で指定 IE4以降 NS4以降 IE4以降 NS4以降
thin 細い枠線 IE4以降 NS4以降 IE以降 NS以降
medium 中くらいの枠線 IE4以降 NS4以降 IE4以降 NS4以降
thick 太い枠 IE4以降 NS4以降 IE4以降 NS4以降

適応要素 :すべての要素

継承 :しない(デフォルト=medium)

要素領域の枠線(ボーダー)の太さを個別に指定する属性です。

border-top-width 上側

border-right-widt 右側

border-bottom-width 下側

border-left-width 左側

Sample30


border-width 要素の枠の太さ(上下左右)をまとめて設定する

CSS仕様: CSS1

機能 Windows Macintosh
数値+単位 em, ex, pt, px などの単位で指定 IE4以降 NS4以降 IE4,4.5,5 NS4,6
thin 細い枠線 IE4以降 NS4以降 IE4以降 NS4以降
medium 中くらいの枠線 IE4以降 NS4以降 IE4以降 NS4以降
thick 太い枠線 IE4以降 NS4以降 IE4以降 NS4以降

適応要素 :すべての要素

継承 :しない(デフォルト=medium)

要素領域の上下左右の枠線(ボーダー)の太さをまとめて指定する属性です。 Sample31


border-top-style, border-right-style

border-bottom-style, border-left-style

要素の枠のスタイル(上下左右)を個別に設定する

CSS仕様: CSS2

機能 Windows Macintosh
none 枠線を表示しない (デフォルト値) IE4以降 NS6以降 IE4以降 NS6以降
hidden 枠線を隠して表示しない IE4以降 NS6以降 IE4以降 NS6以降
dotted 点線 IE4以降 NS6以降 IE4以降 NS6以降
dashed 破線 IE4以降 NS6以降 IE4以降 NS6以降
solid 実線 IE4以降 NS6以降 IE以降 NS6以降
double 二重線 IE4以降 NS6以降 IE4以降 NS6以降
groove 立体的に望んだ感じの線 IE4以降 NS6以降 IE4以降 NS6以降
ridge 立体的に隆起した感じの線 IE4以降 NS6以降 IE4以降 NS6以降
inset 立体的に要素ごと望んだ感じの矩形 IE4以降 NS6以降 IE4以降 NS6以降
outset 立体的に要素ごと隆起した感じの矩形 IE4以降 NS6以降 IE4以降 NS6以降

適応要素 :すべての要素

継承 :しない(デフォルト=none)

要素領域の個々の枠線(ボーダー)のスタイルを指定する属性です。 Sample32


border-style 要素の枠のスタイル(上下左右)をまとめて設定する

CSS仕様: CSS1

機能 Windows Macintosh
none 枠線を表示しない (デフォルト値) IE4以降 NS6以降 IE4以降 NS6以降
hidden 枠線を隠して表示しない IE4以降 NS6以降 IE4以降 NS6以降
dotted 点線 IE4以降 NS6以降 IE4以降 NS6以降
dashed 破線 IE4以降 NS6以降 IE4以降 NS6以降
solid 実線 IE4以降 NS6以降 IE以降 NS6以降
double 二重線 IE4以降 NS6以降 IE4以降 NS6以降
groove 立体的に望んだ感じの線 IE4以降 NS6以降 IE4以降 NS6以降
ridge 立体的に隆起した感じの線 IE4以降 NS6以降 IE4以降 NS6以降
inset 立体的に要素ごと望んだ感じの矩形 IE4以降 NS6以降 IE4以降 NS6以降
outset 立体的に要素ごと隆起した感じの矩形 IE4以降 NS6以降 IE4以降 NS6以降

適応要素 :すべての要素

継承 :しない(デフォルト=none)

要素領域の上下の枠線(ボーダー)のスタイルを個別に指定する属性です。

border-style 1つの場合上下左右同じ値を設定

border-style 2つの場合上下、左右の値を設定

border-style 3つの場合上、左右、下の値を設定

border-style 4つの場合上、右、下、左の値を設定する属性です。

Sample33


border-top-color, border-right-color

border-bottom-color, border-left-color

要素の枠(上下左右)の色を個別に設定する

CSS仕様: CSS2

機能 Windows Macintosh
指定する色で枠線を表示する IE4以降 NS6以降 IE4以降 NS6以降
transparent 透明の枠線にする IE4以降 NS6以降 IE4以降 NS6以降

適応要素 :すべての要素

継承 :しない(デフォルト=背景色と同じ色:color属性値)

ボックス領域の上下左右の枠線(ボーダー)の色を個別に指定する属性です。

border-top-color 上の枠線の色

border-right-widt 右の枠線の色

border-bottom-color 下の枠線の色

border-left-color 左の枠線の色

Sample34


border-color 要素の枠(上下左右)の色をまとめて設定する

CSS仕様: CSS1

機能 Windows Macintosh
指定する色で枠線を表示する IE4以降 NS6以降 IE4以降 NS6以降
transparent 透明の枠線にする IE4以降 NS6以降 IE4以降 NS6以降

適応要素 :すべての要素

継承 :しない(デフォルト=背景色と同じ色:color属性値)

ボックス領域の上下左右の枠線(ボーダー)の色をまとめて指定する属性です。

border-color 1つの場合上下左右同じ色を設定

border-color 2つの場合上下、左右の色を設定

border-color 3つの場合上、左右、下の色を設定

border-color 4つの場合上、右、下、左の色を設定

Sample35


border-top 要素の枠(上)に関する値をまとめて設定する

CSS仕様: CSS1

機能 Windows Macintosh
border-right-width 枠線の太さを指定する IE以降 NS6以降 IE4以降 NS6以降
border-right-style 枠線の形式を指定する IE4以降 NS6以降 IE4以降 NS6以降
border-right-color 枠線の色を指定する IE4以降 NS6以降 IE4以降 NS6以降

適応要素 :すべての要素

継承 :しない(デフォルト=各属性の初期値)

border-top属性は枠線の上側の値をまとめて設定します。記述の例として

p{ border-top: 2px solid #0f0 }

枠線の太さ、スタイル、色を指定します。 Sample36


border-right 要素の枠(右)に関する値をまとめて設定する

CSS仕様: CSS1

機能 Windows Macintosh
border-right-width 枠線の太さを指定する IE以降 NS6以降 IE4以降 NS6以降
border-right-style 枠線の形式を指定する IE4以降 NS6以降 IE4以降 NS6以降
border-right-color 枠線の色を指定する IE4以降 NS6以降 IE4以降 NS6以降

適応要素 :すべての要素

継承 :しない(デフォルト=各属性の初期値)

border-right属性は枠線の右側の値をまとめて設定済ます。記述の例として

p { border-right: 2px solid #0f0 }

枠線の太さ、スタイル、色を指定します。 Sample37


border-bottom 要素の枠(下)に関する値をまとめて設定する

CSS仕様: CSS1

機能 Windows Macintosh
border-right-width 枠線の太さを指定する IE以降 NS6以降 IE4以降 NS6以降
border-right-style 枠線の形式を指定する IE4以降 NS6以降 IE4以降 NS6以降
border-right-color 枠線の色を指定する IE4以降 NS6以降 IE4以降 NS6以降

適応要素 :すべての要素

継承 :しない(デフォルト=各属性の初期値)

border-bottom属性は枠線の下側の値をまとめて設定済ます。記述の例として

p{ border-bottom: 2px solid #0f0 }

枠線の太さ、スタイル、色を指定します。 Sample38


border-left 要素の枠(左)に関する値をまとめて設定する

CSS仕様: CSS1

機能 Windows Macintosh
border-right-width 枠線の太さを指定する IE以降 NS6以降 IE4以降 NS6以降
border-right-style 枠線の形式を指定する IE4以降 NS6以降 IE4以降 NS6以降
border-right-color 枠線の色を指定する IE4以降 NS6以降 IE4以降 NS6以降

適応要素 :すべての要素

継承 :しない(デフォルト=各属性の初期値)

border-left属性は枠線の左側の値をまとめて設定済ます。記述の例として

p{ border-left: 2px solid #0f0 }

枠線の太さ、スタイル、色を指定します。 Sample39


border 要素の枠(上下左右)に関する値をまとめて設定する

CSS仕様: CSS1

機能 Windows Macintosh
border-right-width 枠線の太さを指定する IE以降 NS6以降 IE4以降 NS6以降
border-right-style 枠線の形式を指定する IE4以降 NS6以降 IE4以降 NS6以降
border-right-color 枠線の色を指定する IE4以降 NS6以降 IE4以降 NS6以降

適応要素 :すべての要素

継承 :しない(デフォルト=各属性の初期値)

border属性は枠線の上下左右の値をまとめて設定済ます。記述の例として

p{ border: 2px solid #0f0 }

枠線の太さ、スタイル、色を指定します。 Sample40


width ボックス内側領域の横幅を設定する

CSS仕様: CSS1

機能 Windows Macintosh
数値+単位 em, ex, pt, px などの単位で指定 IE4以降 NS4以降 IE4以降 NS4以降
数値+% 1つ外側のボックスに対する割合 IE4以降 NS4以降 IE以降 NS4以降
auto 自動調整 (デフォルト値) IE4以降 NS4以降 IE4以降 NS4以降

適応要素 :すべての要素(非置換要素とテーブル行を除く)

継承 :しない (デフォルト = auto)

要素領域の横幅を指定する属性です。マイナスの数値を指定することは出来ません。 Sample41


height ボックス内側領域の高さを設定する

CSS仕様: CSS1

機能 Windows Macintosh
数値+単位 em, ex, pt, px などの単位で指定 IE4以降 NS4以降 IE4以降 NS4以降
数値+% 1つ外側のボックスに対する割合 IE4以降 NS4以降 IE以降 NS4以降
auto 自動調整 (デフォルト値) IE4以降 NS4以降 IE4以降 NS4以降

適応要素 :すべての要素(非置換要素とテーブル行を除く)

継承 :しない (デフォルト = auto)

要素領域の高さを指定する属性です。マイナスの数値を指定することは出来ません。 Sample42



This Page is HTML4.01 Valid! 初版更新日 2002年5月5日   最新更新日 2004年2月24日
Copyright(C) 2002-2004 banban@scollabo.com