- HOME
- JavaScript入門
- 位置の指定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つの四角い枠を動かしてみることにしましょう。