Home | CSSリファレンス目次 | 背景 | フォント

CSSリファレンス -- 背景

[背景] [フォント] [テキスト]  [ボックス] [配置] [リスト] [TABLE] [擬似] [UI]

[印刷] [音声]

CSS仕様の表記

CSS1 --- CSS Level 1、CSS Level 2で定義されている属性と値

CSS2 --- CSS Level 2で定義されている属性と値

color 文字色を指定する

CSS仕様: CSS1

値 機能 Windows Macintosh
color 色名、16進： 文字色を指定する IE3以降 NS3以降 IE3以降 NS3以降

適応要素 ：すべての要素

継承 ：する（デフォルト値＝ブラウザ依存）

ページ全体の文字を黒に指示する
body {color:#000000}
<body style="color:#000000">

テーブルのセルの文字を濃い青に指示する
td {color:#006}
<td style="color:#006">

色についての16進法の使い方は、WebSafeColor一覧表を参照してください。

PageTop

background-color 背景色を指定する

CSS仕様: CSS1

値 機能 Windows Macintosh
color 色名、16進 (色を指定する) IE3以降 NS以降 IE3以降 NS3以降
transparent 親要素と同じ背景色にする IE4以降 NS4以降 IE4以降 NS4以降

適応要素 ：すべての要素

継承 ：しない (デフォルト値＝transparent)

＜サンプル＞
body {background-color:#fff;color:#000}
<body style="background:#fff;color:#000">
ページ全体の背景を白、文字を黒に指示する

td {color:#006; background-color:#ff0}
<td style="color:#000066;background-color:#ffff00">
テーブルのセルの背景を黄色、文字を濃い青に指示する

PageTop

background-image 背景に貼り込む画像を指定する

CSS仕様: CSS1

値 機能 Windows Macintosh
url 背景画像のURLを指定する IE3以降 NS3以降 IE3以降 NS3以降
none 背景画像を指定しない IE4以降 NS4以降 IE4以降 NS4以降

適応要素 ：すべての要素

継承 ：しない ( デフォルト値＝ 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)">
テーブル全体の背景画像の貼り込みを指示する

PageTop

background-repeat 背景画像の並び方を設定する

CSS仕様: CSS1

値 機能 Windows Macintosh Sample
repeat 垂直水平方向に繰り返し並べる IE4以降 NS6以降 IE4以降 NS6以降 なし
repeat-x 水平方向のみ繰り返し並べる IE4以降 NS6以降 IE4以降 NS6以降 Sample09
repeat-y 垂直方向のみ繰り返し並べる IE4以降 NS6以降 IE4以降 NS6以降 Sample10
norepeat １つだけ表示する IE4以降 NS6以降 IE4以降 NS6以降 Sample11

適応要素 ：すべての要素

継承 ：しない（デフォルト値＝repeat）

＜サンプル＞
body { background-image:   url(../images/back.gif);
       background-repeat:  repeat-x }

<body style="background-image:url(../images/back.gif);
         background-repeat:repeat-x">

ページ全体に背景画像の貼り込みを垂直方向に指示する

PageTop

background-attachment 背景画像の固定/スクロールを指示する

CSS仕様: CSS1

値 機能 Windows Macintosh Sample
fixed 背景画像を固定する IE4以降 NS6以降 IE4以降 NS6以降 Sample08
scroll 他の要素と共にスクロールする IE4以降 NS6以降 IE4以降 NS6以降 なし

適応要素 ：すべての要素

継承 ：しない (デフォルト値 ＝ scroll)

背景画像が固定されて動かなくなるように指示する
body { background-image:       url(../images/back.gif);
       background-attachment: fixed }

<body style="background-image:url(../images/back.gif);
         background-attachment:fixed">

PageTop

background-position 背景画像の位置を指示する

CSS仕様: CSS1

値 機能 Windows Macintosh Sample
数値＋単位 横方向、縦方向に順に位置を指示する IE4以降 NS6以降 IE4以降 NS6以降 Sample01
数値＋％ 横方向、縦方向に順に位置を指示する IE4以降 NS6以降 IE4以降 NS6以降 Sample02
top 上端に背景画像を寄せる IE4以降 NS6以降 IE4以降 NS6以降 Sample03
center 中央に背景画像を寄せる IE4以降 NS6以降 IE4以降 NS6以降 Sample04
bottom 下端に背景画像を寄せる IE4以降 NS6以降 IE4以降 NS6以降 Sample05
left 左端に背景画像を寄せる IE4以降 NS6以降 IE4以降 NS6以降 Sample06
right 右端に背景画像を寄せる IE4以降 NS6以降 IE4以降 NS6以降 Sample07

適応要素 ：ブロックレベル要素

継承 ：しない（デフォルト値＝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におけるコメントの意味でブラウザは無視する

PageTop

background 背景に関する属性をまとめて設定する

CSS仕様: CSS1

値 機能 Windows Macintosh
background-color 背景色の設定 IE3以降 NS4以降 IE3以降 NS4以降
background-image 背景に画像を貼り込む IE4以降 NS4以降 IE4以降 NS6以降
background-repeat 背景画像の並び方の設定 IE4以降 NS4以降 IE4以降 NS4以降
background-attachment 固定/スクロールの設定 IE4以降 NS6以降 IE4以降 NS6以降
background-position 背景画像の位置の設定 IE4以降 NS6以降 IE4以降 NS6以降

適応要素 ：すべての要素

継承 ：しない（デフォルト値＝各属性の初期値）

PageTop / Home / Index
This Page is HTML4.01 Valid! 初版更新日 2002年5月2日   最新更新日 2004年2月23日
Copyright(C) 2002-2004 banban@scollabo.com