contents

CSS リファレンス編

ボックス

margin-top

【説 明】

上マージンを設定します。

ボックスは、下図のような構造になっています。


【 値 】

auto

上マージンを自動的に設定します。

●単位つきの数値で直接指定

ポイントやミリメートルなどの単位をつけて、数値で上マージンを直接指定します。指定できる数値と単位については、「CSS解説編 数値の単位」を参照してください。

●パーセントで指定

ボックスを含む範囲の幅に対するパーセントで指定します。


【使用例】

以下の例では、上マージンを「3em」に設定しています。

H1 { margin-top: 3em }


margin-right

【説 明】

右マージンを設定します。

ボックスは、下図のような構造になっています。


【 値 】

auto

右マージンを自動的に設定します。

●単位つきの数値で直接指定

ポイントやミリメートルなどの単位をつけて、数値で右マージンを直接指定します。指定できる数値と単位については、「CSS解説編 数値の単位」を参照してください。

●パーセントで指定

ボックスを含む範囲の幅に対するパーセントで指定します。


【使用例】

以下の例では、右マージンを「20%」に設定しています。

H1 { margin-right: 20% }


margin-bottom

【説 明】

下マージンを設定します。

ボックスは、下図のような構造になっています。


【 値 】

auto

下マージンを自動的に設定します。

●単位つきの数値で直接指定

ポイントやミリメートルなどの単位をつけて、数値で下マージンを直接指定します。指定できる数値と単位については、「CSS解説編 数値の単位」を参照してください。

●パーセントで指定

ボックスを含む範囲の幅に対するパーセントで指定します。


【使用例】

以下の例では、下マージンを「3em」に設定しています。

H1 { margin-bottom: 3em }


margin-left

【説 明】

左マージンを設定します。

ボックスは、下図のような構造になっています。


【 値 】

auto

左マージンを自動的に設定します。

●単位つきの数値で直接指定

ポイントやミリメートルなどの単位をつけて、数値で左マージンを直接指定します。指定できる数値と単位については、「CSS解説編 数値の単位」を参照してください。

●パーセントで指定

ボックスを含む範囲の幅に対するパーセントで指定します。


【使用例】

以下の例では、左マージンを「3em」に設定しています。

H1 { margin-left: 3em }


margin

【説 明】

「margin」プロパティを使用すると、上・右・下・左のマージンを一度に設定できます。

ボックスは、下図のような構造になっています。


【 値 】

4つ以内の値をスペースで区切って記述します。値の数によって以下のようにマージンが設定されます。

・1つの場合
上下左右にその値が設定されます。

・2つの場合
1つめが上下、2つめが左右に設定されます。

・3つの場合
各値が上・右・下に設定され、左は右と同様に設定されます。

・4つの場
各値が上・右・下・左の順で設定されます。

auto

各マージンを自動的に設定します。

●単位つきの数値で直接指定

ポイントやミリメートルなどの単位をつけて、数値で各マージンを直接指定します。指定できる数値と単位については、「CSS解説編 数値の単位」を参照してください。

●パーセントで指定

ボックスを含む範囲の幅に対するパーセントで指定します。


【使用例】

以下の例では、上下左右のマージンを「4em」に設定しています。

BODY { margin: 4em }


以下の例では、上下のマージンを「3em」、左右のマージンを「5em」に設定しています。

BODY { margin: 3em 5em }


以下の例では、上を「1em」、右を「2em」、下を「3em」、左を右と同様の「2em」に設定しています。

BODY { margin: 1em 2em 3em }


以下の例では、上・右・下・左のマージンをそれぞれ「1em」「2em」「3em」「4em」に設定しています。

BODY { margin: 1em 2em 3em 4em }


padding-top

【説 明】

上パディングを設定します。

パディングとは、コンテント(Content)と枠(Border)の間隔です。

ボックスは、下図のような構造になっています。


【 値 】

●単位つきの数値で直接指定

ポイントやミリメートルなどの単位をつけて、数値で上パディングを直接指定します。指定できる数値と単位については、「CSS解説編 数値の単位」を参照してください。

●パーセントで指定

ボックスを含む範囲の幅に対するパーセントで指定します。


【使用例】

以下の例では、上パディングを「0.5em」に設定しています。

BLOCKQUOTE { padding-top: 0.5em }


padding-right

【説 明】

右パディングを設定します。

パディングとは、コンテント(Content)と枠(Border)の間隔です。

ボックスは、下図のような構造になっています。


【 値 】

●単位つきの数値で直接指定

ポイントやミリメートルなどの単位をつけて、数値で右パディングを直接指定します。指定できる数値と単位については、「CSS解説編 数値の単位」を参照してください。

●パーセントで指定

ボックスを含む範囲の幅に対するパーセントで指定します。


【使用例】

以下の例では、右パディングを「8px」に設定しています。

BLOCKQUOTE { padding-right: 8px }


padding-bottom

【説 明】

下パディングを設定します。

パディングとは、コンテント(Content)と枠(Border)の間隔です。

ボックスは、下図のような構造になっています。


【 値 】

●単位つきの数値で直接指定

ポイントやミリメートルなどの単位をつけて、数値で下パディングを直接指定します。指定できる数値と単位については、「CSS解説編 数値の単位」を参照してください。

●パーセントで指定

ボックスを含む範囲の幅に対するパーセントで指定します。


【使用例】

以下の例では、下パディングを「1em」に設定しています。

BLOCKQUOTE { padding-bottom: 1em }


padding-left

【説 明】

左パディングを設定します。

パディングとは、コンテント(Content)と枠(Border)の間隔です。

ボックスは、下図のような構造になっています。


【 値 】

●単位つきの数値で直接指定

ポイントやミリメートルなどの単位をつけて、数値で左パディングを直接指定します。指定できる数値と単位については、「CSS解説編 数値の単位」を参照してください。

●パーセントで指定

ボックスを含む範囲の幅に対するパーセントで指定します。


【使用例】

以下の例では、左パディングを「10%」に設定しています。

BLOCKQUOTE { padding-left: 10% }


padding

【説 明】

「padding」プロパティを使用すると、上・右・下・左のパディングを一度に設定できます。

パディングとは、コンテント(Content)と枠(Border)の間隔です。

ボックスは、下図のような構造になっています。


【 値 】

4つ以内の値をスペースで区切って記述します。値の数によって以下のようにパディングが設定されます。

・1つの場合
上下左右にその値が設定されます。

・2つの場合
1つめが上下、2つめが左右に設定されます。

・3つの場合
各値が上・右・下に設定され、左は右と同様に設定されます。

・4つの場
各値が上・右・下・左の順で設定されます。

●単位つきの数値で直接指定

ポイントやミリメートルなどの単位をつけて、数値で各パディングを直接指定します。指定できる数値と単位については、「CSS解説編 数値の単位」を参照してください。

●パーセントで指定

ボックスを含む範囲の幅に対するパーセントで指定します。


【使用例】

以下の例では、上下左右のパディングを「4em」に設定しています。

BODY { padding: 4em }


以下の例では、上下のパディングを「3em」、左右のパディングを「5em」に設定しています。

BODY { padding: 3em 5em }


以下の例では、上を「1em」、右を「2em」、下を「3em」、左を右と同様の「2em」に設定しています。

BODY { padding: 1em 2em 3em }


以下の例では、上・右・下・左のパディングをそれぞれ「1em」「2em」「3em」「4em」に設定しています。

BODY { padding: 1em 2em 3em 4em }


border-top-width

【説 明】

上枠(Border)の太さを設定します。

ボックスは、下図のような構造になっています。


【 値 】

以下に説明する「thin」「medium」「thick」のそれぞれの実際の太さは、使用するブラウザに依存します。

thin

細く設定します。

medium

中くらいに設定します。

thick

太く設定します。

●単位つきの数値で直接指定

ポイントやミリメートルなどの単位をつけて、数値で上枠の太さを直接指定します。指定できる数値と単位については、「CSS解説編 数値の単位」を参照してください。


【使用例】

以下の例では、上枠の太さを「0.3em」に設定しています。

P { border-top-width: 0.3em }


border-right-width

【説 明】

右枠(Border)の太さを設定します。

ボックスは、下図のような構造になっています。


【 値 】

以下に説明する「thin」「medium」「thick」のそれぞれの実際の太さは、使用するブラウザに依存します。

thin

細く設定します。

medium

中くらいに設定します。

thick

太く設定します。

●単位つきの数値で直接指定

ポイントやミリメートルなどの単位をつけて、数値で右枠の太さを直接指定します。指定できる数値と単位については、「CSS解説編 数値の単位」を参照してください。


【使用例】

以下の例では、右枠の太さを「0.3em」に設定しています。

P { border-right-width: 0.3em }


border-bottom-width

【説 明】

下枠(Border)の太さを設定します。

ボックスは、下図のような構造になっています。


【 値 】

以下に説明する「thin」「medium」「thick」のそれぞれの実際の太さは、使用するブラウザに依存します。

thin

細く設定します。

medium

中くらいに設定します。

thick

太く設定します。

●単位つきの数値で直接指定

ポイントやミリメートルなどの単位をつけて、数値で下枠の太さを直接指定します。指定できる数値と単位については、「CSS解説編 数値の単位」を参照してください。


【使用例】

以下の例では、下枠の太さを「0.3em」に設定しています。

P { border-bottom-width: 0.3em }


border-left-width

【説 明】

左枠(Border)の太さを設定します。

ボックスは、下図のような構造になっています。


【 値 】

以下に説明する「thin」「medium」「thick」のそれぞれの実際の太さは、使用するブラウザに依存します。

thin

細く設定します。

medium

中くらいに設定します。

thick

太く設定します。

●単位つきの数値で直接指定

ポイントやミリメートルなどの単位をつけて、数値で左枠の太さを直接指定します。指定できる数値と単位については、「CSS解説編 数値の単位」を参照してください。


【使用例】

以下の例では、左枠の太さを「0.3em」に設定しています。

P { border-left-width: 0.3em }


border-width

【説 明】

「border-width」プロパティを使用すると、上・右・下・左の枠(Border)の太さを一度に設定できます。

ボックスは、下図のような構造になっています。


【 値 】

4つ以内の値をスペースで区切って記述します。値の数によって以下のように枠の太さが設定されます。

・1つの場合
上下左右にその値が設定されます。

・2つの場合
1つめが上下、2つめが左右に設定されます。

・3つの場合
各値が上・右・下に設定され、左は右と同様に設定されます。

・4つの場
各値が上・右・下・左の順で設定されます。


以下に説明する「thin」「medium」「thick」のそれぞれの実際の太さは、使用するブラウザに依存します。

thin

細く設定します。

medium

中くらいに設定します。

thick

太く設定します。

●単位つきの数値で直接指定

ポイントやミリメートルなどの単位をつけて、数値で各枠の太さを直接指定します。指定できる数値と単位については、「CSS解説編 数値の単位」を参照してください。


【使用例】

以下の例では、上下左右の枠の太さを「4em」に設定しています。

P { border-width: 4em }


以下の例では、上下の枠の太さを「3em」、左右の枠の太さを「5em」に設定しています。

P { border-width: 3em 5em }


以下の例では、上を「1em」、右を「2em」、下を「3em」、左を右と同様の「2em」に設定しています。

P { border-width: 1em 2em 3em }


以下の例では、上・右・下・左の枠の太さをそれぞれ「1em」「2em」「3em」「4em」に設定しています。

P { border-width: 1em 2em 3em 4em }


border-color

【説 明】

「border-color」プロパティを使用すると、上・右・下・左の枠(Border)の色を一度に設定できます。

「border-color」プロパティで色を指定しない場合で、「color」プロパティが指定されている場合にはその色に設定されます。

ボックスは、下図のような構造になっています。


【 値 】

4つ以内の色の値をスペースで区切って記述します。値の数によって以下のように色が設定されます。

・1つの場合
上下左右にその値が設定されます。

・2つの場合
1つめが上下、2つめが左右に設定されます。

・3つの場合
各値が上・右・下に設定され、左は右と同様に設定されます。

・4つの場
各値が上・右・下・左の順で設定されます。


●色の名前で指定

 以下の16種類の色名が定義されています。

 aqua   gray   navy   silver 
 black   green   olive   teal 
 blue   lime   purple   white 
 fuchsia   maroon   red   yellow 

●16進数のRGB値で指定

#rrggbb

この指定方法は、HTMLでの指定方法と同様です。"#"の後にRGBのR(red)とG(green)とB(blue)の値をそれぞれ2桁の16進数で表わした計6桁の色の値で指定します。これについては「Super Color Chart」を利用すると簡単に指定する値を知ることができます。

#rgb

この指定方法は、上記の方法と同様ですが、RGBのR(red)とG(green)とB(blue)の値をそれぞれ1桁の16進数で表わした計3桁で指定します。
この場合、rgbの実際の値は、それぞれの桁の前に0が付加されるのではなく、指定した数値が2つ並べて指定された値になります。つまり、「#f36」と指定すると「#0f0306」ではなく、「#ff3366」の値になります。

●10進数のRGB値で指定

rgb(n, n, n)

この指定方法では、rgbの後に続く()の中に、RGBのR(red)とG(green)とB(blue)の値をそれぞれ10進数で指定します。それぞれの値は0から255の範囲で指定することができます。

rgb(n%, n%, n%)

この指定方法では、rgbの後に続く()の中に、RGBのR(red)とG(green)とB(blue)の値をそれぞれパーセントで指定します。それぞれの値は0から100の範囲で指定することができます。


【使用例】

以下の例では、それぞれ「P」タグの範囲の上下左右の枠(Border)に赤を指定する別々の方法を示しています。

P { border-color: red }
P { border-color: #ff0000 }
P { border-color: #f00 }
P { border-color: rgb(255, 0, 0) }
P { border-color: rgb(100%, 0%, 0%) }


以下の例では、上下の枠の色を「黒」、左右の枠の色を「グレー」に設定しています。

P { border-color: black gray }


以下の例では、上を「黒」、右を「グレー」、下を「赤」、左を右と同様の「グレー」に設定しています。

P { border-color: black gray red }


以下の例では、上・右・下・左の枠の色をそれぞれ「赤」「黄色」「水色」「青」に設定しています。

P { border-color: red yellow aqua blue }


border-style

【説 明】

「border-style」プロパティを使用すると、上・右・下・左の枠(Border)のスタイルを一度に設定できます。

ボックスは、下図のような構造になっています。


【 値 】

4つ以内のスタイルをスペースで区切って記述します。値の数によって以下のようにスタイルが設定されます。

・1つの場合
上下左右にその値が設定されます。

・2つの場合
1つめが上下、2つめが左右に設定されます。

・3つの場合
各値が上・右・下に設定され、左は右と同様に設定されます。

・4つの場
各値が上・右・下・左の順で設定されます。


・none
枠(Border)を表示しません。「border-style」を指定しなかった場合には、この状態になります。

・dotted
枠(Border)を点で表示します。

・dashed
枠(Border)を点線で表示します。

・solid
枠(Border)を線(単一の色で塗りつぶし)で表示します。

・double
枠(Border)を2本線で表示します。

・groove
枠(Border)が引っ込んでいるように立体的に表示します。

・ridge
枠(Border)が出っ張っているように立体的に表示します。

・inset
ボックス全体が引っ込んで見えるように枠(Border)を立体的に表示します。

・outset
ボックス全体が出っ張って見えるように枠(Border)を立体的に表示します。

Example


【使用例】

以下の例では、上下左右の枠を指定された色で表示するように設定しています。

P { border-style: solid }


border-top

【説 明】

「border-top」プロパティを使用すると、上枠(Border)の「太さ」と「スタイル」と「色」を一度に設定することができます。


【 値 】

以下のプロパティの値をそれぞれスペースで区切って指定します。必要のないものは省略することができます。

・border-top-width

・border-style

・color

この場合、「border-style」には1つの値しか指定できません。


【使用例】

以下の例では、上枠(Border)を青で太く表示します。

H1 { border-top: thick solid blue }


border-right

【説 明】

「border-right」プロパティを使用すると、右枠(Border)の「太さ」と「スタイル」と「色」を一度に設定することができます。


【 値 】

以下のプロパティの値をそれぞれスペースで区切って指定します。必要のないものは省略することができます。

・border-right-width

・border-style

・color

この場合、「border-style」には1つの値しか指定できません。


【使用例】

以下の例では、右枠(Border)を青で太く表示します。

H1 { border-right: thick solid blue }


border-bottom

【説 明】

「border-bottom」プロパティを使用すると、下枠(Border)の「太さ」と「スタイル」と「色」を一度に設定することができます。


【 値 】

以下のプロパティの値をそれぞれスペースで区切って指定します。必要のないものは省略することができます。

・border-bottom-width

・border-style

・color

この場合、「border-style」には1つの値しか指定できません。


【使用例】

以下の例では、下枠(Border)を青で太く表示します。

H1 { border-bottom: thick solid blue }


border-left

【説 明】

「border-left」プロパティを使用すると、左枠(Border)の「太さ」と「スタイル」と「色」を一度に設定することができます。


【 値 】

以下のプロパティの値をそれぞれスペースで区切って指定します。必要のないものは省略することができます。

・border-left-width

・border-style

・color

この場合、「border-style」には1つの値しか指定できません。


【使用例】

以下の例では、左枠(Border)を青で太く表示します。

H1 { border-left: thick solid blue }


border

【説 明】

「border」プロパティを使用すると、上下左右の枠(Border)の「太さ」と「スタイル」と「色」を一度に設定することができます。 ただし、この方法では上下左右に対して同じものしか設定できません。

特定の枠に異なるプロパティを設定したい場合は、「border」を設定した後に再設定します。


【 値 】

以下のプロパティの値をそれぞれスペースで区切って指定します。必要のないものは省略することができます。

・border-width

・border-style

・color

この場合、「border-width」と「border-style」にはそれぞれ1つの値しか指定できません。


【使用例】

以下の例では、上下左右の枠(Border)に同じ「太さ」「スタイル」「色」を指定するための2つの方法を示しています。

P { border: thick solid blue }

P {
    border-top: thick solid blue ;
    border-right: thick solid blue ;
    border-bottom: thick solid blue ;
    border-left: thick solid blue 
}


width

【説 明】

ボックス内の実際に文字や画像が表示されるエリア(Content)の幅(Width)を設定します。

ボックスは、下図のような構造になっています。


【 値 】

auto

幅を自動的に設定します。Content が画像などの場合で「height」も「auto」に設定されている場合は、実際のサイズに設定されます。「height」に実際のサイズと異なるサイズが指定されている場合には、自動的にその比率に合わせて拡大縮小します。

●単位つきの数値で直接指定

ポイントやミリメートルなどの単位をつけて、数値で幅を直接指定します。指定できる数値と単位については、「CSS解説編 数値の単位」を参照してください。

●パーセントで指定

ボックスを含む範囲の幅に対するパーセントで指定します。


【使用例】

以下の例では、幅を80ピクセルに設定しています。

IMG.button { width: 80px }


height

【説 明】

ボックス内の実際に文字や画像が表示されるエリア(Content)の高さ(Height)を設定します。

ボックスは、下図のような構造になっています。


【 値 】

auto

高さを自動的に設定します。Content が画像などの場合で「width」も「auto」に設定されている場合は、実際のサイズに設定されます。「width」に実際のサイズと異なるサイズが指定されている場合には、自動的にその比率に合わせて拡大縮小します。

●単位つきの数値で直接指定

ポイントやミリメートルなどの単位をつけて、数値で高さを直接指定します。指定できる数値と単位については、「CSS解説編 数値の単位」を参照してください。


【使用例】

以下の例では、高さを20ピクセルに設定しています。

IMG.button { height: 20px }


float

【説 明】

<IMG>タグの「ALIGN=」属性の指定と同様に、ボックスをテキストの左右に配置するための指定です。このプロパティは画像以外にも使用することができます。


【 値 】

none

特に回り込みをしない設定です。

left

ボックスをテキストの左に配置します。

right

ボックスをテキストの右に配置します。


【使用例】

以下の例では、画像を文字の左側に表示させます。

IMG.button { float: left }


clear

【説 明】

上記の「float」の指定を解除するための指定です。<BR>タグの「CLEAR=」属性の指定と同様の働きをします。


【 値 】

none

両側の回り込みを許可します。

left

左側にあるボックスの右側にテキストを表示する指定を解除します。

right

右側にあるボックスの左側にテキストを表示する指定を解除します。

both

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


【使用例】

以下の例では、左側にあるボックスの右側にテキストを表示する指定を解除します。

H1 { clear: left }