『ボヘミアン・ラプソディ』はなぜ人々を魅了したのか >>

現在CSSで2カラム構成のサイトを作成しています。

左メイン、右サイドバーと言った感じです。
ただ、ブラウザの画面を小さくしていくと、右のサードバーが隠れずそのまま下に落ちてしまいます。

いずれもpx単位で定義しています・・・。

画面の縮小を行ってもカラム落ちしないように、強制的にそこにとどまらせる方法はありませんでしょうか?また、カラムが落ちることに関して、何か予測される原因などが御座いましたら、アドバイスいただけますと幸いです。

どうぞ、宜しくお願いいたします。

A 回答 (4件)

フロートは全く関係ないと思うのですが。



親要素とfloatする要素にwidthの設定などしていますか?
とくに、floatさせる要素にはwidthの設定は必須です。
cssて凡ミスが多いと思います。
    • good
    • 2

とりあえずこういう考え方で…



div.body { width: 800px; overflow: hidden; }
div.main { width: 600px; float: left; }
div.sidebar { width: 200px; float: right; }

<div class="body">
<div class="main">…</div>
<div class="sidebar">…</div>
</div>

全体を div で囲ってやり、そこに overflow: hidden; を指定すれば、ウィンドウサイズが小さくなった時はカラム落ちせずに、はみ出る部分がきれいに画面外に出てくれます。

細かい微調整は自力でやって下さい。
    • good
    • 1

そもそも、原因はブロックを配置するためにfloatを使うからです。


floatは、文中の挿絵などの周囲に本文を回り込ませるためですから、floatされるブロックと流し込まれるブロックを足したサイズが、ウィンドウ巾より狭くなれば回りこみが解除されるのは当然です。
 言い換えれば、ウィンドウの幅が狭いときは回り込みを解除して下側に表示させるためにfloatで配置したのではないですか?

 floatを使わず、absoluteで配置するか、
 floatを使うなら横幅を固定しないか、親ブロックの巾を決めてしまう(この場合、狭いウィンドウでは横スクロールを強制される)かです。

 本文と、右サイドバーの内容はどちらがいつも大きいかなどがわかっている場合は、それも教えてください。
    • good
    • 0

ちゃんと「カラム落ち」で検索しました?



>原因
floatしてるから

>方法
コンテナのwidthを設定する
    • good
    • 3

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

このQ&Aを見た人はこんなQ&Aも見ています

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

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

Qウィンドウのサイズを変えても表示を崩れないようにしたい

ウインドウサイズをドラッグドロップして大きさを変えると
表示が崩れまくって困ります
固定する方法はないですか?ウインドーの大きさにかかわらずに
常に表示が同じな。

Aベストアンサー

表というのはtableタグでしょうか?でしたら
<table width="">(幅)
<table height="">(高さ)
で大きさを指定するとウィンドウサイズを変えてもテーブルのサイズは変わらないと思います。

Qfloatでカラム落ちを防ぎたい

少し長いですがお付き合いよろしくお願いいたします。

<style type="text/css"><!--

body {
text-align:center;
}

#all {
width:730px;
margin-left:auto;
margin-right:auto;;
text-align:left;
background-color:#33ffcc}

#left{width:50%;
float:left;}

#right{width:50%;
float:left;}

--></style>

</head>

<body>

<div id="all">

<h1>見出し1</h1>

<div id="left">

<h2>AAA</h2>
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>

<h2>BBB</h2>
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>

<h2>CCC</h2>
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>

</div>

<div id="right">

<h2>AAA</h2>
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>

<h2>BBB</h2>
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>

<h2>CCC</h2>
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>

<h2>DDD</h2>
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>

<h2>EEE</h2>
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>

</div>

</div>

このように記述するとFirefoxではallで指定した背景色がh1にしか反映されず、left、rightの高さのずれている部分には反映されません。

この記述から、スタイルシートのrightに何も指定しないようにすると、allに指定した背景色はきちんと反映されるんですが、今度はleftよりrightのコンテンツが多いためカラム落ちしてしまいます。

どのように、記述すれば背景色がうまく反映され、カラム落ちを起こさずに済むのでしょうか?

条件はFirefox,Opera,IE6でほぼ同じレイアウトが表現でき、tableやoverflowは使わない事です。

少し長いですがお付き合いよろしくお願いいたします。

<style type="text/css"><!--

body {
text-align:center;
}

#all {
width:730px;
margin-left:auto;
margin-right:auto;;
text-align:left;
background-color:#33ffcc}

#left{width:50%;
float:left;}

#right{width:50%;
float:left;}

--></style>

</head>

<body>

<div id="all">

<h1>見出し1</h1>

<div id="left">

<h2>AAA</h2>
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>

<h2>BBB</h2>...続きを読む

Aベストアンサー

最後の </div> の手前に

<br style="clear: both;">
もしくは、
<div style="clear: both;"><br></div>
や、
<div style="clear: both;">&emsp;</div>
等を入れる。

Qレイアウトが崩れないようにするための、

<div class="a">で一度幅や高さの指定をしているのに、ウインドウサイズを変更しても、レイアウトが崩れないようにするために、その<div>からさらに<div>で囲むのはなぜなんでしょうか?

<div id="wrapper">
 <div class="a"></div>
</div>

div.a {
width:900px;
}

#wrapper{
width:900px;
}

Aベストアンサー

「ウインドウサイズを変更しても、レイアウトが崩れないようにするため」ではないでしょうか?(^^;

divをdivで囲う理由は、色々ありますが、この場合ですと、
<div id="wrapper">
という大きなブロックと
<div class="a">
という、さっきのブロックの中にある一つのブロック
と、意味のあるブロック単位に明示的に分けていると考えられます。
この形ですと、<div id="wrapper">の中に、<div class="a">を複数設置したり、<div class="b">を併設したり、色々できますね。

両方width:900px;を指定しているのは、どっちか片方だけだと、デザインが崩れるブラウザもあるからです。両方指定しておけば確実ですね。

QCSSで画面サイズを縮小するとレイアウトが大きく崩れてしまう

CSSとXHTMLで、左と右に分かれただけのデザインという少し変わったレイアウトで作ってみたのですが、画面サイズを変更(縮小)すると右側のBOXがすべて左側の下に回り込んでしまいます。
できればスクロールバーなどを出現させて、レイアウトが崩れないようにしたいと考えています。
色々いじくっていたらめちゃくちゃになってしまったのですが、一応CSSを掲載しておきます。
また、左側を○○pxで、右側を残りのサイズというようなwidthの指定の仕方ってあるのでしょうか?
frameとかだと*で対応するみたいなんですが・・・

ひとまず、周り込を回避する方法が優先です。
どうかよろしくお願いいたします。


@charset "shift_jis";


body {
margin: 0px;
height: 100%;
padding: 0px;
font-size: 12px;
line-height: 150%;
}
html {
height: 100%;
}
img {
border: none;
vertical-align: bottom;
}

#left {
background-color: #666666;
width: 350px;
float: left;
min-height: 100%;
height: 100%;
}
#right {
height: 100%;
padding: 35px 0 0 0;
min-height: 100%;
width: auto;
margin: 0 0 0 350px;
}

CSSとXHTMLで、左と右に分かれただけのデザインという少し変わったレイアウトで作ってみたのですが、画面サイズを変更(縮小)すると右側のBOXがすべて左側の下に回り込んでしまいます。
できればスクロールバーなどを出現させて、レイアウトが崩れないようにしたいと考えています。
色々いじくっていたらめちゃくちゃになってしまったのですが、一応CSSを掲載しておきます。
また、左側を○○pxで、右側を残りのサイズというようなwidthの指定の仕方ってあるのでしょうか?
frameとかだと*で対応するみたいなん...続きを読む

Aベストアンサー

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<style>
/* left[liquid] right[fixed] */
body {
overflow: hidden;
zoom: 1;
}
#left {
float: left;
width: 100%;
overflow: hidden;
zoom: 1;
}
#left div.contents {
margin-right: 240px;
}
#right {
float: right;
width: 240px;
margin-left: -240px;
overflow: hidden;
zoom: 1;
}
/* your design */
body{
margin:0;
width:100%;
height:100%;
}
#left{
background: #eee;
height:100%;
}
#right {
background: #ccc;
height:100%;
}
</style>
<body>
<div id="left">
<div class="contents">
text text text text text text text text text text text text text text
</div>
</div>
<div id="right">
text text text text text text text text text text text text text text
</div>
</body>
</html>
こんな感じでどうでしょう?サブコンテンツ固定のメインコンテンツ可変のレイアウトです。(注:IE6とFirefox2.0でしか確認してません)
最近ブログに同じような記事を書いたので、よろしかったら参考にしてみてください。

簡単にCSSレイアウトできるフレームワークを考えてみる - Cyokodog::Diary
http://d.hatena.ne.jp/cyokodog/20080731/1217496357

サブコンテンツ固定・メインコンテンツ可変のCSSレイアウト - Cyokodog::Diary
http://d.hatena.ne.jp/cyokodog/20080805/1217955315

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<style>
/* left[liquid] right[fixed] */
body {
overflow: hidden;
zoom: 1;
}
#left {
float: left;
width: 100%;
overflow: hidden;
zoom: 1;
}
#left div.contents {
margin-right: 240px;
}
#right {
float: right;...続きを読む

Q横並びリスト ブラウザ縮小 カラム落ち

よろしくお願いします。

ulとliで横並びの商品リストの様なものを作成していて、
ようやく完成したと思っていたのですが、
ブラウザの拡大/縮小機能を使って、
少しでも縮小するとカラム落ちが発生してしまいます・・・。

完成したと思っていたので焦っております(汗)

簡単にソースを記載しますので、
原因と対策がわかりましたら、どうか回答宜しくお願いします。


ul{
width:720px;
list-style:none;
}

li{
width:142px;
border:1px solid #000;
float: left;
}

このような感じで、ulには別にクラスを指定して、clearfixも指定しています。
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html .clearfix { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

ulの全体720pxを5個のliで割って、144pxとなり、
そこからborder両サイド1pxづつを引いて142pxをliに指定しているのですが、
間違っているのでしょうか?

liの幅を144pxにしてborderを指定しない場合は、
縮小してもカラム落ちは起こりません。

初歩的なことかもしれませんが、
どうぞよろしくお願いします。

よろしくお願いします。

ulとliで横並びの商品リストの様なものを作成していて、
ようやく完成したと思っていたのですが、
ブラウザの拡大/縮小機能を使って、
少しでも縮小するとカラム落ちが発生してしまいます・・・。

完成したと思っていたので焦っております(汗)

簡単にソースを記載しますので、
原因と対策がわかりましたら、どうか回答宜しくお願いします。


ul{
width:720px;
list-style:none;
}

li{
width:142px;
border:1px solid #000;
float: left;
}

このような感じで、ulには別にクラスを指定...続きを読む

Aベストアンサー

ブラウザの種類

DTD 過去/標準の変更

ul,li{padding:0; margin:0;}

clearfixを削除して検証(最少ソースで検証)

縮小したときの検証ツールでのレイアウト数値の調査

a要素の絡み

テキストや画像の関係

その他のCSSが干渉?

*:first-child+html li{ letter-spacing: 0;}
*:first-child+html li a{ letter-spacing: 0;}

Q画面サイズ変更時のレイアウトの崩れ

サイトをHTML+CSSで作成しているんですが
ブラウザのサイズが最大化のときは平気なのですがサイズを変更する(縮める)とライン画像がはみ出したりリストが縮める側に寄ってしまったりとレイアウトが崩れてしまいます。
これを直す方法はあるでしょうか?

背景は1024×50の画像をy軸でリピートさせています。
レイアウトのほうは見出し画像の右にリストを横に表示させ、その下にナビゲーションを配置しています。
最大化時、縮小化時ともに縦、横のスクロールがなぜか表示されません。

Aベストアンサー

スクロールバーが表示されないのが問題なのでしょうか?
テンプレートを使っている場合は、デフォルトで表示されないようにしてあったりする場合があると思います。

overflow-x:hidden;
overflow-y:hidden;
などがないか確認してみるといいと思います。

QPCの画面を縮小したらサイズに合わせて改行させたい

こんにちは。

メモ帳を使ってホームページを作成しています。
長い一文など<br>を使って改行しているのですが、パソコンの画面を縮小すると、横スクロールバーが出てきて見にくいものになってしまいます。
他のサイトさんを見ると、画面サイズを縮小すると自動的に見やすく改行され、横スクロールバーも出てこないのですが、(最大化した時と改行していている位置が違います)どういうタグ等を使ったらこのように設定できるでしょうか?

作成については初心者で、本を見ながらやっている状態です。
使用しているブラウザはIE7で、WindowsVistaです。
なにとぞよろしくお願い申し上げます。

Aベストアンサー

divとtableの場合のサンプル
<div>や<table>の横幅をパーセント指定します。
固定値(500px)などにすると改行されたようには出来ません。

<html>
<head>
<title>sample</title>
</head>
<body>
<div style="width: 100%;word-break:break-all;">
<p><!-- 長い文章を書き込む --></p>
</div>
</body>
</html>

<html>
<head>
<title>sample</title>
</head>
<body>
<table style="width: 100%;word-break:break-all;">
<tr>
<td><!-- 長い文章を書き込む --></td>
</tr>
</table>
</body>
</html>

※英文ようにword-breakを追加しています。

Q
の縦バージョンはありますか?

現在HTML言語を使用してホームメイドなサイトを構築しているのですが

<hr>・・・横長の区切り線

ですよね?

これを縦にした表示がしたいのですが、どうすればよろしいでしょうか?

恐れ入りますが、そのようなタグが存在するようならば、タグを教えていただけないでしょうか?

よろしくお願いします。

Aベストアンサー

 こういうのはだめですか、↓
<div style="background-color:gray; width:2px; height:300px; position:absolute; top:50px; left:100px;"></div>

参考URL:http://www.tohoho-web.com/how2/line.htm#vr

QHTMLフォームのSELECTの幅を一定にするためには?

HTMLフォームのSELECTの幅を一定にするためにはどのようにすれば
いいのでしょうか?

CSS等で設定できるとありがたいのですが、やり方がわかりません。

Aベストアンサー

<select style="width: 200px">

QCSSでborderの長さを指定、または可変にしたい。

下記のように指定していますが、これだと横幅いっぱいに下の線が表示されてしまいます。

文字なりの長さ、または指定のピクセル数にしたいのですが、どのようにしたらよいでしょうか。

h3{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

Aベストアンサー

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよければ

<h3><span>××○○</span></h3>
のようにspanで囲い、スタイルをspanに対して指定する方法もあります。

h3 span{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよけ...続きを読む


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング