Ajaxでオブジェクトなどを動かしたり、サイズを変更するにはスタイルシートの以下のプロパティを使用します。
座標系 position
横位置 left
縦位置 top
横幅 width
縦幅 height
座標系は絶対座標 (absolute)、相対座標 (relative)、HTMLレイアウト規則に従う (static)、ブラウザ座標系 (fixed)を指定します。このうち最後のfixedはInternet Explorer 6ではサポートされていません。これらの座標系で実用となるものはabsoluteです。これは親オブジェクトの原点を基準にした座標系になります。原点は左上になり右下に行くに従って座標値は大きくなります。数学座標系とは上下が反対になっています。
座標系を指定すれば、あとは位置、幅にスタイルシートで設定できる値を入れるだけです。しかし、JavaScriptで操作する場合、いきなりこれらのプロパティに値を入れても動かない（またはエラー）になることがあります。例えば以下のサンプルは文法上全く問題がないにも関わらず、期待どおりにオブジェクトが指定座標に移動しません。（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>位置を指定する（動かない例）</title>
<script type="text/javascript"><!--
function setPos(x,y)
{
document.getElementById("footer").style.left = x;
document.getElementById("footer").style.top = y;
}
// --></script>
</head>
<body>
<h1>位置を指定する（動かない例）</h1>
<form>
<input type="button" value="変更する" onClick="setPos(100,200)"><br>
</form>
<div id="footer">フッター部分です。</div>
</body>
</html>
なぜ、動かないのかと言えば単純にスタイルシートが設定されていないためです。つまりスタイルシートで座標値などを設定する必要があります。これは以下のようにスタイルシートを設定すれば動作します。（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>位置を指定する（absolute）</title>
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script type="text/javascript"><!--
function setPos(x,y)
{
document.getElementById("footer").style.left = x;
document.getElementById("footer").style.top = y;
}
// --></script>
</head>
<body>
<h1>位置を指定する（absolute）</h1>
<form>
<input type="button" value="変更する" onClick="setPos(100,200)"><br>
</form>
<div id="footer">フッター部分です。</div>
</body>
</html>
【スタイルシートファイル：main.cssの内容】
#footer {
position:absolute;
left:10px;
top:100px;
border:1px blue solid;
width:100px;
height:80px;
background-color:#e0ffff;
}
定義する場合にはスタイルシートのIDとタグのIDが対応するようにしてください。
先ほど座標系で絶対座標系であるposition:absoluteは親オブジェクトの原点が基準だと書きました。実際のサンプルで見てみましょう。以下のサンプルはdivタグ内にdivタグが入れ子になっています。ここでボタンをクリックすると親オブジェクトの左上を基準として移動します。（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>位置を指定する（親オブジェクト基準）</title>
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script type="text/javascript"><!--
function setPos(x,y)
{
document.getElementById("footer").style.left = x;
document.getElementById("footer").style.top = y;
}
// --></script>
</head>
<body>
<h1>位置を指定する（親オブジェクト基準）</h1>
<form>
<input type="button" value="変更する" onClick="setPos(100,200)"><br>
<input type="button" value="原点に移動" onClick="setPos(0,0)"><br>
</form>
<div id="mainContents">
<div id="footer">フッター部分です。</div>
</div>
</body>
</html>
次に幅を指定してみましょう。横幅はwidthプロパティ、縦幅はheightプロパティです。以下のサンプルでボタンをクリックすると幅が変更されます。（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>幅を指定する（width, height）</title>
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script type="text/javascript"><!--
function setSize(w,h)
{
document.getElementById("footer").style.width = w;
document.getElementById("footer").style.height = h;
}
// --></script>
</head>
<body>
<h1>幅を指定する（width, height）</h1>
<form>
<input type="button" value="変更する" onClick="setSize(300,200)"><br>
</form>
<div id="mainContents">
<div id="footer">フッター部分です。</div>
</div>
</body>
</html>
このようにして位置や幅を変更することができます。マウス座標を設定すればマウスに追従して動くようになります。（サンプルを
実行する）
マウスの位置に合わせて幅を設定することもできます。（サンプルを
実行する）
Ajaxでは複雑にdivが入れ子になってしまう可能性があります。そうなると、全てのオブジェクトのIDを管理したり、子オブジェクトの親オブジェクトなども管理しないといけなくなる可能性もあります。このような場合、子オブジェクトから親オブジェクトの情報を取得すると多少は汎用性を持たせることができます。子オブジェクトから親オブジェクトはparentNodeで参照することができます。以下のサンプルはボタンをクリックすると親のID名を表示し、親の座標を変更するものです。（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>親オブジェクト情報の取得</title>
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script type="text/javascript"><!--
function getParentData()
{
pObj = document.getElementById("footer").parentNode;
document.getElementById("footer").innerHTML = pObj.id;
pObj.style.left = 200;
pObj.style.top = 300;
}
// --></script>
</head>
<body>
<h1>親オブジェクト情報の取得</h1>
<form>
<input type="button" value="親オブジェクト移動" onClick="getParentData()">
</form>
<div id="mainContents">親div
<div id="footer">子divです。</div>
</div>
</body>
</html>
親オブジェクトの情報が取得できれば以下のようにしてマウスに追従させる場合、親オブジェクトのID名などに依存しなくなります。（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>マウスに追従（子オブジェクト）</title>
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script type="text/javascript"><!--
function setPos(evt)
{
if (document.all)
{
x = event.x;
y = event.y;
}else{
x = evt.pageX;
y = evt.pageY;
}
parentObj = document.getElementById("footer").parentNode;
parentX = parseInt(parentObj.style.left);
parentY = parseInt(parentObj.style.top);
document.getElementById("footer").style.left = x -parentX;
document.getElementById("footer").style.top = y - parentY;
}
window.onload = function()
{
window.document.onmousemove = setPos;
document.getElementById("mainContents").style.left = "60px";
document.getElementById("mainContents").style.top = "100px";
}
// --></script>
</head>
<body>
<h1>マウスに追従（子オブジェクト）</h1>
<div id="mainContents">
<div id="footer">フッター部分です。</div>
</div>
</body>
</html>
ちなみに親から見た子の場合には以下のようになります。間にはさまれている文字もノードの１つとしてカウントされる点に注意してください。（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>子オブジェクト情報の取得</title>
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script type="text/javascript"><!--
function getParentData()
{
cObj = document.getElementById("mainContents").childNodes;
cObj[1].innerHTML = cObj[1].id;
cObj[1].style.left = 200;
cObj[1].style.top = 300;
}
// --></script>
</head>
<body>
<h1>子オブジェクト情報の取得</h1>
<form>
<input type="button" value="子オブジェクト移動" onClick="getParentData()">
</form>
<div id="mainContents">親div
<div id="footer">子divです。</div>
</div>
</body>
</html>
この項のサンプルでは子オブジェクトは親オブジェクトからはみ出しても、そのまま表示されています。しかし、AjaxではGoogle Mapsのように特定の範囲だけ内容を表示させる必要がでてくることがあります。次の項では表示範囲を決めるクリッピングについて説明します。
[
第五章 8:スタイルシートへのアクセス方法 - クリッピング（表示範囲指定） -へ]
[
目次へ]
(2006.1.14)