質問: 【css】横3カラム:左右は固定pxで中央カラムはが残り幅となるにはどうすれば? http://www.amazon.co.jp/ のように、 横3カラムで、全体は100%、一番左カラムと一番右カラムは固定px、真ん中のカラムは100%-左カラム固定pxー右カラム固定pxで、 ウィンドウをリサイズしても、この状況が変わらない・・・ というようなcss(jsもからむのでしょうか?)は、どのようにすればつくれるのでしょうか? 左カラム 右カラム 中央カラム 。。。だと、中央カラムが縦長になるとはみ出してしまいますよね・・・。 どうぞよろしくお願いいたします。
回答: > 「エラスティック・レイアウト」とはなんでしょうか? ano.1で挙げた参考サイトのテンプレートでいうsample 16-18がそうです。 リキッド・レイアウトはその名の通りウィンドウのリサイズに併せて幅が流動的になりますが、エラスティックでは一見、pxで指定したかの様に固定されています。ただし、px指定との場合の違いは、ブラウザの文字サイズを拡大・縮小して見るとすぐわかりますが、文字サイズの変更に併せて”各コラムの幅が一定の比率を保ったまま”リサイズされます。opera、ie7、firefox3、などに備えられている「ズーム」という機能を使用した時の状態に近いですね。 これは、コンテンツの幅を指定する際に、emという単位を使用している為です。emとpxの違いについては説明を省略させて頂きますのでググるなどして調べてみて下さい。とりあえずこの場では、大雑把な説明ですが、1em=1文字分、という様な考え方だと思っておいて下さい。つまり、例えば20emと指定されたコンテンツ幅は、ブラウザ側の文字サイズの拡大縮小の際にも常に大体一行20文字分ぐらいの幅が保たれる、という状態になるという事です。ただし、文字列の内容やブラウザの解釈などにより、きっちり20文字にはならず若干の誤差が生じます。あくまで、おおよそ...と考えて下さい。 (確か、現在のyahoo!のトップなんかがエラスティックだったと思います) > width:autoってwidthを指定しない場合と同じことでしょうか? 初期値がautoですので、そうなります。また、子要素でwidthを指定しなければ、親要素の値を継承します。例えば、 ほげ... という構造で、に対してのみ"width: 200px;"と指定していれば、その子要素のも自動的に幅200pxとなります。 > 左⇒width:auto; または 指定しない > 右⇒width:auto; または 指定しない > 真ん中⇒100%-左カラムのwidth-右カラムのwidth > を実現させつつ、 左コラムと右コラムの幅が何らかの値(px、em、%...)で指定されていないと、中央コラムに対して「100%-左カラムのwidth-右カラムのwidth」という状態は成り得ないでしょう。”引くべき(中央コラムのレンダリング領域から除く)値”が定められていなかったら、計算はできないですよね? コンテンツ全体の幅がウィンドウのリサイズに併せて変動するリキッド・レイアウトで、且つ、左・右コラムのwidthを指定しなければ、必然的に残りの中央コラムにも幅の指定はできなくなります(したとしても、中央コラム用に残された領域全てを常にリキッドで確保する状態にはならない)。つまり、3コラム全てが内容とリサイズに依存して全くの成り行き任せとなります。それだと内容によってはあるコラムだけが極端に狭くなったり広くなったりしてしまう場合もあります。 > 横3カラムを実現させようとしても、文章量や、ウィンドウのリサイズなどによって、横3カラムが崩れる、つまり、あるカラムの内容が別のカラムの下にまわりこんでしまう、とう現象が起きてしまうもので・・・。 最終的な目標がただ単にこれ、でありリキッド・レイアウトのいずれかのパターンで良いならば、上記の様なトラブルが起きる(コラム落ちの原因)のは、やはり残念ながら質問者様も思っておられる通り現在の「書き方が悪い」のでしょう。おそらくfloatのクリアと各レンダリング領域の確保が適切にできていない為だけだと思います。 とりあえず、今作成中のものは一度リセットして、既出のサンプルのテンプレートから起こし直してみては?また、3コラムレイアウトについてはもう1つ、非常に参考になるサイトがありますので、そちらをお手本にされるのも良いかも。 【参考】http://www.geocities.jp/multi_column/