仮がついたままのデザインテンプレート1124、改訂版を作り始めた。dt1124のサンプルを参照のこと。dt1124ZIP版も。
なんかぱっとしないなーと思って、変な色にしてみた。
何度も書いているが、デザインテンプレート1124でやりたいことは、1段組、2段組レイアウトの切り替えだ。Firefox, Opera, Safariでは、ウインドウの横幅がある程度あれば幅固定の2段組レイアウトのように見えるけれど、ウインドウの横幅を狭くすると1段組に切り替わる。ので、かなりのところまで横スクロールバーが出なくてすむ。幅固定のレイアウトに対する批判のひとつ「横スクロールバーが出るからウザい」に対しては、それなりの回答になるし、実際、下手なリキッドデザイン(うちとか)よりも狭いほうの耐性は強くなる。IE6やMacIE5は横幅固定レイアウトのままなのでウインドウを狭くすると横スクロールバーも出てしまうが、うちのFirefoxで見てみたら、横幅164ピクセル(縦スクロールバーの幅込み)でも横スクロールバーが出なかった。
もともとは、携帯端末が(販売戦略のために)今後ますますscreenメディアのCSSを読んできて、CSS2のメディア指定の考え方が崩壊することを先取りして、横幅240ピクセルでも大丈夫なレイアウトを、ではじめたものだ。が、現在まともに使える携帯端末はあまりないかもしれない。それこそ、CLIEとか、Windows Mobile端末ではうまくいくかもしれないが、携帯電話はもうちっと時間がたたないと無理なようだ。もうちっとたてば、media="screen, handheld"みたいな書き方も可能になるかもしれないけれど。
トラックバックURL: http://adp.daa.jp/cgi/mt2/mt-tb.cgi/514
IE6とfirefoxと、どの点で解釈が違っているんですか?
ご質問ありがとうございます。IE6はmax-widthを解釈しない、というのが一番大きな違いです。このため、ウインドウの幅が狭くなってもmax-width:100%を適用せず、2段組のままになります(http://adp.daa.jp/archives/000415.html )
表示幅によって段組みが切り替わる仕組みは便利ですね。
仕組みが単純なのも、設置性や汎用性の面で応用が効きそうです。
私のページは複数段組みではないのですぐに応用できる部分はありませんが
max-width の挙動など、非常に参考になりました。
ちなみに、Safari は最小表示幅が比較的広いので
いちばん狭くしても横スクロールバーは出ませんでした。
ありがとうございます。段組の切り替えは、余白の取り方に気を使わなければならないので、デザインの制約はありますが、仕組みは簡単です。うまくやれば、2段組4段組切り替え(SXGA以上でウインドウを最大化するとレイアウトが変わる)などもできますね。