仕様書の規範的なバージョンはW3Cのサイトにある英語版である。翻訳された文書は翻訳からの誤りが含まれているかもしれない。
Copyright ©2001 W3C® (MIT, INRIA, Keio), All Rights Reserved. W3C liability, trademark, document use and software licensing rules apply.
CSS(カスケードを行うスタイルシート)は、HTMLやXMLの文書の画面上、紙面上、話すことにおける表現を記述する言語である。この草案はCSSの水準3に対して提案される、背景色や、背景画像といった、機能を説明する。CSSの水準1[CSS1]に基礎を置いているCSSの水準2[CSS2]の機能を包含し、そしてそれを拡張する。
この文書は、近々実現するCSS3の仕様書に対する"モジュール"[CSS3-intro]のひとつの草案である。CSS1およびCSS2にすでに存在する背景の機能を説明するだけでなく、CSS3に対しても、必要であろうほかの言語に対しても、新しい機能も提供する。(この草案はまだ新しい機能を何も提案していないが、将来のバージョンはすることになるだろう。)
この文書はスタイルに関する活動の一部であるCSSの策定を行うグループの策定中の草案である。
この草案への批評、議論は、(記録された)公開のメーリングリストwww-style@w3.org(使用説明書)上に送ることができる。W3Cの会員は、CSSの策定を行うグループに直接に批評を送ることもできる。
これは策定中の草案であり、それゆえに、いつでもほかのW3Cの文書によって更新されたり、取って代わられたり、時代遅れにされたりするかもしれない。W3Cの策定中の草案を参考資料として用いたり、あるいは"策定進行中"とは別のものとして引用したりすることは不適当である。その発行はW3Cの会員資格あるいはCSSの策定を行うグループ (会員専用)による保証は伴わない。
この策定中の草案の最新のバージョンを見つけるには、上の"最新のバージョン"というリンクをたどってくださるか、W3Cの技術報告の一覧表を訪れてください。
この文書は未来には将来翻訳で利用可能になるかもしれない。ただこの仕様書の英語版だけが規範的なバージョンである。
CSSの策定を行うグループの会員は、Clamartの会議の間、CSSの仕様書をモジュール化するつもりである。
CSSのこのモジュール化および全般の構文の外面化は、仕様書の大きさを減らし、仕様書の新しい種類のセレクタおよび/あるいはCSSの全般の構文を用いることを可能にするだろう。
この仕様書は、この文書の中で紹介された構想ごとにひとつの検査という、固有の検査の事例を含むだろう。その検査は適合するための十分な検査ではないだろうが、ユーザに、この仕様書の一部が少なくとも最低限実装されているかどうか、逆にまったく実装されていないか調べる方法を提供するつもりである。
編集者の注:新しいプロパティ('background-size')は近い未来にこの仕様書に加えられるだろう。
'Background-clip'と'background-origin'が新しいものである。
作者は、要素の背景(すなわち、その描写の表面)を色として明示するかもしれないし、または画像として明示するかもしれない。枠のモデル[CSS3-box]の見地から、"background"は内容、パディングとボーダーの範囲の背景に言及する。マージンは常に透明であるので、親の枠の背景は貫いて輝く。
背景のプロパティは継承されないが、親の枠の背景は、'background-color'に関する'transparent'という初期値のためにデフォルトで貫いて輝く。
ルートの要素が生成した枠の背景は全体のキャンバスを覆う。
HTML文書に対しては、しかしながら、作者がHTMLという要素よりもむしろBODYという要素に対して背景を明示することを推奨する。ユーザエージェントは、背景の中を満たすための次に続く優先規則を遵守すべきである。もしもHTMLという要素に対する'background'というプロパティの値が'transparent'と異なれば、それを用い、そうでなければ、BODYという要素に対する'background' というプロパティの値を用いよ。もしも帰着する値が'transparent'であれば、描写は未定義である。
これらの規則にしたがって、以下に続くHTMLの文書の基礎となるキャンバスは、"marble"の背景を持つ。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Setting the canvas background</TITLE>
<STYLE type="text/css">
BODY { background: url("http://style.com/marble.png") }
</STYLE>
</HEAD>
<BODY>
<P>My background is marble.
</BODY>
</HTML>
| 名称: | background-color |
| 値: | <color> | transparent | inherit |
| 初期値: | transparent |
| 適用先: | すべての要素 |
| 継承: | なし |
| パーセンテージ: | 適用不可 |
| 媒体: | 視覚 |
このプロパティは、<color>という値か、または下にある色を貫いて輝かせるためのキーワードである'transparent'かのいずれかという要素の背景色を定める。
H1 { background-color: #F00 }
| 名称: | background-image |
| 値: | <uri> | none | inherit |
| 初期値: | none |
| 適用先: | すべての要素 |
| 継承: | なし |
| パーセンテージ: | 適用不可 |
| 媒体: | 視覚 |
このプロパティは要素の背景画像を定める。背景画像を定めるとき、作者は、画像が利用可能でないとき用いられる背景色もまた明示するべきである。画像が利用可能であるとき、背景色の上部にくっついて描写される。(だから、色は画像の透明な部分において見える)。
このプロパティに対する値は、画像を明示するための<uri>かまたは画像が何も用いられないときの'none'かのいずれかである。
BODY { background-image: url("marble.gif") }
P { background-image: none }
| 名称: | background-repeat |
| 値: | repeat | repeat-x | repeat-y | no-repeat | inherit |
| 初期値: | repeat |
| 適用先: | すべての要素 |
| 継承: | なし |
| パーセンテージ: | 適用不可 |
| 媒体: | 視覚 |
もしも背景画像が明示されれば、このプロパティは画像が繰り返されるか(敷き詰められるか)どうかを明示する。全部の敷き詰めは、枠の内容、パディングとボーダーの範囲に及ぶ。値は以下に続く意味を持っている。
BODY {
background: white url("pendant.gif");
background-repeat: repeat-y;
background-position: center;
}
背景画像の一つの写しが中心におかれ、ほかの写しは要素の後ろに縦の帯を作るように上と下に置かれる。
| 名称: | background-attachment |
| 値: | scroll | fixed | inherit |
| 初期値: | scroll |
| 適用先: | すべての要素 |
| 継承: | なし |
| パーセンテージ: | 適用不可 |
| 媒体: | 視覚 |
もしも背景画像が明示されれば、このプロパティは、ビューポートに関して固定さるか('fixed')、文書と一緒にスクロールするか('scroll')を明示する。
たとえ画像が固定されていても、画像が変わらずに目に見えるのは、要素の背景、パディングあるいはボーダーの範囲の中にあるときだけである。それゆえに、もし画像が敷き詰められていなければ('background-repeat: repeat')、目に見えないかもしれない。
この例は、要素がスクロールされるときに、ビューポートにくっついてはなれないままである無限の縦の帯を生成する。
BODY {
background: red url("pendant.gif");
background-repeat: repeat-y;
background-attachment: fixed;
}
ユーザエージェントは'fixed'を'scroll'とみなしてもよい。しかしながら、作者が'fixed'をサポートするそれらのブラウザに対してだけ画像を提供する方法はないから、少なくともHTMLおよびBODYという要素に対しては正確に'fixed'と解釈することを推奨する。詳細については適合に関する項[参照を追加する]を見よ。
| 名称: | background-position |
| 値: | [ [<percentage> | <length> ]{1,2} | [ [top | center | bottom] || [left | center | right] ] ] | inherit |
| 初期値: | 0% 0% |
| 適用先: | ブロックレベルまたは取って代わられる要素 |
| 継承: | なし |
| パーセンテージ: | 枠の大きさ自体に比例する |
| 媒体: | 視覚 |
もしも背景画像が明示されていれば、このプロパティはそのはじめの位置を明示する。値には次に続く意味がある。
もしも、ただひとつのパーセンテージまたは長さの値だけ与えられれば、横の位置だけを定め、縦の位置は50%になる。もしも二つの値が与えられれば、横の位置が最初に来る。長さとパーセンテージの値の組み合わせは許容される(例'50% 2cm')。負の位置も許容される。キーワードはパーセンテージの値や長さの値と組み合わせることはできない(すべての可能な組み合わせは上に与えられている)。
BODY { background: url("banner.jpeg") right top } /* 100% 0% */
BODY { background: url("banner.jpeg") top center } /* 50% 0% */
BODY { background: url("banner.jpeg") center } /* 50% 50% */
BODY { background: url("banner.jpeg") bottom } /* 50% 100% */
もしも背景画像がビューポートの内部に固定されれば('background-attachment'というプロパティを見よ)、画像は要素のパディングの範囲の代わりにビューポートに関連して配置される。
BODY {
background-image: url("logo.png");
background-attachment: fixed;
background-position: 100% 100%;
background-repeat: no-repeat;
}
上の例の場合においては、(ただひとつの)画像がビューポートの右下の隅に配置される。
| 名称: | background-clip |
| 値: | border | padding |
| 初期値: | border |
| 適用先: | ブロックレベルおよび取って代わられる要素 |
| 継承: | なし[あり?] |
| パーセンテージ: | 適用不可 |
| 媒体: | 視覚 |
背景がボーダーの範囲に広がるかどうか決定する。もしも値が'padding'であれば、背景はパディングの端までで切られ、ボーダーの背景は透明になる。
| 名称: | background-origin |
| 値: | border | padding | content |
| 初期値: | padding |
| 適用先: | ブロックレベルおよび取って代わられる要素 |
| 継承: | なし[あり?] |
| パーセンテージ: | 適用不可 |
| 媒体: | 視覚 |
'background-position'がどんな風に計算されるかを決定する。'padding'という値を用いれば、位置はパディングの端に関連する('0 0'はパディングの端の左上の隅であり、100% 100%は右下の隅である)。'border'位置がボーダーの端に関連することを意味し、そして'content'は内容の端に関連することを意味する。
CSSのレベル2においては位置は常にパディングの端('padding')に関連するが、一方、レベル1では内容の隅('content')に関連することに注意せよ。
| 名称: | background |
| 値: | [<'background-color'> || <'background-image'> || <'background-repeat'> || <'background-attachment'> || <'background-position'>] | inherit |
| 初期値: | 簡略表記法のプロパティに対しては定義されない |
| 適用先: | すべての要素 |
| 継承: | なし |
| パーセンテージ: | 'background-position'に関しては許容される |
| 媒体: | 視覚 |
'background'というプロパティは、スタイルシートの中で同時に個々の背景のプロパティ(すなわち、'background-color'、'background-image'、'background-repeat'、'background-attachment'および'background-position')を定めるための簡略表記法のプロパティである。
The 'background'というプロパティは、最初にすべての個々の背景のプロパティをその初期値に定め、それから宣言の中の明示的な値を割り当てる。
以下に続く例の最初の規則において、ただ'background-color'に対する値だけが与えられていて、ほかの個々のプロパティは初期値に定められる。第二番目の規則の場合においては、すべての個々のプロパティが明示されている。
BODY { background: red }
P { background: url("chess.png") gray 50% repeat fixed }
'background-clip'および'background-origin'が'background'の簡略表記法とともに定められないことに注意せよ。
W3Cの背景の機能を用いているそれぞれの仕様書は、許容された機能および除外された機能のサブセットを定義し、そのサブセットのすべての構成要素の特有の意味を説明しなければならない。
将来より多くの情報をここに。
この項は現在の仕様書だけとの適合を定義するだろう。
個々のデバイスによる制限のためにユーザエージェントがこの仕様書の一部を実装することができないことは、不適合を意味しない。
ユーザーエージェントはパース中のエラーの制御に対する規則を遵守しなければならない。
この仕様書は、ユーザエージェントが仕様書への基本的な適合を確かめることを可能にするテストスイートを含むだろう。テストスイートは、徹底的にしようとはしないし、W3Cの背景の機能のすべての可能な組み合わせの場合を含むわけではない。
この仕様書は、カスケードを行うスタイルシートと、フォーマットを行うプロパティに関する、W3Cの策定を行うグループの成果である。この仕様書の編集者のほかに、策定を行うグループのメンバは、
である。
David. L Baron, Todd Fahrner、Daniel Glazman、Ian Hickson、Eric Meyer (The OPAL Group)、Jeff Veenという、策定を行うグループに招かれた数人の専門家は、著しくCSSの3に貢献してくださっている。
策定を行うグループの以前のメンバ: