超初心者のためのホームページ作成講座
HTML CSS Dictionary Netscape Color AccessUp Links SiteMap

■ 背景に関する設定

プロパティ説明
background-color#rrggbbrr、gg、bb は 00〜ff
カラーネームred、green、blue など
#rgbr、g、b は 0〜f
rgb(n,n,n)n は 0〜255
rgb(n%,n%,n%)n は 0〜100
transparent背景色透過(デフォルト)
background-imageurl("ファイル名")画像ファイル
noneなし
background-repeatrepeat繰り返し(デフォルト)
repeat-x横方向のみ繰り返し
repeat-y縦方向のみ繰り返し
no-repeat繰り返さない
background-attachmentscrollスクロールする(デフォルト)
fixed固定する
background-positionleft
center中央
right
top
middle真ん中
bottom
単位mm,cm,pt,pxなど
親要素の指定値に対する割合
background背景の設定をまとめて指定する

◆背景色を指定する

HTML では、<body> タグに bgcolor プロパティを使ってページ全体の背景色を指定したり、<table> タグ、あるいは <tr> タグ、<td> タグなどで同じように bgcolor プロパティ使ってセルに背景色をつけたりしました。CSS ではこの他に、段落や文字にも背景色をつけることができます。
色の指定方法は前に勉強したとおり、#rrggbbカラーネーム など5種類あります。
transparent プロパティは背景色透過です。つまり、背景に何も指定しないってことです。

(css file)
h3{
text-align:center;
background-color:rgb(128,0,50);
color:rgb(100%,100%,100%);
}
div{
background-color:#30f;
color:#000;
}
span{
font-weight:bold;
background-color:#ff0000;
color:#ffffff;
}

(html file)
<h3>★背景色の設定★</h3>
<div>
CSS を使うと、段落に背景色をつけて、さらに強調したい文字列の背景色だけ別の色にすることができます。文字の色をページの背景色と同じ色にすれば、<span>反転文字</span> にすることができますね。
</div>

★背景色の設定★

CSS を使うと、段落に背景色をつけて、さらに強調したい文字列の背景色だけ別の色にすることができます。文字の色をページの背景色と同じ色にすれば、反転文字にすることができますね。


◆背景画像を指定する

<html>
<head>
<title>背景画像を指定する</title>
<style type="text/css">
<!--
body{ background-image:url("oekaki.gif"); }
div{ background-color:#ccf; color:#000; }
-->
</style>
</head>
<body>
<div>
通常は背景画像を指定すると、ページ全体に敷き詰められますね。
</div>
</body>
</html>

ページはこのように表示されます。
指→ ★ repeat

前述したとおり、CSS では、ページや段落、文字に別々の背景色を設定できます。これと同様に背景画像を段落や文字毎に変えることもできます。


◆背景画像の繰り返しを指定する

<html>
<head>
<title>背景画像を指定する</title>
<style type="text/css">
<!--
body{
background-image:url("oekaki.gif");
background-repeat:repeat-x;
}
div{ background-color:#ccf; color:#000; }
-->
</style>
</head>
<body>
<div>
repeat-x はX方向、つまり横方向にだけ繰り返します。
</div>
</body>
</html>

ページはこのように表示されます。
指→ ★ repeat-x

repeat-x を repeat-y に変えると、ページはこのように表示されます。
指→ ★ repeat-y

repeat-y を no-repeat に変えると、背景画像を繰り返さないようにすることもできます。
指→ ★ no-repeat


◆背景画像のスクロールを指定する

<html>
<head>
<title>背景画像を固定する</title>
<style type="text/css">
<!--
body{
background-image:url("oekaki.gif");
background-repeat:no-repeat; /*背景画像を繰り返さない*/
background-attachment:fixed; /*背景画像固定*/
background-position:50%; /*背景画像の位置は左から50%*/
}
div{
background-color:#ccf;
color:#000;
margin:15% 10%;
padding:2%;
}
-->
</style>
</head>
<body>
<div>
画面をスクロールしても背景画像はそのままです。わかりますか?これは background-attachment を fixed に指定しているからです。
</div>
<div>
background-attachment を scroll にすれば、文章(段落)といっしょにスクロールしますが、デフォルトがスクロールなんで特に指定する必要はないですね。
</div>
<div>
背景画像の位置は background-position で指定しています。ここでは、左から 50% の位置を指定しています。縦位置も指定したい場合は、値を2つ並べて書きます。
</div>
<div>
ここで文章の位置を指定するプロパティを使っています。これについてはボックスに関する設定のところで勉強します。
</div>
<div>
スタイルを指定するところにコメント( /* 〜 */ )を記述しました。画面には表示されません。コメントを入れておくと後から見たときわかりやすいですね。
</div>
</body>
</html>

ページはこのように表示されます。背景画像がスクロールしていないのがわかりますか?
指→ ★ fixed


◆背景画像の位置を指定する

背景画像の位置を指定するときは、background-position プロパティを使います。
プロパティの値は、水平方向は left(左)、center(中央)、right(右)、垂直方向は top(上)、center(真ん中)、bottom(下)を使います。
もっと細かく位置を指定したいときは、長さの単位あるいは%を使うこともできます。値を2つ、スペースで区切って記述します。1つめが左からの位置、2つめが上からの位置になります。%を使った場合で、値を1つしか記述しなかった場合は左からの値となります。


◆背景に関する設定をまとめて行う

background プロパティで、背景に関する設定をまとめて行うことができます。プロパティ値を省略した場合は省略したプロパティのデフォルト値が設定されます。

タグ名{ background:color値 image値 repeat値 attachment値 position値; }