ポジショニングで書いてみよう！
（初級編）
初級編では、実際の効果を見ながら、プロパティと値について説明します。



・ポジショニングって何？

    ポジショニングとは、文字、イメージなどの位置決めのことです。デザイナーは静的なドキュメントにおいて厳密な位置決めを求めるとともに、動的なドキュメントにおいて、パワフルなレイアウトを求めます。ポジショニングは、要素の配置をドキュメントの流れから開放し、自由にします。配置された要素の動的な管理については、ポジショニングを扱う言語(HTML)により行なわれます。


・標準化とブラウザの対応

    ポジショニングは、W3Cがスタイルシートの拡張であるPositioning HTML Elements with Cascading Style Sheetsをhttp://www.w3.org/TR/WD-positioningにて、ワーキングドラフトとして公開しています。HTMLの動的な側面については、Document Object Model (DOM) Level 1 Specificationがhttp://www.w3.org/TR/REC-DOM-Level-1にて、勧告されています。
    現在、Netscape Communicator4.0x、4.5、Internet Explorer4.0xなどのブラウザが一部の機能に対応しています。ただし、OS、ブラウザのバージョンによっては正常に動作しないものもあります。
    また、ポジショニングを使用する場合には、ポジショニングが使用できないブラウザのことを考慮する必要があります。


・ポジショニング適用方法

    ポジショニングの適用方法はスタイルシートの拡張として提案されています。スタイルシートについてはスタイルシート講座を参照してください。


・絶対的な位置づけ

    絶対的な位置づけはドキュメントの流れとは独立に配置されます。

    <HEAD>
<STYLE TYPE="text/css">
<!--
#outer {position:absolute;
        top: 200px; left: 200px;
        width: 200px; color: red;}
#inner {color: blue;}
-->
</STYLE>
</HEAD>
<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>


    結果は以下のようにになります。

    hk_positioning11.htm




・相対的な位置づけ

    相対的な位置づけはドキュメントの流れに依存して配置されます。

    <HEAD>
<STYLE TYPE="text/css">
<!--
BODY {line-height: 200%}
#outer {position: relative; top: -12px; color: red;}
#inner {position: relative; top: 12px; color: blue;}
-->
</STYLE>
</HEAD>
<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>


    結果は以下のようにになります。

    hk_positioning12.htm




・相対的な位置づけの中での絶対的な位置づけ

    相対的な位置づけの中で、絶対的な位置づけが行われると、親要素を基準とする論理的な座標を持ちます。

    <HEAD>
<STYLE TYPE="text/css">
<!--
#outer {position: relative; color: red;}
#inner {position: absolute;
        top: 200px; left: -100px;
        height: 130px; width: 130px; color: blue;}
-->
</STYLE>
</HEAD>
<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>


    結果は以下のようにになります。

    hk_positioning13.htm




・カレント行への位置づけ

    変更した行に印をつけるに次のようにします。

    <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>


    結果は以下のようにになります。

    hk_positioning14.htm
    ★WIN+NN4.5では、うまく機能しないようです。




・静的な位置づけ

    静的な位置づけは既定値です。子要素に対して影響を与えません。「相対的な位置づけの中での絶対的な位置づけ」と比較してください。

    <HEAD>
<STYLE TYPE="text/css">
<!--
#outer {/* position: static; */ color: red;}
#inner {position: absolute;
        top: 200px; left: -50px;
        height: 130px; width: 130px; color: blue;}
-->
</STYLE>
</HEAD>
<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>


    結果は以下のようにになります。

    hk_positioning15.htm




・floatについて

    これについては既にスタイルシートで定義されています。

    <HEAD>
<STYLE TYPE="text/css">
<!--
#outer {color: red;}
#inner {float: right; width: 130px; color: blue;}
-->
</STYLE>
</HEAD>
<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>


    結果は以下のようにになります。

    hk_positioning16.htm
    ★WIN+NN4.5では、色がおかしいようです。




・Visibilityについて

    見えるかどうかを指定します。見えなくした場合は透明であることに注意してください。

    <BODY>
<P>Choose a suspect:</P>
<DIV ID="container1">
   <IMG WIDTH=100 HEIGHT=100 SRC="l_fruits.jpg">
   <P>Name: 果物</P>
</DIV>

<DIV ID="container2">
   <IMG WIDTH=100 HEIGHT=100 SRC="l_glass.jpg">
   <P>Name: 金魚鉢</P>
</DIV>

<FORM NAME="myForm">
   <INPUT TYPE="button" VALUE="果物"
       onClick='show("container1");hide("container2")'>
   <INPUT TYPE="button" VALUE="金魚鉢"
       onClick='show("container2");hide("container1")'>
</FORM>
</BODY>


    結果は以下のようにになります。

    hk_positioning17.htm


    絶対的な位置づけを使用すれば、より効果的になります。

    <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="l_fruits.jpg">
   <P>Name: 果物</P>
</DIV>

<DIV ID="container2">
   <IMG WIDTH=100 HEIGHT=100 SRC="l_glass.jpg">
   <P>Name: 金魚鉢</P>
</DIV>

<FORM NAME="myForm">
   <INPUT TYPE="button" VALUE="果物"
       onClick='show("container1");hide("container2")'>
   <INPUT TYPE="button" VALUE="金魚鉢"
       onClick='show("container2");hide("container1")'>
</FORM>
</BODY>


    結果は以下のようにになります。

    hk_positioning18.htm




・表示の重なり順序について

    特に指定しなければ、HTMLの中で後に指定されたものが前に表示されます。しかし、要素のz-orderはz-indexにより厳密に指定できます。

    <HEAD>
<STYLE type="text/css">
<!--
.pile { position: absolute; left: 2in; top: 2in; width: 3in; height: 3in; }
-->
</STYLE>
</HEAD>
<BODY>
<IMG SRC="l_rika.jpg" CLASS="pile" ID="image" STYLE="z-index: 1">

<DIV CLASS="pile" ID="text1" STYLE="z-index: 3;
     font-size: large; color: #FFCCCC">
   This text will overlay the image.
</DIV>

<DIV CLASS="pile" ID="text2" STYLE="z-index: 2;
     font-size: large; color: #CCFFFF">
   This text will underlay text1, but overlay the image
</DIV>
</BODY>


    結果は以下のようにになります。

    hk_positioning19.htm
    ★WIN+NN4.5では、イメージの配置がおかしいようです。




・オーバーフロー

    オーバーフローした場合にどうするかを指定します。

    <HEAD>
<STYLE type="text/css">
#overlay1 {height: 100px; width: 100px; border: thin solid red;
           overflow: visible;}
#overlay2 {height: 100px; width: 100px; border: thin solid red;
           overflow: hidden;}
#overlay3 {height: 100px; width: 100px; border: thin solid red;
           overflow: auto;}
</STYLE>
</HEAD>
<BODY>
<P ID="overlay1"><PRE>Here is some long preformatted text.</PRE><P>

<DIV ID="overlay1">
Here is a block of textthat will cause this element
to exceed its declared height of 100 pixels.
</DIV>

<P ID="overlay2"><PRE>Here is some long preformatted text.</PRE><P>

<DIV ID="overlay2">
Here is a block of textthat will cause this element
to exceed its declared height of 100 pixels.
</DIV>

<P ID="overlay3"><PRE>Here is some long preformatted text.</PRE><P>

<DIV ID="overlay3">
Here is a block of textthat will cause this element
to exceed its declared height of 100 pixels.
</DIV>

</BODY>


    結果は以下のようにになります。

    hk_positioning20.htm
    ★WIN+NN4.5では、うまく機能しないようです。WIN+IE4も少しおかしいです。




・クリッピング

    上、右、下、左の位置を指定して、切り取った（クリップした）ように表示します。指定の順番に注意してください。

    <HEAD>
<STYLE type="text/css">
#clip {position: absolute; top: 100;left: 100;
       border: thin solid red; clip:rect(0,200,100,0)}
</STYLE>
</HEAD>
<BODY>
<DIV ID="clip">
Clipping alters the display of HTML,
though it does not affect how it is laid out.
The clipping region defines what portion of the element's
physical representation is visible.
It is computed by the intersection
of the parent's clipping region
with the value of the element's 'clip' property.
</DIV>
</BODY>


    結果は以下のようにになります。

    hk_positioning21.htm




ホームページへ戻る