位置の指定１JavaScript入門

スタイルシートによる位置指定の方法

では300×200pxのボックスを作り、 中に赤と青の小さなボックスを二つ表示して、その位置を指定してみましょう。 HTMLファイルを作り、body内に以下のタグを記入してみてください。

<div class="waku">
  <div class="mini" id="aka"></div>
  <div class="mini" id="ao"></div>
</div>

次にスタイルを指定していきます。 以下のスタイルシートをHTMLのヘッダーに記入してみましょう。

クラスを指定されたdivタグにスタイルを指定するには、 div.クラス名{スタイル記述}とします。 idを指定されたdivタグは、div#id名{スタイル記述}となります。

<style type="text/css">
<!--

div.waku
{
  border:1px solid black;  /* 1pxの黒の枠を付ける */
  width :300px;            /* 横幅を300pxにする */
  height:200px;            /* 縦幅を200pxにする */
  position:relative;       /* 相対位置指定を宣言 */
}

div.mini
{
  border:1px solid green;  /* 1pxの緑の枠を付ける */
  width :50px;             /* 横幅を50pxにする */
  height:50px;             /* 縦幅を50pxにする */
}

div#aka
{
  background-color:red;    /* 背景色を赤色にする */
  position:absolute;       /* 絶対位置指定を宣言 */
  left:50px;               /* 左から50pxの位置に表示 */
  top:50px;                /* 上から50pxの位置に表示 */
  z-index:2;               /* 奥行番号を２にする */
}

div#ao
{
  background-color:blue;   /* 背景色を青にする */
  position:absolute;       /* 絶対位置指定を宣言 */
  left:80px;               /* 左から80pxの位置に表示 */
  top:80px;                /* 上から80pxの位置に表示 */
  z-index:1;               /* 奥行番号を１にする */
}

-->
</style>

上記のスタイル指定をしたサンプルがこれ↓です。

各スタイル指定の意味については、右側にコメント（緑文字）で記入しているので参考にしてください。 赤文字で記入している部分が今回のテーマであるポジショニング（位置指定）に関連したものです。 以下に解説しておきます。

position:

位置指定をします。absoluteは絶対位置指定、relativeは相対位置指定になります。

left:

左からの位置を指定します。

top:

上からの位置を指定します。

z-index:

奥行きを指定します。数字の大きいほうが上に表示されます。

上記サンプルで、クラス名「waku」のdivタグにpositon:relativeを指定しています。 これを記入すると、その中のdivタグに絶対位置指定をした時に、 枠内の左上が基準の位置になるのです。 記入しないとページの左上が基準となってしまうので、 中の小さい四角が枠からはみ出してしまうのです。

では、上記スタイルシートの値を色々と変えてみて、 ポジショニングに関する感覚を掴むようになさってください。 値にはマイナスも指定できるので、試してみると面白いと思います。

では次のページでこの２つの四角い枠を動かしてみることにしましょう。