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>
。。。だと、中央カラムが縦長になるとはみ出してしまいますよね・・・。
どうぞよろしくお願いいたします。
No.1ベストアンサー
- 回答日時:
方法は色々考えられますが、手っ取り早くなら、CSS HappyLifeさんの提供されている「3カラムサンプル18種」というテンプレート集があります。
http://css-happylife.com/log/css-template/000168 …
ここのSample 08、09あたりのテンプレートが質問者様のご希望のレイアウトになるかと思いますが。
ご回答ありがとうございます。
なるほど、marginにマイナスをあたえるのですね。。。
知らなかったです。
あと、やや違うケースですが
3カラムで。
左右のカラムは、widthを固定ピクセルにせずコンテンツがそのまま表示されたときのwidthが(リサイズしても)たもたれる。
で、中央のカラムは、100%から左右のカラム幅をひいた幅となる。
(さらに、中央カラムでは、min-width:300px;を設定する)
ということって実現可能でしょうか?
だとすればどのようにできるでしょうか?
よろしくお願いいたします。
No.3
- 回答日時:
> 「エラスティック・レイアウト」とはなんでしょうか?
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/
No.2
- 回答日時:
ANo.1です。
> 中央カラムでは、min-width:300px;を設定する
これはそのまま、CSSに設定を追加してやればいいだけの話ですが。
> 左右のカラムは、widthを固定ピクセルにせずコンテンツがそのまま表示されたときのwidthが(リサイズしても)たもたれる。
申し訳ないのですが、上記で仰っている意味がよくわかりません。「コンテンツがそのまま表示されたときのwidth」とはどういう事でしょうか?
「widthを固定ピクセルにせず」だと、%やemでの指定になりますが、前者だとウィンドウのリサイズによって実際のレンダリング領域は可変となりますし、後者だと所謂エラスティック・レイアウトになると思いますが。もし何もwidthを指定しなければ、各コラムのレンダリング領域はそれぞれが内包する要素とウィンドウのリサイズに依存してしまいますので「たもたれる」という状態はなくなりますし。
恐縮です。たしかに意味不明でしたね。。。すみません。
ところで、「エラスティック・レイアウト」とはなんでしょうか?
意図としては、
左⇒width:auto; または 指定しない
(実はwidth:auto;って昨日しったばかりなのですが、width:autoってwidthを指定しない場合と同じことでしょうか?)
右⇒width:auto; または 指定しない
真ん中⇒100%-左カラムのwidth-右カラムのwidth
を実現させつつ、
レイアウトが、横3カラムのまま崩れない(最終的な目標はこれ)、ことを目指しています。
どうも、横3カラムを実現させようとしても、
文章量や、ウィンドウのリサイズなどによって、
横3カラムが崩れる、つまり、あるカラムの内容が別のカラムの下にまわりこんでしまう、とう現象が起きてしまうもので・・・。
書き方が悪いのでしょうか?
初歩的な質問かもしれませんが、よろしくお願いいたします。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS FC2カートのテンプレートでの商品表示について 1 2023/03/02 18:05
- JavaScript ソースコードのいじる場所が分かりません。 1 2022/12/23 02:06
- PHP アップロード画像数でCSSを分けることに成功したのですが、画像の横に文字を並べることが出来ません。 3 2023/07/28 17:16
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
- その他(プログラミング・Web制作) google formsで回答者をスプレッドシートに記載する方法 1 2023/06/23 11:22
- PHP Postgresの特定のカラムからスペースを取る方法 1 2023/02/22 13:18
- HTML・CSS 吹き出し 下記の吹き出しのスタイルシートについて 下記のスタイルシートは左側にアイコンがでる使用にな 1 2022/11/12 17:55
- HTML・CSS img と p を縦中央に配置したいのですがうまくいきません。 2 2023/01/12 14:38
- 化学 陰イオン交換クロマトグラフィーについての質問です。 先日、陰イオン錯体の形成による分離の実験を行いま 1 2023/05/02 01:26
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
CSSのtransform: translate(-50...
-
ホームページビルダー 空白の...
-
文字を中央に寄せる
-
HTMLフォームのSELECTの幅を一...
-
Dreamweaverで画面サイズを一定...
-
ドリームウィーバーでホームペ...
-
線が極端に細いテーブルで、特...
-
pタグによる段落間のアキ調整...
-
CSSでテキストを垂直、中央に設...
-
ヘッダーの上にほんのわずかに...
-
右寄せ表示方法
-
なぜ左に寄っているの?
-
CSSで、文字は左寄せにして、文...
-
*{margin:0px;padding:0px;}と...
-
htmlのタグ間の謎の空白
-
Microsoft1Officeの互換ソフト...
-
エクセルで一部分のセルの高さ...
-
敬語
-
実行結果をデジタル時計みたい...
-
エクセルでサイズ指定でPOP...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
CSSのtransform: translate(-50...
-
aタグに直接style=""で:hoverを...
-
<h1>タグの後の行間を詰めたい。
-
HTMLフォームのSELECTの幅を一...
-
インラインフレームの表示位置...
-
コードを書いて下さい( ; ; )...
-
端から端まで横線を引きたい
-
INPUT TEXT内の文字位置を指定...
-
なぜ左に寄っているの?
-
FireFoxで見るとブラウザの幅に...
-
iPhone用のサイトの文字がずれ...
-
<legend>で表示されるタイトル...
-
Formタグのブロックの高さについて
-
CSSでh1とその下の文字との行間...
-
Dreamweaverで画面サイズを一定...
-
macとwindowsのレイアウト崩れ...
-
ホームページビルダー 空白の...
-
text-alignの解除の方法
-
パソコンのみで反映される余白...
-
Firefox 横スクロールバーを表...
おすすめ情報