トップ «前の日記(2003-03-13) 最新 次の日記(2003-03-15)»

2003-03-14

_ [web] position: absolute; top: 200px; left: 10%;

position 属性を使ってレイアウトしてみた。とりあえずIE6.0.x、Netscape7.0x、Opera7.0x には対応した模様。でもこの position 属性、いまいち使いどころがわからないな……この状態だと、たとえばタイトル画像の縦幅を変えたら、合わせて上からの移動値を手で変えないと関係が崩れる。だったらテーブルのほうが汎用性も高く、スマートな気がする。

同じ行に div ボックスを横並びにできるよい方法はないもんか……おれが知らないだけか? あるボックスの原点を前のボックスの右上にする方法なんて、ありそうだけど。しかも縦幅が左のボックスと揃ったりするとなおいい。

float タグを試してみたけど、万能ではなかった。そもそもマクロなレイアウトのための属性じゃないしね。ここで float タグの特徴を。

float タグが得意なレイアウトは

21
(3)
みたいなのだけど、いま知っている範囲だと
1
23
4
とか
12
3
※ 数字入りの枠はすべて div ボックス
というレイアウトをうまく処理できない。親子関係にあるボックスや、テキストとボックスの関係を処理するぶんにはとても有効だけど、同等の関係にあるボックス同士をコントロールするとなるとなかなか難しいというか……うまく説明できないな。

クラスや ID を細かく指定して、段の終わりにくるボックスに float: clear; を使えばいいのかもしれないけど、たとえば tDiary の場合は div.day が連続しているだけなので、 div.day に float: right; を与えてしまうと右に向けてがんがん並んでしまうことになる。

とにかく、ある特定の状況ではきれいに配置できても、ウィンドウやフォントのサイズ、テキスト量などが変わっただけでボックスが重なったりずれたりされては困る。上の二つの図でも table タグを使ってるわけだけど、スタイルシートでこれをきちんと再現できない間は table タグの絶滅もありえなーいと絞めてみる。きゅっ。

_ ここまで積極的に人に会いたくない状態というのもえらいひさびさなんだけどそんな中でBGMを選んでるとスガシカオ「サヨナラ」とか山崎まさよし「全部、君だった。」なんかよりぜんぜんスートするのがHALCALI「タンデム」だったりするのは人間の妙であるなーガーリーはいいなーやっぱガーリーだよ t.A.T.u. ばか売れだしねーなんつってると意識しなくても0.3秒で Google に「ガーリー」をつっこんでいるわけで「エドガー・リー・マスターズ」とか「ガーリー=我愛羅×リー」などがヒットし非常にゆかい。