位置指定

  • [アーティクル]
Positioning Positioning *
*前のトピック: ドキュメントのテキストを検索する
*次のトピック: フィルタとトランジション

位置指定

Microsoft® Internet Explorer 4.0では、HTMLエレメントの位置指定にx座標とy座標を指定できる。同様に、エレメントどうしをz軸を使って重ね合わて遠近感を出すこともできる。これにより、ユーザーはエレメント（画像、コントロール、テキストなど）をページの正確な場所に配置できる。位置座標やダイナミックスタイルを処理するスクリプトを記述すると、オーサーはページ内でエレメントを移動することも、アニメーション効果を付けることもできる。また、各種アニメーションのオプションを使って。ダイナミックスタイル、位置指定、ActiveX™コントロール、透過画像を組み合わせて表示することもできる。

arrowr.gif位置指定とは?

arrowr.gif絶対位置指定

arrowr.gif相対位置指定

arrowr.gif位置指定における注意事項

arrowr.gifコンテントの表示を制御する

arrowr.gifエレメントの表示／非表示を制御する

位置指定とは?

CSS Positioningは、ページ上のエレメントの位置指定を定義でき、Positioning HTML with Cascading Style Sheetsに関するW3C Working Draftで指定されたカスケーディングスタイルシート拡張である。デフォルトでは、HTMLソースの順番で次々にエレメントは"フロー"（解析されて表示される）される。その際、各エレメントは、エレメントのタイプやそのコンテントによってそのサイズや位置が決定されて表示される。こうしたデフォルトのHTMLレイアウトの"フロー"では、ページ上のエレメントの配置を制御しようと思ってもできない。しかし、エレメントにCSS属性を適用すれば、座標指定、ページ上の他のオブジェクトとの相対的な位置指定により、正確に配置することができる。

HTML属性や他のCSS属性と同様に、エレメントの位置指定のCSS属性もスクリプトから制御できる。このように、ページ上のエレメントの位置はスクリプトによって動的に変更できる。これは、非常に強力である。ドキュメントをロードした後に、サーバーから同じページを再ロードしなくても、エレメントの位置を再計算し再表示できるのである。

エレメントの位置指定では、他の配置を制御する技術にも使うことになる。たとえば、これには、エレメントをページ上に表示するかどうかといったような、オブジェクトの表示を制御する技術も含まれる。

x、y座標でエレメントを位置指定する方法は、2つある。絶対位置指定と相対位置指定である。コンテントのレイアウトやドキュメントの目的によって、どちらの位置指定の方法を使うかを選ぶ必要がある。絶対位置指定は、どのようなコンテントであろうと、エレメントを親エレメントの座標系を基準として正確に配置できる。相対位置指定は、ページ上の他のエレメントとの関係で項目が配置される。相対位置指定はドキュメントのデフォルトのフローに依存し、ブラウザウィンドウのサイズを変更すればコンテントがリフローされる。

絶対位置指定

絶対位置指定では、エレメントは常に、その親エレメントか、親エレメントがないときはデフォルトではBODYが基準となる。leftプロパティやtopプロパティの値は、親エレメントの左上隅が基準となる。例えば、ドキュメントの左上隅に画像を配置するには、属性に0を設定する。次に例を示す。 

<IMG SRC="sample.gif" STYLE="position:absolute; left:0; top:0">

上記の例では、BODYエレメントの境界に画像を絶対位置指定している。BODYはデフォルトでマージンがとられている。必要なければ、BODYのマージン属性を0に設定すると、クライアント領域の(0,0)座標に画像が配置できる。

次に示す例で、絶対位置指定で親エレメントがどのように影響するかを説明する。 

<DIV STYLE="position:relative;left:50;top:30;height:100;width:100">
Some text inside the DIV that will be hidden by the image because the image will be positioned over this flowing text.
<IMG SRC="sample.gif" STYLE="position:absolute; left:0; top:0">
</DIV>

この例では、絶対位置指定されたIMGエレメントは、その親エレメントであるDIVエレメントが相対位置指定されているので、その左上隅を基準として位置指定される。

絶対位置指定では、エレメントは、ドキュメントのフローや、その前後のエレメントのレイアウトに関係なく位置指定が行える。つまり、たとえ他のエレメントがすでにその位置に配置されていようと、どちらのエレメントも影響を受けない。その代わり、同じ位置に指定されたエレメントは、オブジェクトが重なって表示される。z-index属性を使えば、配置されたエレメントの重ね順を指定することができる。

位置指定されたエレメント中のコンテントは、そのコンテントを含むエレメントにフローが影響される。例えば、テキストは通常そのエレメントの幅を基準としてワードラップされる。また、位置指定されたエレメントが"コンテナ"（インライン エレメントを含むエレメント）の場合、インライン エレメントはそのコンテナのサイズと形状に制約を受け、コンテナ内のソース順に配置されていく。

相対位置指定

CSSのposition属性で"relative"を設定すると、ドキュメントのHTMソース順でエレメントが配置されるが、エレメントは直前のコンテントを基準に位置指定される。例えば、次のように、段落内で一部のテキストが"相対"位置された場合、直前のテキストを基準として位置指定される。 

<P>The superscript in this name<SPAN STYLE="position: relative; top:-3px">xyz</SPAN> is "xyz".

上記の例では、"xyz"が直前の文字列"name"に対して上付き文字のように表示される。つまり、この段落のベースラインよりも3ピクセル分上の位置に"xyz"が表示されるわけである。同じようにleft属性を設定すると、"name"と"xyz"との間の間隔を変更できる。なお、このときSPAN内で絶対位置指定を行った場合（つまり、top属性およびleft属性の両方を使って絶対位置指定した場合）、BODY（または位置指定された親エレメント）を基準として位置指定されるため、"xyz"はクライアント領域の左上隅に表示されてしまい、期待した結果が得られない。

相対位置指定されたエレメントは、後続するテキストやエレメントと重なって表示されることはない。しかし、その後続するテキストやエレメントが絶対位置指定されていた場合は、重なって表示されることがある。

相対位置指定されたエレメントが、ページ上の他のオブジェクトやエレメントと重なって表示された場合、絶対位置指定と同様に、z-index属性を使えば、同じ場所に位置指定された他のエレメントとの重ね順を指定することができる。デフォルトでは、位置指定されたエレメントは常に、その親エレメントよりも手前に表示される。

位置指定における注意事項

コンテントのレイアウトやドキュメントの目的によって、どちらの位置指定の方法を使うかを選ぶ必要がある。相対位置指定はドキュメントのデフォルトのフローに依存し、ブラウザウィンドウのサイズを変更すればコンテントがリフローされる。しかし、絶対位置指定では、表示したい位置に画像やテキストを正確に配置することが可能である。

次の例では、相対位置指定されたエレメント内に絶対位置指定されたエレメントをネストしている。テキストを中央に矩形で表示させたいわけである。いままではこうした場合、表を作成し、その表のセル内でテキストがセンタリングされるように属性を設定していた。しかし、この方法は、静的な表に対してしか有効ではない。位置指定を使えば、こうした制約がなくなる。さらにスクリプトを使えば、ドキュメントがロードされた後、これらのエレメントを別の場所に移動させることも可能となる。 

<HTML>
<HEAD><TITLE>Center the DIV</TITLE>
<SCRIPT LANGUAGE="JScript">
function doPosition() {
document.all.two.style.top = document.all.one.offsetHeight/2 -
document.all.two.offsetHeight/2;
document.all.two.style.left = document.all.one.offsetWidth/2 -
document.all.two.offsetWidth/2;
}
</SCRIPT>
</HEAD>
<BODY onload="doPosition()">
<P>Some text in the beginning.</P>
<DIV ID=one STYLE="position:relative; top:10;height:200;width:200;background-color:green">
Some text in the outer DIV
<DIV ID=two STYLE="position:absolute;left:50;width:100;color:red;border:red 2px solid">
text in the inner DIV - color should be red
</DIV>
</DIV>
</BODY>
</HTML>

上記の例では、相対位置指定されたDIVエレメント（外側のDIVエレメント）のテキストは、最初の段落エレメントの10ピクセル分下に表示される。一方、ネストされたDIVエレメントは絶対位置指定されているが、ドキュメントがロードされると、この位置はスクリプトの"doPosition"関数で変更される。offsetWidthプロパティとoffsetHeightプロパティを使って、エレメントの新しい絶対位置が計算される。なお、上記の例では、エレメントの位置指定にleftプロパティを使っているが、posLeftプロパティやpixelLeftプロパティを代わりに使うこともできる。これらのプロパティは、浮動小数点数や整数型でその値を指定する（leftプロパティは、単位を含む文字列型でその値を指定する）。なお、同様に、top、width、heightプロパティの代わりに、**pos*プロパティ（posTop、posWidth、posHeight）やpixel***プロパティ（pixelTop、pixelWidth、pixelHeight）を使うことができる。

位置指定を動的に組み合わせる

位置指定では、ページ上の複数の項目を操作することもできる。先の例の"onload"で呼び出すスクリプト関数を書き換えて、動的な位置指定を実行させる例を以下で説明する。ここでは、簡単なフライング テキスト（すなわち、テキストがページを横切って飛ぶような効果）の例を紹介する。

次の例では、DIVエレメントのコンテントがページを横切って移動するアニメーションが表示される。windowオブジェクトのsetIntervalメソッドを使ってインターバルを設定すると、そのインターバルごとに複数のエレメントを移動させることもできる。 

<HTML>
<HEAD><TITLE>Glide the DIV</TITLE>
<SCRIPT LANGUAGE="JScript">
var action;
function StartGlide() {
document.all.Banner.style.pixelLeft =
document.body.offsetWidth;
document.all.Banner.style.visibility = "visible";
action = window.setInterval("Glide()",50);
}
function Glide() {
document.all.Banner.style.pixelLeft -= 10;
if (document.all.Banner.style.pixelLeft<=0) {
document.all.Banner.style.pixelLeft=0;
window.clearInterval(action);
}
}
</SCRIPT>
</HEAD>
<BODY onload="StartGlide()">
<P>With dynamic positioning, you can move elements and their content anywhere in the document even after the document has loaded!
<DIV ID="Banner" STYLE="visibility:hidden;position:absolute;top:0; left:0">Welcome to Dynamic HTML!</DIV>
</BODY>
</HTML>

動的な位置指定は、位置指定されていないエレメントに対しては行えない。あらかじめHTMLソースでposition属性を設定しておく必要がある。Internet Explorer 4.0では、スクリプトによって、動的な位置指定の変更は行えるが、position属性を設定することはできない。

この他に、ビジュアルフィルタ効果でも位置指定を利用することができる。フィルタとトランジションを参照すること。

コンテントの表示を制御する

位置指定されたエレメントは、そのコンテントの表示をCSS属性を使って制御することができる。display属性やvisibility属性を使うと、エレメントの表示／非表示を制御できる。clip属性やoverflow属性を使うと、コンテントの表示範囲を制御できる。また、z-index属性によって、エレメントの重ね順も制御できる。

クリッピング領域とオーバーフロー

clip属性を使うと、位置指定されたエレメントに対してクリッピング領域を設定することができる。クリッピング領域を定義すると、エレメントはその矩形領域に表示される。つまり、このクリッピング領域からはみ出た部分は"クリッピング"され、表示されない。クリッピング領域はHTMLを変更できないが、エレメントの表示方法は簡単に変更できる。

例えば、次の例は、clip属性を使って、絶対位置指定されたDIVに対してクリッピング領域を設定している。30×30ピクセルの正方形だけがテキストの表示範囲であり、残りはクリッピングされる。 

<HTML>
<HEAD><TITLE>Clip the DIV</TITLE>
</HEAD>
<BODY>
<DIV
STYLE="position:absolute;top:50;left:50;height:100;width:100;clip:rect(0 30 30 0);background-color:green">
some content some content some content some content some content
some content some content some content some content some content
some content some content some content some content some content
some content some content
</DIV>
</BODY>
</HTML>

クリッピング領域を定義する場合、パラメータの順番（top、right、bottom、leftの順）が重要となる。例えば、“clip:rect(0 0 30 30)”と設定した場合、topとrightが0なので、表示されない。30×30ピクセルのクリッピング領域の場合は、“clip:rect(0 30 30 0)と設定する。

clipプロパティを使って、動的にクリッピング領域を変更する例を次に示す。 

document.all.MyDiv.style.clip = "rect(0 50 75 0)";

オーバーフローとは、位置指定されたエレメントのコンテントが、定義した領域内に収まらない場合に発生する。デフォルトでは、領域に収まらなかったコンテントは、その領域をはみ出して表示されるため、他のエレメントと重なることもありえる。"overflow"属性を使うと、このオーバーフローを制御することができる。この属性では、オーバーフローしたコンテントを非表示とすることも、あるいはオーバーフローしたコンテントをスクロールして見られるようにすることもできる。

例えば、次の例は、"overflow"属性を使ってスクロールバーを適用したものである。100×100ピクセルの表示領域に収まるテキストの部分だけが最初に表示されるが、残りのテキストもスクロールさせれば、見ることができる。 

<HTML>
<HEAD><TITLE>Scroll the Overflow</TITLE>
</HEAD>
<BODY>
<DIV STYLE="position:absolute;top:50;left:50;height:100;width:100;overflow:scroll">
some content some content some content some content some content
some content some content some content some content some content
some content some content some content some content some content
some content some content
</DIV>
</BODY>
</HTML>

また、"overflow"属性で"hidden"を設定すると、オーバーフローしたコンテントは表示されない。"visible"を設定すると、オーバーフローしたコンテントはその領域をはみ出して表示される。

次の例では、overflowプロパティを使って、オーバーフローを動的に変更している。 

if (document.all.MyDiv.style.overflow != "scroll")
document.all.MyDiv.style.overflow = "scroll";

z-indexの順番指定

複数のエレメントが同じ領域にある場合、そのエレメントの重ね順をz-indexで指定できる。位置指定されたエレメント（絶対位置指定、相対位置指定のどちらでも）を、ドキュメントの他のエレメントに重ねる場合に、このz-indexを使う。

z-indexはz-index属性で設定する。この属性で正の値を設定されたエレメントは上になり、負の値を設定されたエレメントは下になる。次の例は、z-indexを使って画像の手前にテキストが表示される。 

<HTML>
<HEAD><TITLE>Stack the Image</TITLE>
</HEAD>
<BODY>
<P STYLE="position:absolute; top:0; left:0">Text Over Image</P>
<IMG SRC="sample.jpg" STYLE="position:absolute; top:0; left:0; z-index:-1">
</BODY>
</HTML>

エレメントに設定したz-indexの値が大きいと、常に上になり、その値が小さいと下になる。z-index値が同じ場合は、ソースに記述された順番となる。

属性を動的に変更するには、zIndexプロパティを使用する。次にその例を示す。 

document.all.MyImg.style.zIndex = 2;

通常、エレメントはウィンドウを持たないため、z-indexの順番に重ねることができる。しかし、オブジェクトにはウィンドウを持つものがある。ウィンドウを持っていないActiveXコントロールは、他のオブジェクトに重ねることはできない。IFRAMEエレメントはwindowオブジェクトを表示し、windowオブジェクトはz-indexの順番どおりにならない。Internet Explorer 4.0におけるこの他の例外は、SELECTエレメントである。

エレメントの表示／非表示を制御する

位置指定されたエレメントの表示／非表示を制御することができる。エレメントの位置を計算する時間が必要な場合や、簡単なトランジション効果を実行する場合など、エレメントを一時的に隠すときに役立つ。エレメントの表示／非表示を設定するには、visibility属性を使用する。次の例では、この属性を使って、DIVエレメントを非表示（隠す）にする。 

<p> A paragraph above the DIV element</p>
<DIV ID=MyDiv STYLE="position:absolute;top:50;left:50;height:100;width:100;visibility:hidden">
<p>A paragraph below the DIV element</p>

visibilityプロパティを使うと、スクリプトによってエレメントの表示／非表示を設定できる。例えば、上記の例でドキュメントをロードするとDIVは非表示であるが、スクリプトを次のように記述すればエレメントを表示させることができる。 

document.all.MyDiv.style.visibility = "visible";

visibilityプロパティを使った非表示のエレメントば、ドキュメントのレイアウトに影響を与えている。つまり、表示されていなくてもそのエレメントは物理的にスペースを使っているからである。このスペースを確保するかどうかでdisplay属性とは異なる。次の例で、visibility属性とdisplay属性の違いについて示す。

Up トップに戻る
© 1997 Microsoft Corporation. All rights reserved. Terms of Use.