HTML要素の位置とサイズ

メモです。しかも、書きかけ

HTMLで欲しい位置に欲しいサイズで要素を張り付けるのは結構 難しい（というかすぐ忘れる）ものです。
で、メモ。
これは取り急ぎのメモであり、後で説明を追加する予定。

 結局<center>と<table>が一番確実です。

HTML5で廃棄されようとしている<center>と「位置ぞろえには使わないよう」 という<table>ですが、

• 中央揃えには<center>と<table>を組み合わせるしかない!

という従来通りの結論に達しました。
block要素であればvirtical-align:middleで中央に揃うというのはIEでは 採用されていないので、結局'今'使うのはこれです。marginによる中央 寄せも<object>や<table>や数個の<input>並びなどに対して 行おうとすると'今'はブラウザ共通で動くものは<center>しかありません。
次の記述は 万象酔歩目次で使用している記述です。 テキスト、text-input、button-inputを縦幅の大きい１行に入れ、 縦横中央に置いています。buttonのアクションは省略しました

<center>
<p style="background-color:#E0E0E0;padding-top:0.4em;padding-bottom:0.3em;width:100%">
<table>
<tr style="virtical-align:middle">
<td style="font-size:90%">タイトル検索:</td>
<td><input id='searchWord' type=text style="width:16em">&ensp;</td>
<td><input type=button value="検索">&ensp;</td>
<td><input type=button value="解除" >&ensp;</td>
<td><input type=button value="クリア"></td>
</tr>
</table>
</p>
</center>

青部が空間配置に関する記述で、黒部が内容です。

次の表示が得られます。

タイトル検索:

縦が中央揃えにならないtext/text-input並びはとても見にくいものです。少なくとも 個人的には大嫌いです。空間配置は極めて重要です。内容を機械が読み取ることより 人間が読み取ることを重要視すべきです。想定する読者はロボットではなく人間です。 （HTML規約の策定者のみなさん、機械の 奴隷にならず、人間中心になってください）

 ボタンのサイズと位置揃え

イメージボタンと文字要素など縦サイズの異なるものを見やすく 並べるためには単にvertical-alignを指定するだけでなく ボタンの位置を調整する必要があります。
例えば HTMLでロールオーバーボタン では

<input type="image" 
   style="width:150px;position:relative;top:-3px;vertical-align:middle"
   onMouseDown="document.getElementById('text1').value='abc';"
   src="button_abc_0.gif"
   onMouseOut="this.src='button_abc_0.gif'"
   onMouseOver="this.src='button_abc_1.gif'"
   >
<input type="image" 
   style="width:150px;position:relative;top:-3px;vertical-align:middle"
   onMouseDown="document.getElementById('text1').value='xyz';"
   src="button_xyz_0.gif"
   onMouseOut="this.src='button_xyz_0.gif'"
   onMouseOver="this.src='button_xyz_1.gif'"
   >
<input type="text" id="text1"/>

という指定でボタンとinput要素の位置を揃えました。

この例ではボタンが画像ですが、テキストボタンの場合は"width:5.5em"などと 文字サイズベースで指定すべきかもしれません。 なお、テキストボタンとテキストの場合特にalign指定をしなくても並ぶのでこの 例では指定していませんが間が詰まり過ぎなので&emsp;を置いています。

<input type="button" value="abc" style="width:5em"
       onMouseDown="document.getElementById('text2').value='abc';"
>&emsp;
<input type="button" value="xyz" style="width:5em"
       onMouseDown="document.getElementById('text2').value='xyz';"
>&emsp;
<input type="text" id="text2"/>

   

 画像/要素の位置

画像や色々な要素を欲しい位置に置くには<div>で基本となる空間を規定し、 その中の各要素の位置属性を指定します。

例えば、 ◆調布保谷線：三鷹（2010/4/9） では、地図イメージの上に<a>や<input>を次のような形で置いていって います。

<div id="map1" style="position:relative">
<img src="chofuhoya_mitaka.gif">
   <div style="position:absolute;left:100px;top:60px">
      <a class=A1 href="inokasira_n_pan_mini.jpg" target="_blank">
      <img src="inokasira_n_idx.jpg">
      </a>
   </div>
   <div style="position:absolute;left:60px;top:120px">
      <a class=A1 href="inokasira_s_pan_mini.jpg" target="_blank">
      <img src="inokasira_s_idx.jpg">
      </a>
   </div>
　 ....
   <div style="position:absolute;left:360px;top:60px">
      <input type="image"
       onMouseDown="map1.style.display='none';map2.style.display='inline'"
       value="工事図を隠す"
       src="btn_kakusu_0.gif"
       onmouseover="this.src='btn_kakusu_3.gif'"
       onmouseout="this.src='btn_kakusu_0.gif'"
       >
   </div>
   ...
</img>
</div>

position:relativeは一つ前の要素との関連で位置が定まる事を示します。
position:absoluteは一段上のpositionを持つ要素内における絶対位置です。 これは重要な点で、例えばこの例でid="map1"のdivにposition定義が されていない場合、そのdiv内での位置とはなりません。
positionは<div>でなく各要素に指定することもできますが、視覚定義と 内容定義は分けた方が確実です。<a>がどこに置かれるかは<a>が決める ことではなく外の都合で決めることです。

 イメージの上に<p>を張り付ける

現在ローカルには動いているのですが、ココログ上では<p>が画像の外に出てしまいます。

AAAA

BBB

<div style="position:relative">
<img src="../../../tool/navi_bar_setumei.gif">
  <div style="position:absolute;left:0;top:63">
     <p class=c id="navi_bar_setumei" num="164" ></p>
  </div>
  <div style="position:absolute;left:15;top:3">
     <p>AAAA</p>
  </div>
</div>

 テーブルの幅を画面いっぱいとし、セルは固定サイズと残りサイズとする。

<table>のwidthを100%と、サイズ固定とするセルのみサイズを指定すると残りの セルは残り領域に広がります。

<table style="width:100%">
<tr    style="background-color:gray">
<td style="width:5em">5em</td><td style="width:10em">10em</td><td>残り</td>
</tr>
<table>

5em

10em

残り

<table style="width:100%">
<tr    style="background-color:gray">
<td style="width:5em">5em</td><td>残り</td><td style="width:10em">10em</td>
</tr>
</table>

5em

残り

10em

<table style="width:100%">
<tr    style="background-color:gray">
<td>残り</td><td style="width:5em">5em</td><td style="width:10em">10em</td>
</tr>
</table>

残り

5em

10em

 ＃＃＃＃

2010/6/3:<div>による位置付け記述追加。FrameSet記述削除