背景
コンテンツに色や背景などに工夫を凝らすことで、印象的な素晴らしいページを表現することができます。背景はインライン要素およびブロック要素ともに指定できます。インラインでは蛍光マークとして利用され事が多くブロック要素では、テーブルやDIV要素などで使われます。
背景に関するプロパティを一括指定するためのプロパティです。複数指定する際は半角スペースで区切ります。指定の順序は問われず、一部だけでもOKです。
| Property： | value:値 | 意味 |
|---|---|---|
| backgrond-image | 背景画像の指定 | |
| ｕｒｌ（http://） | 画像の場所を指定 | |
| ｎｏｎｅ | 画像無し | |
| background-repeat | 画像のタイリング指定 | 画像の並べ方の指定 |
| ｒｅｐｅａｔ | タイルする | |
| ｒｅｐｅａｔ−ｘ | 一番上に横方向に並べる | |
| ｒｅｐｅａｔ−ｙ | 左端に縦に並べる | |
| ｎｏ−ｒｅｐｅａｔ | タイルしないで１個だけ表示 | |
| background-attachment | 背景画像のスクロ−ル制御 | 背景画像の固定を指定 |
| ｓｃｒｏｌｌ | 標準 | |
| ｆｉｘｅｄ | 固定 | |
| background-position | 背景画像の表示位置指定 | （上位置横位置） |
| ％ | 縦横端からの位置 | |
| ｎｎ | 縦横端からの位置 | |
| ｔｏｐ | 一番上に表示（0％） | |
| ｃｅｎｔｅｒ | 中央（50％） | |
| ｂｏｔｔｏｍ | 一番下（100％） | |
| ｌｅｆｔ | 左端 | |
| ｒｉｇｈｔ | 右端 | |
| background-color | 色指定 | 背景色 |
| background-image | 画像 | 背景画像・壁紙 |
| background-repeat | 画像のタイリング指定 | 背景画像の並べ方 |
| background-attachment | スクロ−ル | 背景画像の固定 |
| background-position | 表示位置 | 背景画像の表示位置 |
color文字色を指定する
| 値 | 機能 |
|---|---|
| color | 色名、16進： 文字色を指定する |
適応要素 ：すべての要素
継承 ：する（デフォルト値＝ブラウザ依存）
body {color:#000000}
要素内で指定
<body style="color:#000000">
テーブルのセルの文字を濃い青に指示する
td {color:#0000ff}
要素内で指定
<td style="color:#0000ff">
色についての16進法の使い方は、Color一覧表を参照してください。
| 値 | 機能 |
|---|---|
| color | 色名、16進 (色を指定する) |
| transparent | 親要素と同じ背景色にする |
適応要素 ：すべての要素
継承 ：しない (デフォルト値＝ transparent )
body {background-color:#0000ff;color:#000000}
要素内で指定
<body style="background:#0000ff;color:#000000">
ページ全体の背景を白、文字を黒に指示する
td {color:#000066; background-color:#ffff00}
要素内で指定
<td style="color:#000066;background-color:#ffff00">
テーブルのセルの背景を黄色、文字を濃い青に指示する
| 値 | 機能 |
|---|---|
| url | 背景画像のURLを指定する |
| none | 背景画像を指定しない |
適応要素 ：すべての要素
継承 ：しない ( デフォルト値＝none )
body {background-image:url(../images/back.gif)}
要素内で指定
<body style="background-image:url(../images/back.gif);">
ページ全体の背景画像の貼り込みを指示する
td {background-image:url(../images/back.gif)}
要素内で指定
<td style="background-image:url(../images/back.gif)"> テーブル全体の背景画像の貼り込みを指示する
background-repeat背景画像の並び方を設定する
CSS1
背景画像のリピートを指定するプロパティです。
| 値 | 機能 |
|---|---|
| repeat | 垂直水平方向に繰り返し並べる |
| repeat-x | 水平方向のみ繰り返し並べる |
| repeat-y | 垂直方向のみ繰り返し並べる |
| no-repeat | １つだけ表示する |
適応要素 ：すべての要素
継承 ：しない（デフォルト値＝repeat）
body {background-image:url(../images/back.gif);background-repeat:repeat-x}
要素内で指定
<body style="background-image:url(../images/back.gif); background-repeat:repeat-x">
ページ全体に背景画像の貼り込みを垂直方向に指示する
| 値 | 機能 |
|---|---|
| fixed | 背景画像を固定する |
| scroll | 他の要素と共にスクロールする |
適応要素 ：すべての要素
継承 ：しない (デフォルト値 ＝scroll )
body {background-image:url(../images/back.gif);background-attachment: none}
要素内で指定
<body style="backd-image:url(../images/back.gif); background-attachment:none">
| 値 | 機能 |
|---|---|
| 数値＋単位 | 横方向、縦方向に順に位置を指示する |
| 数値＋％ | 横方向、縦方向に順に位置を指示する |
| top | 上端に背景画像を寄せる |
| center | 中央に背景画像を寄せる |
| bottom | 下端に背景画像を寄せる |
| left | 左端に背景画像を寄せる |
| right | 右端に背景画像を寄せる |
適応要素 ：ブロックレベル要素
継承 ：しない（デフォルト値＝0% 0%）
body { background-image:url(../images/back.gif); background-repeat:none; background:position:0% 0%}
要素内で指定
<body style="background-image:url(../images/back.gif); background-repeat:none;
background:position:0% 0%">
/*一行で記述すること
（注）/* はCSSにおけるコメントの意味でブラウザは無視する
background背景に関する属性をまとめて設定する
CSS1
| 値 | 機能 |
|---|---|
| background-color | 背景色の設定 |
| background-image | 背景に画像を貼り込む |
| background-repeat | 背景画像の並び方の設定 |
| background-attachment | 固定/スクロールの設定 |
| background-position | 背景画像の位置の設定 |
適応要素 ：すべての要素
継承 ：しない（デフォルト値＝各属性の初期値）
目的別属性
広告