スタイルシートでは、要素の位置・大きさをピクセル単位の「座標」で設定できます。この機能を使えば、上のようにイメージの上に文字を描く事も可能になり、デザインの上でもかなり面白い効果を出せるでしょう。

絶対位置指定

　要素の位置を絶対位置（ブラウザ上の座標）で指定するには、まずスタイルでposition:absolute;を指定します。これで要素の大きさや位置を自分で指定出来るようになるので、後は位置をleft, topで大きさをwidth, heightで指定してください。例えば、ある要素の大きさを１００×１００ピクセルにして（0,0）に配置するには、以下のスタイルを指定します。

  style="position:absolute; width:100px; height:100px; left:0px; top:0px;"

　イメージの上に文字を描くには、まずイメージを絶対座標で配置し、その上に文字を同じく絶対座標で配置します。イメージは<img>タグで、文字は<div>タグで配置すれば良いでしょう。例えば、１００×１００ピクセルのimg.jpgを(0,0)に配置してその上に「テスト」という文字を描くなら、

  <img src="img.jpg" style="position:absolute; width:100px; height:100px; left:0px; top:0px;">

  <div istyle="position:absolute; width:100px; height:100px; left:0px; top:0px;">
    <table width=100 height=100 border=0><tr><th>テスト</th></tr></table>
  </div>

　という感じにします。ここで、テキストをtable内に書いているのは中央にセンタリングするためです。

　ただし、要素をposition:absoluteにすると、その要素はブラウザの配置では無視されるようです。つまり、要素があるのに無いものとしてその上に他の要素が置かれたりします。これを防ぐには、要素を入れた位置に同じ大きさのdivブロックなどを配置しておけば良いでしょう。最も、この時のdivブロックの配置位置は正確に指定する事は出来ない（このブロックにまでabsolute指定したのでは意味がない）ので、意外に厄介なのですが。ページの中ほどにabsolute指定の要素を置こうとすると、デザインがかなり面倒になるかもしれません。

　ちなみに、上のイメージと文字はdocument.body.clientWidthプロパティを参照して常に中央に成るように配置しています。

戻る