Jintrick.netagenda2002年04月アーカイブ → 2002年04月29日

真・ふわふわレイアウト

body{
 margin-left : expression(
  document.body.clientWidth * 20 / screen.width + '%'
 ) ;
 margin-right : expression(
  document.body.clientWidth * 20 / screen.width + '%'
 ) ;
}

注:bodyセレクタ等文書中一つしかないようなものでないと使い物になりません(複数のセレクタに適用すると計算等に時間がかかる為)。Internet Explorer5 later限定。

特徴は例示すると次のようになる:

ウィンドウ幅最大化時
左右のマージンは約20%
ウィンドウ幅50%時
左右のマージンは約10%

要はマージンの相対値が、ウィンドウ幅に比例してさらに相対的に変化するというもの。

800あるいは640ピクセルの場合にはもっと小さい数字であることが望ましい。つまりこう。左右マージンの値は:

  1. ウィンドウ幅
  2. 最大ウィンドウ幅
  3. ウィンドウ幅 ÷ 最大ウィンドウ幅

これら全てに対して相対的に変化するべき。

この、「ウィンドウ最大化時左右マージン20%」という数字が、screen.width = 1024 の時に最適な数字であるとすれば:

body{
 margin-left : expression(
  document.body.clientWidth * screen.width / 50 / screen.width + '%'
 ) ;
 margin-right : expression(
  document.body.clientWidth * screen.width / 50 / screen.width + '%'
 ) ;
}

こうすると、例えば640*480の解像度の場合、左右のマージンは最大約12%ということになる。……多すぎか。もっと極端なカーブを描かないと駄目だな。

他、本文を一つのdiv要素にして、max-widthをemで指定するというのを考えた。左右マージンはautoで。だがこれは却下。余計なdivが増えるし、最適な一行文字数は決めたくない。


webmaster@jintrick.net
公開: 2002年04月29日
カテゴリ: ウェブデザイン