「左」「中」「右」の3画像で
ウィンドウ幅に合わせて伸び縮みする棒のようなものを作る。
ただし、CSSのみで実現するものとし、
http://homepage.mac.com/eijiiio/golive/igocs322.htmlのように
imgタグを使ってはいけない。
参考) テーブルレイアウト
 |
? |
 |
divで背景画像を重ねる
パッと思いつくのは
だが、幅が狭くなると、Firefoxでは下のようになってしまう。
このリスクを軽減するには単純に左右の画像を短くするしかない？
divで背景画像を重ねる (2) bodyの背景色で上書き
隠蔽関係を考えれば、leftとrightとを逆にするとちょっとだけマシになる。
それだけではright(青)がleftの透明色部分からはみ出して見えてしまうので、
leftの透明色をbodyの背景色(不透明)にする。ただし、bodyに背景画像が指定されているとアウト。
今回はbodyに背景画像が指定されているということでばっちりアウト。
divで背景画像を重ねる (3) min-width
よく考えると要求はもっと単純だ。(というか趣旨を理解していなかったorz)
上記テーブルレイアウトの代替なのだから、
ウインドウ幅を小さくしても縮まないことが求められている。
幅の下限を固定するために
CSS2のプロパティ min-width (N6〜, O6(inherit未対応), O7, IEは未対応) を使った。
IE6SP1でも幸運なことにcenterのmarginのおかげで上手くいく。
戻る