この文書は中間草案(intermediate draft)でW3CCSS Working Group as part of the StylesheetsActivityによって作られたものです (www-style@w3.orgへの) 公的な説明としてリリースされるに、十分しっかりとしたものですが、勧告(の一部)として是認される前に変更されるかも知れません。よって、それは製作体系の一部としてインプリメントされるべきではないしょうが、試験的な基礎としてインプリメントされるかも知れません。
これはW3Cのメンバーとその他の関連したグループによる、評価するための作業中の草案(W3C Working Draft for review)です。それは草案文書であり、更新されるかも知れないし、いつでも他の文書によって置き換わったり廃止されたりするかも知れません。. もし W3C Working Draftsを引用するなら、どうぞ「進行中の作業」であるとして参照してください。最新のW3C技術レポートはhttp://www.w3.org/TRで見つけられるかも知れません。
ハイパー･テキスト･マークアップ･ランゲージ(HTML)は、あるプラットフォームから別のプラットフォームに移動できるハイーパーテキスト文書を作り出す、簡単なマークアップ言語です。HTML文書は、アプリケーションの広範なレンジからの情報を表現するための一般的な語義論(generic semantics)を持ったSGML文書です。CSS(Cascading Style Sheets)は、文章のスタイル(フォントと使う色、どのように空白が挿入されるか等)を制御するためにHTMLに適合され得るスタイル･シート言語です。次の仕様書は、三次元空間でのHTML要素の配置と可視性をサポートするためにCSSを拡張します。CSS1とHTML3.2の両方に精通していると仮定します。
Abstract
Contents
1 Introduction
2 Positioning Elements by example
2.1 'Absolute' Positioning
2.2 'Relative' Positioning
2.3 Placing 'absolute' positioned elements relative to the flow
2.3.1 Implementing change bars
2.4 'Static' Positioning
2.5 Floating elements
2.6 Visibility
2.7 Z-order
3 CSS Positioning Properties
3.1 'position'
3.1.2 The <HTML> element
3.2 'left', 'top'
3.3 'width', 'height'
3.4 'clip'
3.5 'overflow'
3.6 'z-index'
3.7 'visibility'
4 Glossary
5 Questions and Answers
デザイナー達は豊かな表現を持つ静的文書を作成するためHTML要素を明快に制御したいと思っています。また、動的で活気に富んだHTMLベースの文書に、強力なレイアウトの制御を望んでいます。この文書は、この二つの目的のために、ページの記述にすばらしい精密度を用いることを認めているCSSの拡張について解説しています。
この文書は新しい位置属性を使ってHTML要素を配置する二つの方法を紹介しています。それは、1)'relative'(相対的)配置は、文書の流れに於けるそれの本来の位置との関係でオフセット(相殺)されることを要素に許します。2)'absolute'(絶対的)配置は、文書の流れから離され、任意の場所に配置されることを許します。下の例は、配置された要素の処理におけるダイナミックな外観、それは例えば隠されたり、表示されたり、外部のスクリプト言語を使って専ら実行される動きの様なものですが、それらの特徴を説明しています。The W3C Document Object Model Working Group (DOM-WG) はHTMLの動的な外観に関して作業しています。
要素は、新しい'position:'属性を使って配置されることが出来ます。この新しい属性の採りうる値を調べてみましょう。下の例の多くは次のHTMLの断片を利用しています。
<body>
<p>Beginning of body contents.
<span id=outer> Start of outer contents.
<span id=inner> Inner contents.</span>
End of outer contents.</span>
End of body contents.
</p>
</body>
のそれぞれの例はouterとinnerでは異なるCSSの宣言をするでしょう。
絶対位置属性を持った要素は、通常の文書の流れから外れ、それらの内容が流れる四角形の上掛けとして形作られる。絶対位置属性を持った要素は、それの親と子の要素、両者から独立してレイアウトされる。実際、それぞれの絶対位置属性の要素のレイアウトは他のものから独立している。高いz-orderを持った要素の内容は低いz-orderを持った要素を覆い隠すかも知れない。ある一つの配置された要素の中の文章が、別の配置された要素の中に含まれるある画像のまわりに流されることは出来ない。デフォルトによって、配置された要素はそれの親要素のちょうど上に重ねられるだろう。
次のouterとinnerのCSSの宣言について考えてみてください。
#outer {position:absolute; top: 200px; left: 200px; width: 200px; color: red;}
#inner {color: blue;}
この結果は次のようになるでしょう。
(0,0)+----------document window----------+(400,0)
|Beginning of body contents. End of |
|body contents. |
| |
| |
| |
| |
| +-----------------+|
| |Start of outer ||
| |contents. Inner ||
| |contents. End of ||
| |outer contents. ||
| +-----------------+|
| |
| |
+-----------------------------------+(400,400)(0, 400)
絶対位置の要素は次のような特徴を持ってます。
相対位置を持った要素は、他のHTML要素のように流れ込み、文書の流れの中で持っている要素本来の位置、それとの相対的な関係として配置することが出来ます。これらの要素が配置されたとき、これらは、本来の表現された形を保ち、改行を含み、それらの付属物のために取っておかれた本来の領域を保ち続けます。それに続くいかなる要素も再びそこには流れ込みません。相対要素の動的な行動はスクリプト環境においてアニメーション効果を創りだすことが出来ます。
line heightでは配置を考慮に入れて自動的に調整されないので、相対配置は上付文字や下付文字といった一般的な形式についても使われることもあります。次の例は、明らかに考案されていますが、スクリプトを使わずに相対配置を説明しています。
BODY {line-height: 200%}
#outer {position: relative; top: -12px; color: red;}
#inner {position: relative; top: 12px; color: blue;}
+----------document window----------+ | Start | 1|Beginning of body contents. | |of outer contents. | 2| Inner contents. | |End of outer contents. | 3| End of body | | | 4|contents. | | | 5| | | | 6| | | | 7| | | | | | +-----------------------------------+
相対配置は以下のような特徴を持っています。
例1はボックス型の配置環境における絶対位置を表している。この例は、絶対位置を持った要素が入れ子にされた時に、どのようなことが起きるかを説明している。次に続く例は、相対位置要素の子としての絶対位置要素を説明している。その要素は、ボックスの中に配置されるばかりか、相対的に配置される要素の「論理的始まり」から生まれる二次元平面に配置される。この例では、outer span については、きっちりと決まった場所に配置されることを考慮されていない。それよりも、相対配置(outer span)は子要素を配置するためのローカルな環境を提供するためだけに使われている。
#outer {position: relative; color: red;}
#inner {position: absolute; top: 200px; left: -100px; height: 130px; width: 130px; color: blue;}
この結果は次のようになるます。
(0,0) +----------document window----------+(0,400) |Beginning of body contents. Start | |of outer contents. End of outer | |contents. End of body contents. | | | | | | | | +----------+ | | |Inner | | | |contents. | | | | | | | | | | | +----------+ | | | | | +-----------------------------------+(400,400) (400,0)
'inner'は、デフォルトの配置環境内に配置されるというより、'outer'に関係して配置されることに注意してください。
<P STYLE="position: relative; margin-right: 10px; left: 10px;">
I used two red hyphens to serve as a change bar. They
will "float" to the left of the line containing THIS
<SPAN STYLE="position: absolute; top: auto; left: 0px; color: red;">--</SPAN>
word.</P>
これはこのような結果かも知れません
+----------document window----------+ | I used two red hyphens to serve | | as a change bar. They will | | "float" to the left of the line | |-- containing THIS word. | | | | | | | | | +-----------------------------------+
'Static'は'Position'のデフォルト値である。静的要素を配置や再配置することが出ないし、それらを子要素の配置環境として定めることもできない。
例3と比較してみてください。CSSにおける違いとして、このケースではouterが相対要素ではなく静的要素になっているということです。
#outer {/* position: static; */ color: red;}
#inner {position: absolute; top: 200px; left: -100px; height: 130px; width: 130px; color: blue;}
静的要素が新しい配置環境をを作りだせないので、innerの要素はデフォルト配置環境の中に配置されます。
(0,0)+----------document window----------+(0,400)
|Beginning of body contents. Start |
|of outer contents. End of outer |
|contents. End of body contents. |
| |
| |
| |
|------+ |
|r | |
|ents. | |
| | |
| | |
|------+ |
| |
| |
+-----------------------------------+(400,400)(400,0)
フローティングの例として説明されているように、フローティング要素はもうすでにCSS1を使って創りだされることが出来ます。要素のまわりに流れ込む文章にさらなる自由度が許される、'float' 属性の将来における拡張を、私たちは楽しみにして待ちます。
#outer {color: red;}
#inner {float: right; width: 130px; color: blue;}
(0,0) +----------document window----------+(0,400) |Beginning of body contents. Start | |of outer contents. End+-----------+| |of outer contents. |Inner || |End of body contents. |contents. || | +-----------+| +-----------------------------------+
'visibility'属性は、その要素が初めに表示されるかどうかを決定します。スクリプティング環境においては、この属性は、要素を隠したり表示したりといった動的な変更を可能にします。'display:none'との違いは、見えていない要素は、見えないにも関わらずその空間を占有しているということです。････それらは単に透明化されて表現されています。例:
<P>Choose a suspect:</P>
<DIV ID="container1" STYLE="position:relative">
<IMG WIDTH=100 HEIGHT=100 SRC="suspect1.jpg">
<P>Name: Al Capone</P>
<P>Residence: Chicago</P>
</DIV>
<DIV ID="container2" STYLE="position:relative">
<IMG WIDTH=100 HEIGHT=100 SRC="suspect2.jpg">
<P>Name: Lucky Luciano</P>
<P>Residence: New York</P>
</DIV>
<FORM NAME="myForm">
<INPUT TYPE="button" VALUE="Capone" onClick='show("container1");hide("container2")'>
<INPUT TYPE="button" VALUE="Luciano" onClick='show("container2");hide("container1")'>
</FORM>
ユーザー定義のスクリプト関数を呼び出すフォームボタンのどちらでも押せば、その関数に対応する要素を見えるようし、もう一方の要素は隠すという効果を引き起こしています。要素の位置属性は'rerative'ですから、それらは文書のレイアウトに影響を与えません。互いの要素に含まれるHTMLは囲んでいるブロックの流れの中に、通常それが(レイアウト)されるようにレイアウトされます。上の例よりさらに視覚的に訴えるものは、上掛け効果(同じ位置に重ねて表示される)のある'abslute'配置要素を利用してデザインされるかも知れません。
<HEAD>
<STYLE type="text/css">
<!--
#container1 { position: absolute; top: 2in; left: 2in; width: 2in}
#container2 { position: absolute; top: 2in; left: 2in; width: 2in;
visibility: hidden; }
-->
</STYLE>
</HEAD>
<BODY>
<P>Choose a suspect:</P>
<DIV ID="container1">
<IMG WIDTH=100 HEIGHT=100 SRC="suspect1.jpg">
<P>Name: Al Capone</P>
<P>Residence: Chicago</P>
</DIV>
<DIV ID="container2">
<IMG WIDTH=100 HEIGHT=100 SRC="suspect2.jpg">
<P>Name: Lucky Luciano</P>
<P>Residence: New York</P>
</DIV>
<FORM NAME="myform">
<INPUT TYPE="button" VALUE="Capone" onClick='show("container1");hide("container2")'>
<INPUT TYPE="button" VALUE="Luciano" onClick='show("container2");hide("container1")'>
</FORM>
この例では、'container2'は'container1'と同じ起源(配置環境が発生する場所）を持ち、同じ領域を占有している。「最初に'container2' が不可視である」ということを記すために可視属性が使われていることに注意してください。スクリプトによって記述された'Capone'ボタンのイベント･ハンドラは、'container1'を隠し、'container2' を表示できます。これらのコンテナが、同じ位置、同じ大きさを占有するため、もう一つのものに置き換えるという効果になります。
デフォルトでは、文書中の要素のz-順番は、HTMLにそれらが現れてくる順番に後ろから前に付けられます。例8においては、文書に'container1'の後に'container2'が現れるので、 'container2'が'container1'の直ぐ上に積み重ねられるでしょう。'z-index'属性を通して、他のコンテナとの関係における要素のz-順番を明快に記述することが可能です。
<STYLE type="text/css">
<!--
.pile { position: absolute; left: 2in; top: 2in; width: 3in; height: 3in; }
-->
<IMG SRC="butterfly.gif" CLASS="pile" ID="image" STYLE="z-index: 1">
<DIV CLASS="pile" ID="text1" STYLE="z-index: 3">
This text will overlay the butterfly image.
</DIV>
<DIV CLASS="pile" ID="text2" STYLE="z-index: 2">
This text will underlay text1, but overlay the butterfly image
</DIV>
この例では、要素の順番は、後ろから前に書き表すと以下のようになります。
例9でも透明性の概念が説明されています。要素のデフォルトの振る舞いは、それのHTML内容の中の透明領域を通して、その下にある要素が見えることを許すというものです。この例では、それぞれの透明な要素がその下にある要素に被さっています。この振る舞いは、'background'の様な「背景」に関連した属性の一つを利用することによって無効にすることが出来ます。
オーバーフロー属性は、絶対配置された要素の内容が宣言した境界を越えたときに、ユーザー･エージェントがどのように振る舞うかを記述するのに使われます。次のようなスタイルシートを使った例、それは細く濃淡のない赤い境界で囲まれた100ピクセルの単純なボックスとして記述されていますが、
#overlay {position: absolute; top: 50px; left: 50px; height: 100px;
width: 100px; border: thin solid red;}
空の<DIV&bt;が適用されて、これはこのように見えるかも知れません。
+------------+
| |
| |
| |
| |
| |
+------------+
初めにデフォルトの'overflow'の属性値を考えてみましょう。デフォルトの値は'visible'です。この値は、それらの内容が要素の宣言された幅や高さを超えたとしても、要素の内容の全てが表現されなければならないということを示しています。
<P ID=overlay><PRE>Here is some long preformatted text.</PRE><P>
'visible'に設定されたオーバーフローで、その要素の宣言された幅を超えたとしても全ての文章が見えるようになるでしょう。その要素は宣言された幅より広げられ、パディングや境界を新しい幅の外に表現するでしょう。その例はこのように表現されるかも知れません。
+--------------------------------------+ | Here is some long preformatted text. | | | | | | | | | +--------------------------------------+
同様に、表現される内容が宣言された高さを超えるなら、要素の高さも広げられるでしょう。次を考えてください。
<DIV ID=overlay>Here is a block of text that will cause this element to exceed its declared height of 100 pixels.</DIV>
このDIV(division区分)はこのように表現されるべきです。
+------------+ | Here is a | | block of t | | ext that w | | ill cause | | this eleme | | nt to exce | | ed its dec | | lared heig | | ht of 100 | | pixels. | +------------+
'overflow'属性の'hidden'という値は、要素の宣言された境界を越えた内容は全て表現されるべきでない、ということを示します。ユーザーはオーバーフローした内容を見る方法がありません。'hidden'と設定された'overflow'属性によって、上の二つの例はこのように表現されるでしょう。
+------------+ | Here is so | | | | | | | | | +------------+
+------------+ | Here is a | | block of t | | ext that w | | ill cause | | this eleme | +------------+
他の'overflow'属性の値として'auto'があります。これはその内容が要素の境界をオーバーフローした時、ユーザー･エージェントがスクロール機能を用意することを指示しています。最後になりますが、'scroll'という属性値は、その内容が要素の境界を超えようが超えまいが、スクロール機能がいつも与えられるべきということを指示します。もしユーザー･エージェントがスクロール･バーを用意しているなら、その例はこのように見えるかも知れません。
+------------+ | Here is som| | | | | |____________| ||<|X| |>|| +------------+
+------------+ |Here is a |^| |block of |-| |text that | | |will |-| |cause this|v| +------------+
［例は次の公開草案に加えられるでしょう］
この節では新しいCSS属性を記述するためのCSS1仕様と同じ属性値表記法を利用している。
属性値 Value: sbsolute | relative | static
初期値Initial: static
継承Inherited: no
適用Applies to:すべての要素
パーセント値Precentage value:N/A
'position'の各変化は次に続く一つあるいはそれ以上のものを確立している。
'absolute'配置の要素はCSS1のフォーマット形式ではブロックレベル要素のように振る舞う。しかし、それらは通常の文書の流れから完全に外れているので、次のようなCSS1の属性には適合していない: 'float' ,'clear',' margin-top',' margin-right',' margin-bottom',' margin-left',' margin'
<HTML>要素は次のような属性を持った特別の絶対的なコンテナとして定義される。
属性値 Value:
初期値Initial: auto
継承Inherited: no
適用Applies to: 'absolute'や'relative'型の'position'属性を持った要素
パーセント値Precentage value:親要素の高さと幅を照会する。もし親要素の高さが'auto'であったら、パーセントははっきりと定められない。
'absolute'位置の要素については、カレント配置環境の上に基礎を置かれている。
'relative'位置の要素については
デフォルトの値('auto')は要素が表現された時の文書中のカレントな位置を表します。この値は、'absolute'配置の要素についてはユーザー･エージェントによって計算され、'relative'配置の要素に関しては0(オフセット無し)になります。
属性値 Value:
初期値Initial: auto
適用Applies to: ブロックレベルと再配置された要素、'absolute'の値を持つ'position'属性の要素。
継承Inherited: no
パーセント値Precentage value:親要素の高さと幅を照会する。もし親要素の高さが'auto'であったら、パーセントははっきりと定められない。
'relative'と'static'型の'position'を持った要素については、'width'と'height'の振る舞いは、CSS1フォーマティング･モデルによって定義されたものと変わらない。
'absoluto'配置の要素については
属性値 Value:
初期値Initial: auto
適用Applies to:'absolute'の値を持つ'position'属性の要素。
継承Inherited: no
パーセント値Precentage values:N/A
クリッピング(切り抜き)はHTMLの表示を変えますが、どのようにレイアウトされるかについては影響を及ぼしません。クリッピングの領域は、要素の物理的表現のどのような一部が見えるかということを定義します。それは親要素のクリッピング領域と要素の'clip'属性の値との交わりによって計算されます。
［注意:私たちはCSSボックス指向フォーマティング･モデルにより調和させるため、クリッピングの四角形を再定義するかも知れません。CSSボックス指向フォーマティング･モデルでは、それぞれの座標は、固定された原点の上に成立している四角形に関係するといういうより、それぞれの辺に関係しています。top-leftを原点として記述することは、左から右へ流れる言語で正しく働くだけです。］
長さ(length)は要素の左上の角との関係で記述されます。負の値も許されます。ピクセル座標に換算されたとき、右下の角はクリッピングする四角形から排除されます。この規則は、幅ゼロや高さゼロの四角形の定義の許可を必要とします。
長さ(length)は'auto'の値に取って代わられます。それは、切り抜く四角形のそれぞれの広さを、パッディングや境界や子要素の挿入といった与えられた指示の中で、その要素の広さに揃えさせます。
'clip'属性のデフォルト値は、切り抜きの四角形に全体の要素を含ませます。このため、'auto'は無限のクリッピング領域を供給します。
注意:もしクリッピング領域がユーザー･エージェントのドキュメント･ウィンドウを超えるなら、本来の作業環境によって、そのウィンドウとして内容は切り抜かれるかも知れません。
属性値 Value: visible | hidden | scroll | auto
初期値Initial: visible
適用Applies to:'absolute'の値を持つ'position'属性の要素。
継承Inherited: no
パーセント値Precentage values:N/A
'overflow'は要素の表現された内容がその高さや幅を超えたときどのようなことが起きるのかということを決定します。
'visible'の値は、要素の境界があるボックスが、それの表現された内容の全てを含むのに十分に広げられるべきであるということを指示します。言い換えれば、それの高さや幅は宣言された値よりも大きくされ得ます。パディングや境界は表現された内容の外側に残るでしょう。追加される幅はテキストが流れる本来の方向に加えられるでしょう。例えば、左から右に書かれる言語では右側へ、一方追加される高さは下の方に加えられるでしょう。
'hidden'の値は、スクロールの機能が用意されずに、要素の内容がそれの高さや幅で切り取られるべきであることを指示します。パッディングや境界は、まるで内容がその境界を越えていないように、その要素の標準的な高さや幅を適用されます。ユーザーは要素の境界を越えた内容を利用できないでしょう。
'auto'の値の振る舞いは、ユーザー･エージェント(UA)次第ですが、要素の表現される内容がその境界を越えたとき、スクロール機能が呼びだれるべきでしょう。
最後に、'scroll'の値は、もしUAが目に見えるスクロール機能をサポートしているなら、その要素の表現される内容がその境界を超える超えないに関わらず、スクロール機能が表示されるべきであることを指示しています。これは、ダイナミックな環境においてスクロールバーが現れたり消えたりするという問題を避けます。
注意：たとえ'overflow'が'visible'に指定されていたとしても、本来の作業環境によって、UAのドキュメント･ウィンドウから内容は切り取られるかも知れない。付け加えると、'clip'属性は、可視の「オーバーフロー」した内容が切り取られるようにする別な方法を引き起こすことが出来ます。
属性値 Value: auto |
初期値Initial: auto
適用Applies to:配置可能な要素
継承Inherited: no
パーセント値Precentage values:N/A
'z-index'は配置可能な要素の積み重ね(スタック)順番として記述されている。デフォルト('auto')の振る舞いは、カレント配置環境内のHTMLソースに現れた順番によって、下から上に積み上げるというものです。'z-indez'属性は要素のz-順番(z-order)として与えられます。z-orderは、配置可能な兄弟や親の要素との関係において、それらがスタックされる順番を示した整数として与えられます。
兄弟または親子のどちらでもない二つの要素の相対的z-orderは、二つの要素の原型(祖先)に対する上記の規則の評価によって決められます。
属性値 Value: inherit | visible |hidden
初期値Initial: inherit
適用Applies to:全ての要素
継承Inherited: もし属性値が'inherit'なら
可視性(visibility)は要素の最初に表示される状態を決定しますが、レイアウトには影響しません。要素は隠れながらも要素が見えているときと同じ物理的な空間を塞いでいて、それらはちょうど透明なもののように表現されます。'display:none'の振る舞いとの違いは、そこでは要素は認識されていませんし、まるで要素が文書中に全く存在しないようです。可視性は重なり合った幾つかの要素の内の一つを動的に表示するスクリプティング環境の中で使われることが出来ます。