CSS
仕様の表記CSS1 --- CSS Level 1、CSS Level 2
で定義されている属性と値
CSS2 --- CSS Level 2
で定義されている属性と値
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一覧表を参照してください。
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"> テーブルのセルの背景を黄色、文字を濃い青に指示する
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)"> テーブル全体の背景画像の貼り込みを指示する
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 | 1つだけ表示する | 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">
ページ全体に背景画像の貼り込みを垂直方向に指示する
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">
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におけるコメントの意味でブラウザは無視する
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以降 |
適応要素 :すべての要素
継承 :しない(デフォルト値=各属性の初期値)