今、aquapple内のページをひそかにCSS化しているわけだが、このサイト全体の特徴として、ウィンドウをどこに移動しても「ノートは必ず画面中央に位置する」というものがある。
これ、構造は簡単で
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center">ノートの中身</td>
</tr>
</table>とやっているのだけれども。
これをCSSで表現するのは一苦労、いやふた苦労ぐらいしただろうか。
まず、XHTML1.1の厳格さゆえ、heightプロパティに100%を指定しても、認識しなくなった。
HTMLではできていた当たり前の垂直方向のセンタリングができなくなったのだ。
水平方向のセンタリングはCSSで
body {
text-align: center;
margin: 0px auto;
}と指定することによってできたのだが・・・。
垂直方向になんとかセンタリングできないものかと、あの手この手で模索したものの、結局挫折。
と、言うわけで一応800*600サイズのモニタに最適化した。
上のmarginだけを数Pixel開けただけだ。
つまり、モニターが大きければ大きいほど、ノートが画面上部にぽかんと位置することになる。
私としては、XHTML1.1化を優先したのでやむなくこうなってしまったのだが。
[追記]
後々調べてみると、CSS2のプロパティを駆使すれば、無理やりセンタリングが可能ということが発覚。
その内容はまた後日紹介するとして、とりあえず最新のCSS2の規格を使用するわけにはいかない(モダンブラウザに限定するわけにはいかない)ので、まだ見送ることにする。
あと、IEで見られないと思われるバグはタグミスで、修正しました。
