JavaScriptで位置の指定をする方法について解説-その1

HOME
更新日:2013.10.04
HOMEJavaScript入門 > 位置の指定1

位置の指定1

これから、JavaScriptで画像やdivタグ要素などの位置を移動する方法について解説します。 ただそのためには、スタイルシートで位置を指定する方法について知っておかなければなりません。 それで、このページでは位置指定に関するCSS(スタイルシート)について解説します。 次のページで、指定位置をずらして動きを付ける方法について見てみましょう。

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

では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;               /* 奥行番号を2にする */
}

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

-->
</style>

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

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

position:
位置指定をします。absoluteは絶対位置指定、relativeは相対位置指定になります。
left:
左からの位置を指定します。
top:
上からの位置を指定します。
z-index:
奥行きを指定します。数字の大きいほうが上に表示されます。

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

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


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