第64回　「文字を画面上の任意の位置に表示させる」

今回は文字を画面上の任意の位置に表示させるプログラムについて説明します。
文字の座標を指定するにはスタイルシートを使い以下のように指定します。

position: absolute;
top : 100px;
left: 200px;

　これで文字が座標(200,100)の位置に表示されます。コンピューターの場合、原点は左上となっています。数学で習う座標軸とはY方向が逆になっていて上に行くほど小さく、下に行くほど大きくなっています。*1　ここで扱う原点は「ブラウザのページ内容が表示される部分の左上」になります。ブラウザのウィンドウ全部の左上でないという事です。
　上記の
　
position:absolute;

　は座標系を絶対座標にするという指定です。絶対座標以外に相対座標(relative)やHTMLレイアウト時の座標(static)もありますが、安全に使用できるのはabsoluteです。
　次に続く

top : 100px;
left: 200px;

　のtopはY座標、leftはX座標を示しています。単位はpxにしていますが、ptでもcmでもmmでも構いません。ただ細かく（正確に）ブラウザ上の座標を指定するのであればピクセル(px)を指定する必要があります。また、ここで指定した単位がJavaScriptで制御する場合に重要になるプロパティもありますので単位はしっかりと決めておきましょう。分からない場合は、ピクセルを指定しておけば良いでしょう。
　
　JavaScriptで座標を指定するにはtop,leftプロパティになります。top,leftプロパティはスタイルシートで指定した単位に依存します。そのためスタイルシートできちんと単位を指定しておく必要があります。
　実際には以下のように書きます。

document.getElementById(オブジェクト名).style.left
document.getElementById(オブジェクト名).style.top

　一度単位を指定してあれば単位なしで座標を指定することができます。例えば単位がピクセルで指定してある場合、以下のようにすると座標(100,200)に移動します。

document.getElementById(オブジェクト名).style.left = 100;
document.getElementById(オブジェクト名).style.top = 200;

以下のプログラムはマウスを載せると文字が指定された座標に移動します。

<html>
<head>
<title></title>
<style type="text/css"></style>
<script language="JavaScript"></script>
</head>
<body>
<a href="#" onMouseover="moveText('myText',200,50)">(200,50)へ</a>
<br>
<a href="#" onMouseover="moveText('myText',0,0)">(0,0)へ</a>
<div id="myText">
この文字が移動します。
</div>
</body>
</html>

　ブラウザに関するプログラムではcmなど一般的な単位ではなくピクセルの単位を使います。このためInternet Explorerではピクセル座標専用のプロパティが用意されています。pixelLeftがX座標、pixelTopがY座標になっています。これを利用したプログラムが以下のものです。

<html>
<head>
<title></title>
<style type="text/css"></style>
<script language="JavaScript"></script>
</head>
<body>
<a href="#" onMouseover="moveText('myText',200,50)">(200,50)へ</a>
<br>
<a href="#" onMouseover="moveText('myText',0,0)">(0,0)へ</a>
<div id="myText">
この文字が移動します。
</div>
</body>
</html>

　次回は文字と画像、画像のみを指定した座標に表示させてみます。

*1　Windowsの座標系やPostScriptなど数学の座標と同じにしてあるものもあります。

第64回 「文字を画面上の任意の位置に表示させる」

第64回　「文字を画面上の任意の位置に表示させる」