contents

CSS リファレンス編

背景

background-color

【説 明】

テキストやドキュメント全体の背景色を指定します。


【 値 】

●透明

transparent

特に色を指定していない場合と同様の結果になります。

●色の名前で指定

 以下の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の範囲で指定することができます。


【使用例】

以下の例では、それぞれ「H1」と「BODY」(ドキュメント全体)の背景に赤を指定する別々の方法を示しています。

H1 { background-color: red }
H1 { background-color: #ff0000 }
H1 { background-color: #f00 }
BODY { background-color: rgb(255, 0, 0) }
BODY { background-color: rgb(100%, 0%, 0%) }


background-image

【説 明】

テキストやドキュメント全体の背景画像を指定します。


【 値 】

背景画像のURLを指定します。

・url(画像のURL)


【使用例】

以下の例では、「P」タグの部分の背景画像に「back03.gif」を指定しています。

P { background-image: url(/images/b02.gif) }


以下の例では、ドキュメントの背景画像に「back.gif」を指定しています。

BODY { background-image: url(http://zspc.com/back.gif) }


background-repeat

【説 明】

背景画像をどのように並べて表示するかを指定します。


【 値 】

repeat

<BODY>タグの「BACKGROUND=」で指定した場合と同様に、縦横に画像を並べて背景を埋めつくすように表示します。

repeat-x

背景画像を一番上に横方向に1列だけ並べて表示します。

repeat-y

背景画像を左側に縦方向に1列だけ並べて表示します。

no-repeat

画像を並べずに、1つだけ表示します。


【使用例】

以下の例では「background」プロパティで背景色と背景画像を設定し、背景画像を縦に1列だけ表示するように指定しています。

BODY {
    background: white url(leftside.gif);
    background-repeat: repeat-y
}


background-attachment

【説 明】

背景画像をページのその他の内容とともにスクロールさせる(通常の状態)か、常に固定された位置に表示するかを指定します。


【 値 】

scroll

背景画像をページのその他の内容とともにスクロールするようにします。標準の状態です。

fixed

背景画像をページのその他の内容とは別に、常に固定された位置に表示するようにします。


【使用例】

以下の例では、ドキュメントをスクロールさせても、背景画像だけはスクロールせずに同じ位置に固定されて表示されます。

BODY {
    background: white url(leftside.gif);
    background-attachment: fixed
}


background-position

【説 明】

背景画像の表示位置を指定します。通常はタグで指定されたブロックの範囲内での位置指定になりますが、「background-attachment」で「fixed」が指定されている場合に限り、そのウインドウの描画エリア全体での位置指定となります。


【 値 】

●数値またはパーセントで指定

「横方向の位置」「縦方向の位置」の順に指定します。1つしか指定しなかった場合は、横方向の位置と解釈され、縦方向は「50%」が指定されたことになります。数値とパーセントを組み合わせて使用することもできます。

ピクセルやミリメートルなどの単位をつけて、数値で位置が指定された場合には、画像の左上が、そのブロック範囲の左上から指定された位置までそれぞれ右下方向にずれた位置に表示されます。指定できる数値と単位については、「CSS解説編 数値の単位」を参照してください。

位置がパーセントで指定された場合には、画像の左上から縦横それぞれ指定されたパーセントの位置が、そのブロック範囲の左上から縦横それぞれ指定されたパーセントの位置にあわせて表示されます。したがって、「0% 0%」の場合は、画像の左上とブロック範囲の左上が一致し、「100% 100%」の場合は、画像の右下とブロック範囲の右下が一致する位置に表示されます。

●位置を表わすキーワードで指定

以下のキーワードで、それぞれ横と縦の位置を指定することができます。1つしか指定しなかった場合は、指定されなかった方向に「center」が指定されたことになります。数値やパーセントでの指定方法と組み合わせて使用することはできません。

・left    (  0%と同様)
・center  ( 50%と同様)
・right   (100%と同様)

・top     (  0%と同様)
・center  ( 50%と同様)
・bottom  (100%と同様)


【使用例】

以下の例では「background-attachment」に「fixed」を指定していますので、ウインドウの描画エリアに対して中央の位置に背景画像を表示します。
BODY {
    background-image: url(back.gif);
    background-attachment: fixed;
    background-position: 50% 50%
}


以下の例では、背景画像の左上が、<P>タグで指定されたブロック範囲の左から2cm、上から3cmの位置になるように表示されます。

P {
    background-image: url(back.gif);
    background-position: 2cm 3cm
}


以下の例では「50% 0%」が指定された場合と同様に表示されます。

BODY {
    background-image: url(back.gif);
    background-position: top center
}

background

【説 明】

「background」プロパティを使用すると、背景に関する様々な指定を一度に行うことができます。


【 値 】

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

・background-color

・background-image

・background-repeat

・background-attachment

・background-position


【使用例】

以下の例では、「background」プロパティの様々な指定方法を示しています。

BODY { background: black }

P { background: #ff0000 url(bkg.gif) }

P { background: url(bkg.gif) blue 50% repeat fixed }