人に聞けない痔の悩み、これでスッキリ >>

http://www.amazon.co.jp/

のように、

横3カラムで、全体は100%、一番左カラムと一番右カラムは固定px、真ん中のカラムは100%-左カラム固定pxー右カラム固定pxで、
ウィンドウをリサイズしても、この状況が変わらない・・・

というようなCSS(JSもからむのでしょうか?)は、どのようにすればつくれるのでしょうか?

<div style="float:left;">
左カラム
</div>
<div style="float:right;">
右カラム
</div>
<div>
中央カラム
</div>


。。。だと、中央カラムが縦長になるとはみ出してしまいますよね・・・。

どうぞよろしくお願いいたします。

このQ&Aに関連する最新のQ&A

A 回答 (3件)

方法は色々考えられますが、手っ取り早くなら、CSS HappyLifeさんの提供されている「3カラムサンプル18種」というテンプレート集があります。



http://css-happylife.com/log/css-template/000168 …

ここのSample 08、09あたりのテンプレートが質問者様のご希望のレイアウトになるかと思いますが。
    • good
    • 0
この回答へのお礼

ご回答ありがとうございます。

なるほど、marginにマイナスをあたえるのですね。。。

知らなかったです。

あと、やや違うケースですが
3カラムで。
左右のカラムは、widthを固定ピクセルにせずコンテンツがそのまま表示されたときのwidthが(リサイズしても)たもたれる。

で、中央のカラムは、100%から左右のカラム幅をひいた幅となる。
(さらに、中央カラムでは、min-width:300px;を設定する)

ということって実現可能でしょうか?

だとすればどのようにできるでしょうか?

よろしくお願いいたします。

お礼日時:2008/09/03 19:30

> 「エラスティック・レイアウト」とはなんでしょうか?



ANo.1で挙げた参考サイトのテンプレートでいうSample 16-18がそうです。
リキッド・レイアウトはその名の通りウィンドウのリサイズに併せて幅が流動的になりますが、エラスティックでは一見、pxで指定したかの様に固定されています。ただし、px指定との場合の違いは、ブラウザの文字サイズを拡大・縮小して見るとすぐわかりますが、文字サイズの変更に併せて”各コラムの幅が一定の比率を保ったまま”リサイズされます。Opera、IE7、Firefox3、などに備えられている「ズーム」という機能を使用した時の状態に近いですね。
これは、コンテンツの幅を指定する際に、emという単位を使用している為です。emとpxの違いについては説明を省略させて頂きますのでググるなどして調べてみて下さい。とりあえずこの場では、大雑把な説明ですが、1em=1文字分、という様な考え方だと思っておいて下さい。つまり、例えば20emと指定されたコンテンツ幅は、ブラウザ側の文字サイズの拡大縮小の際にも常に大体一行20文字分ぐらいの幅が保たれる、という状態になるという事です。ただし、文字列の内容やブラウザの解釈などにより、きっちり20文字にはならず若干の誤差が生じます。あくまで、おおよそ…と考えて下さい。
(確か、現在のYahoo!のトップなんかがエラスティックだったと思います)

> width:autoってwidthを指定しない場合と同じことでしょうか?

初期値がautoですので、そうなります。また、子要素でwidthを指定しなければ、親要素の値を継承します。例えば、
<div id="hoge">
<p>ほげ…</p>
</div>
という構造で、<div id="hoge">に対してのみ"width: 200px;"と指定していれば、その子要素の<p>も自動的に幅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/
    • good
    • 0

ANo.1です。



> 中央カラムでは、min-width:300px;を設定する

これはそのまま、CSSに設定を追加してやればいいだけの話ですが。

> 左右のカラムは、widthを固定ピクセルにせずコンテンツがそのまま表示されたときのwidthが(リサイズしても)たもたれる。

申し訳ないのですが、上記で仰っている意味がよくわかりません。「コンテンツがそのまま表示されたときのwidth」とはどういう事でしょうか?
「widthを固定ピクセルにせず」だと、%やemでの指定になりますが、前者だとウィンドウのリサイズによって実際のレンダリング領域は可変となりますし、後者だと所謂エラスティック・レイアウトになると思いますが。もし何もwidthを指定しなければ、各コラムのレンダリング領域はそれぞれが内包する要素とウィンドウのリサイズに依存してしまいますので「たもたれる」という状態はなくなりますし。
    • good
    • 0
この回答へのお礼

恐縮です。たしかに意味不明でしたね。。。すみません。

ところで、「エラスティック・レイアウト」とはなんでしょうか?

意図としては、
左⇒width:auto; または 指定しない
(実はwidth:auto;って昨日しったばかりなのですが、width:autoってwidthを指定しない場合と同じことでしょうか?)
右⇒width:auto; または 指定しない
真ん中⇒100%-左カラムのwidth-右カラムのwidth
を実現させつつ、

レイアウトが、横3カラムのまま崩れない(最終的な目標はこれ)、ことを目指しています。

どうも、横3カラムを実現させようとしても、
文章量や、ウィンドウのリサイズなどによって、
横3カラムが崩れる、つまり、あるカラムの内容が別のカラムの下にまわりこんでしまう、とう現象が起きてしまうもので・・・。

書き方が悪いのでしょうか?

初歩的な質問かもしれませんが、よろしくお願いいたします。

お礼日時:2008/09/04 18:19

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Q左○○px、右は残りの幅(100%-左px)ってできますか?

CSSでレイアウトを組みたいと思ってます。

要は左と右に2つに割って左はpx単位で指定して、右は残りのサイズ、ウインドウのサイズ変更に伴って可変するようにレイアウトを組んでいきたいと考えています。

発想力が足りないのか、基礎的な知識が足りないのか・・・
どちらも足りないとは思いますが、おしえていただければ幸いです。

どうかよろしくお願いいたします。

Aベストアンサー

とりあえずdivでフロートするだけでもよいかと

<style>
#l{
width:200px;
background-Color:blue;
float:left;
}
#r{
width:auto;
background-Color:red;
}
#b{
width:auto;
background-Color:green;
}
</style>
<div id="l">test</div>
<div id="r">test</div>
<div id="b">test</div>

Qスタイルシートで画面を上下に分割,高さを上部はpxで指定,下部は残り全部にする方法

画面を上下に分けて,上部の高さをpx単位で指定して下部は残り全部にするのをスタイルシートで実現したいと思い,次のようにしてみたんですがうまくいきません.

<html>
<body style="margin:0px; padding:0px;">
<div style="width:100%; height:100px; background-color:#ccf;">
画面上部
</div>
<div style="width:100%; height:100%; background-color:#fcc; ">
画面下部
</div>
</body>
</html>


要は下部の「残り全部」のやり方がわかっておらず,全体的な高さが100px+100%になり,表示画面より下に100pxはみ出してしまいます.
次のようにdivを入れ子にするとうまくいくんですが,内部に表示させる内容によっては不具合が出るので,どうしてもdivどうしが独立した形で実現させたいです.

<html>
<body style="margin:0px; padding:0px;">
<div style="width:100%; height:100%; background-color:#fcc; ">
<div style="width:100%; height:100px; background-color:#ccf;">
画面上部
</div>
</div>
</body>
</html>

他の質問サイトでも尋ねてみたのですが,質問の意味を理解してもらえずに別に問題はないという回答を1件頂いたのみで解決できませんでした.また,テーブルではなく必ずスタイルシートで実現したいです.対策をご存知の方,ご教示よろしくお願いします.

画面を上下に分けて,上部の高さをpx単位で指定して下部は残り全部にするのをスタイルシートで実現したいと思い,次のようにしてみたんですがうまくいきません.

<html>
<body style="margin:0px; padding:0px;">
<div style="width:100%; height:100px; background-color:#ccf;">
画面上部
</div>
<div style="width:100%; height:100%; background-color:#fcc; ">
画面下部
</div>
</body>
</html>


要は下部の「残り全部」のやり方がわかっておらず,全体的な高さが100px+100%になり,表示画面...続きを読む

Aベストアンサー

思い出したのでIE対応にするための追記。

前回のサンプルの<head>~</head>に以下を追加。
<!--[if IE]>
<style type="text/css">
#Content {
width:100%;
height:expression(document.body.clientHeight - 100);
}
</style>
<![endif]-->

参考
http://www.keynavi.net/ja/bugh/comments.html
http://useyan.x0.com/s/html/expression/

Qdivのheight指定で画面一杯に表示したい

よろしくお願い致します。

<div>の<height>を100%に指定して、
タブレット等での表示時、縦でも横でも画面一杯に
表示させたいと考えています。

とりあえず css で以下は宣言済みです。
 html, body {
  height: 100%;
  margin: 0px;
  padding: 0px;
 }

親子構造としては以下を想定しています(いくらか簡略化しています)
<html>
 <body>
  <div id="H" style="height:60px;">
   (1)ここにヘッダー的なもの
  </div>
  <div id="B" style="height:100%; overflow: auto;">
   (2)この部分を縦一杯にしたい
  </div>
 </body>
</html>

(2)の部分にはjavascriptでサーバから取得した
XMLのデータを埋め込んでおります。

その際、選択行の色付け等を行いたかった為、
大枠を<div>でくくり、その中に<table>で表組みしています。
最終的な構造は以下のようになっているはずです。
 <div id="B" style="height:100%; overflow: auto;">
  <div id="rdiv1"><table id="rtbl1"><tr><td ・・・ /td></tr></table></div>
  <div id="rdiv2"><table id="rtbl2"><tr><td ・・・ /td></tr></table></div>
  <div id="rdiv3"><table id="rtbl3"><tr><td ・・・ /td></tr></table></div>
  ・・・
 </div>

行ごとの<div>や、その中の<table>でも height: 100%; は指定しています。
また、1行あたりの高さは<td style="height: 40px;">と指定しています。
(rowspanを使ってのぶち抜きを行っているため)

html と body に height:100%; を指定しているので、
予想ではヘッダー用のdivが指定の高さで表示され、
次のdivが残りの高さ分一杯に表示。
その中のデータは overflow:auto; でスクロールできる。

と考えていたのですが、実際はjavascriptで埋め込んだdiv、
及びtableの高さまで伸びてしまい画面上を大きくはみ出してしまいます。
(divのoverflowが全く機能しません)

100%ではなく 500px としてみたところ、
そのサイズに収まってスクロールできました。
(縦一杯ではありませんがdivのoverflowは機能しました)

何とか height 100% を実現して、
divのスクロールバーのみでの表示を行いたいのですが、
何か指定が足りないのでしょうか?

よろしくお願い致します。

<div>の<height>を100%に指定して、
タブレット等での表示時、縦でも横でも画面一杯に
表示させたいと考えています。

とりあえず css で以下は宣言済みです。
 html, body {
  height: 100%;
  margin: 0px;
  padding: 0px;
 }

親子構造としては以下を想定しています(いくらか簡略化しています)
<html>
 <body>
  <div id="H" style="height:60px;">
   (1)ここにヘッダー的なもの
  </div>
  <div id="B" style="height:100%; overflow: auto;">
   (2)この...続きを読む

Aベストアンサー

>html と body に height:100%; を指定しているので、
予想ではヘッダー用のdivが指定の高さで表示され、
次のdivが残りの高さ分一杯に表示。

まずこの予想の部分が間違っています。質問の通りに作って、高さ500pxの画面で確認した場合、html、bodyの高さは500px、ヘッダー60px、そしてその次のdivの高さも500pxで、60pxはみ出る形になります。height:100%というのは親セレクタに対しての100%です、残りの100%ではありません。

残りの高さいっぱいにしたい場合はcssのみではできません。JSを使うか、似たような見え方で違う組み方をするか…


人気Q&Aランキング