■ 背景に関する設定
| プロパティ | 値 | 説明 |
| background-color | #rrggbb | rr、gg、bb は 00〜ff |
| カラーネーム | red、green、blue など |
| #rgb | r、g、b は 0〜f |
| rgb(n,n,n) | n は 0〜255 |
| rgb(n%,n%,n%) | n は 0〜100 |
| transparent | 背景色透過（デフォルト） |
| background-image | url("ファイル名") | 画像ファイル |
| none | なし |
| background-repeat | repeat | 繰り返し（デフォルト） |
| repeat-x | 横方向のみ繰り返し |
| repeat-y | 縦方向のみ繰り返し |
| no-repeat | 繰り返さない |
| background-attachment | scroll | スクロールする（デフォルト） |
| fixed | 固定する |
| background-position | left | 左 |
| center | 中央 |
| right | 右 |
| top | 上 |
| middle | 真ん中 |
| bottom | 下 |
| 単位 | mm,cm,pt,pxなど |
| ％ | 親要素の指定値に対する割合 |
| background | 背景の設定をまとめて指定する |
◆背景色を指定する
HTML では、<body> タグに bgcolor プロパティを使ってページ全体の背景色を指定したり、<table> タグ、あるいは <tr> タグ、<td> タグなどで同じように bgcolor プロパティ使ってセルに背景色をつけたりしました。CSS ではこの他に、段落や文字にも背景色をつけることができます。
色の指定方法は前に勉強したとおり、#rrggbbやカラーネーム など５種類あります。
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 はＸ方向、つまり横方向にだけ繰り返します。
</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％ の位置を指定しています。縦位置も指定したい場合は、値を２つ並べて書きます。
</div>
<div>
ここで文章の位置を指定するプロパティを使っています。これについてはボックスに関する設定のところで勉強します。
</div>
<div>
スタイルを指定するところにコメント（ /* 〜 */ ）を記述しました。画面には表示されません。コメントを入れておくと後から見たときわかりやすいですね。
</div>
</body>
</html>
ページはこのように表示されます。背景画像がスクロールしていないのがわかりますか？
★ fixed
◆背景画像の位置を指定する
背景画像の位置を指定するときは、background-position プロパティを使います。
プロパティの値は、水平方向は left（左）、center（中央）、right（右）、垂直方向は top（上）、center（真ん中）、bottom（下）を使います。
もっと細かく位置を指定したいときは、長さの単位あるいは％を使うこともできます。値を２つ、スペースで区切って記述します。１つめが左からの位置、２つめが上からの位置になります。％を使った場合で、値を１つしか記述しなかった場合は左からの値となります。
◆背景に関する設定をまとめて行う
background プロパティで、背景に関する設定をまとめて行うことができます。プロパティ値を省略した場合は省略したプロパティのデフォルト値が設定されます。
タグ名{ background:color値 image値 repeat値 attachment値 position値; }
|
