2005年02月08日

CSSとposition:absolute

[ Search]

気がつかない人もいるだろうが,実は一昨日くらいからmemorandumのトップページのデザインが微妙に変わっている.とはいえ,デザインを構成している要素自体は変わっておらず,そのデザインを実現する方法がちょっと変わったのだ.

試しにブラウザの横のサイズをちょっと変えてみてもらいたい.右上の灰色の箱がブラウザの大きさが変わるのに合わせて左右に移動し,極端に小さくした場合にはちょっと下にズレると思う.で,その灰色の箱の位置に応じて,記事のあるブロックが上に飛び出したり左の欄の下側までズレたりすることだろう.

以前のページを残していないので記憶に頼るしかないのだが,以前はサイズを現在ほど激しく動くことはなかったはずだ.これはこのBlogのスタイルシート(=CSS)をちょっと変えたため.

このBlogはMovableTypeというツールで作られているのだが,表面的には通常のウェブページと同じで「HTML」という言語を使って書かれている.具体的には通常の文章に「タグ」という要素を付け加えることで,別のページにリンクを貼ったり,文字の大きさや色を変えたりすることができる.
だが,このHTML,考えられた当初にはレイアウトという概念がなかったらしく,中央寄せや左端・右端寄せはできるのだが,画面の右四分の一あたりに文字,上から120ピクセルのあたりに画像,というような細かい指定ができない.
しかし人間というのは工夫する生き物で,細かい表(テーブル)を方眼紙がわりにして,自分の好きな場所にあるセルの中に文字や画像を配置することで自由なレイアウトを実現してきた.

しかし,HTMLは本来の目的である文書構造の指定に専念すべきだ,ということでレイアウトを含めたウェブページの見栄えを専門に担当する仕組みとしてCSSというものが策定された.
CSSには見栄えを一括して指定する仕組み(Wordでいうところのスタイル)もあるのだが,レイアウトを指定するための仕組みもある.
CSSを使うと,ウェブページはいくつかの箱(=領域)の組み合わせとして構成でき,その箱ごとにレイアウトを細かく指定できるようになる.
このページだと,左上のタイトルバナーの箱,右上の灰色の箱,左の欄の箱,右の欄の箱,中央の記事の箱,という5つの箱で構成されている.

で,一昨日以前はこれらの箱の位置を絶対指定(=画面左上から左に○○ピクセル,下に××ピクセル,CSSでいうとposition:absolute;)していたのだが,これを部分的に絶対指定以外の位置指定に変更した結果,冒頭で挙げたようにブラウザのサイズによって箱が移動するようになってしまった.
いちおう横800ピクセルから1000ピクセルくらいのブラウザのサイズを想定して作ってある(横1280ピクセル以上だと記事の箱が上に飛び出してしまう),絶対指定であれば見る側のブラウザのサイズを気にすることなく,自分の思うようなレイアウトを実現できる.

なのに,どうして絶対指定を止めたのかというと,別件で色々と実験していたところ,文字選択(マウスで文字をドラッグして指定するやつ)がうまくいかず,原因を色々と調べた結果,「絶対指定をした箱の中では文字選択がうまくいかないことがある」という衝撃の事実が判明したためだ.
どうやらIEのみの現象らしいのだが,正確な発動条件が不明.
仕方ないので可能な限り絶対指定を使わないようにして作り直したのが現在のデザインというわけだ.

と,こう書くとえらく簡単そうに修正できたように思われるかもしれないが,絶対指定をしない場合の箱の置かれ方の規則性を最後まで読むことができなかった.
なので,CSSを適当に書き換えては読み込み,再び書き換えては読み込むという,非常に原始的な試行錯誤の賜物として現在の状態にまで辿り着いた.自分で自分を褒めてあげたい.

しかし,性根を据えてHTMLとCSSをちゃんと勉強した方がトータルでは生産的な気がするなあ...