- ベストアンサー
ＣＳＳについて教えてください
naokitaの回答
#1さんの話じゃないけど、 段組みでのfloatボックスは、一般的に多く利用されていますのでご安心を。 計算通りピッタリな場合は、 隙間が無いはずなので、leftもrightも同じですよ。 リキッドで、 段落ちした場合には、指定方向に寄ってしまう場合がありますけどね。 腐ったブラウザやDTDによっては、別の原因で崩れる事があります。
関連するQ&A
- 特に指定する値がない場合のcssについて
現在作成しているホームページで、以下のようなソースを書きました <div id="wrapper"> <div class="box1 clearfix"> <div class="right1">floatで右寄せ</div> <div class="left1">floatで左寄せ</div> </div> <div class="box2 clearfix"> <div class="right2">floatで右寄せ</div> <div class="left2">floatで左寄せ</div> </div> </div> 初めは特にdivを入れ子にする必要はないと思っていたのですが clearfixの指定をかけるには必要だったので、<div class="box">で囲むことにしました。 ですが、box1やbox2に、特に指定する値がなくて悩んでいます。 特に指定することがない場合にはcssには何も書かなくてよいものなのでしょうか？ 今は取り敢えず何か指定してないと落ち着かない気がして width指定だけ書いているのですが、幅はwrapperで指定していますし特に必要ない気もします。 このような場合には何も指定をしないか、取り敢えずwidthだけでも指定しておくかどちらの方が良いのでしょうか？ よろしくお願いします。
- ベストアンサー
- HTML
- CSSレイアウトの回り込みについて
初めまして、よろしくお願いいたします。 見よう見まねでCSSレイアウトのweb制作に挑戦している者です。以下の現象についてご指南いただければ大変助かります。 ■CSS #wrapper { width : 620px; } #left { width : 300px; float : left; } #right { width : 300px; float : right; } ■ソース <div id="wrapper"> <div id="left"> （左寄せブロック） </div> <div id="right"> （右寄せブロック） </div> </div> 上記のCSSとソースで「620px幅の外枠」の中に「300px幅の左寄せブロック」「300px幅の右寄せブロック」が中央に20pxの隙間を空けて正常に表示されるのですが、右寄せブロックの中に長いテキストを改行せずに書いたら右寄せブロックが右寄せにならず、左寄せブロックの下に落ちて表示されてしまいます。 この現象は、長いテキストが300px幅に指定されている右寄せブロックの幅を押し広げている？から起こるのでしょうか。 右寄せブロックの中に長いテキストを書く場合、いちいち300px幅を意識して自分で改行を入れなくても、300pxの右寄せブロック幅を押し広げることなく自動折り返しされれば良いのですが。（右寄せブロックの高さは指定していないので） また、文字のサイズはpxで固定できない事情があるので、ブラウザで可変できるパーセント指定にしているのですが、ブラウザの文字サイズ中では正常に右寄せされている右寄せブロックが、文字サイズ大に変更したとたんに左寄せブロックの下に落ちてしまいます。 右寄せブロックの中に長いテキストを改行なしで書いても右寄せブロックが左寄せブロックの下に落ちて表示されない様、どなたかご指南いただければ誠に幸いです。
- ベストアンサー
- ホームページ作成ソフト
- cssでフロートを使用した段組について。
記述にドリームウィーバーMX2004を使用し、ブラウザーにIE6を使用しています。 例えば、幅800pxのメインボックスを作って、その中に、幅400px、高さ200pxのレフトボックス（float:leftで左寄せ）と 幅300px、高さ200px(float:rightで右寄せ）のライトボックスを作りたいとします。 （左右ボックスの間に100pxの隙間を開ける） まず、こんな感じでhtmlを記述したと仮定してください。 <div class="mainbox"> <div class="leftbox">左側</div> </div> （とりあえず、左側のボックスを作る） で、cssをとりあえずここまで記述します。 .mainbox { width: 800px; background-color: #666666; } (分りやすくする為に背景色を付けておきます） .leftbox { width: 400px; height:200px; background-color: #666666; } （こちらも別の背景色を付けておきます） この時点ではfloatを指定していません。 で、この時点ですと、レフトボックスの高さに合わせてメインボックスの高さも200pxになりますよね？ ですが、leftboxにfloat:leftを指定すると、mainboxの高さがなくなってしまいます。 また、続けて予定通りにrightboxを右にフロートさせてもmainboxの高さは無視されてしまいます。 こういった場合はmainboxの高さを指定しないといけないのでしょうか？ mainboxに高さ200pxを指定すれば意図したとおりに表示されるのですが、この場合に中のどちらか（仮にleftbox）の高さが200pxを超えると、ドリームウィーバーの編集画面上はmainboxの高さは200pxのままで、IE6上ではleftboxに合わせてmainboxの高さも伸びた状態で表示されます。 こういった状態がcssの仕様なのか、ブラウザによるものなのかを知りたいと思っています。 トンチンカンなことを書いてるのかもしれませんが、教えて頂けると幸いです。
- ベストアンサー
- HTML
- フッターの回り込みを防ぐ方法を教えてください（ＣＳＳ）
ブラウザ：ＩＥ７ 左右の二段組みで、左に navi ボックス、右に content ボックスの場合 div#content {float: right; width: 100%; margin-left: -150px; margin-right: auto} div#navi {float: left; width: 150px} div#footer {clear: both} としたのですが、フッターが navi の下に回り込んでしまいます。 {clear: both} は navi の幅 150px の中だけで float が clear されているだけです。 フッターが回り込まないようにするには、どうしたら良いか分かりません。 よろしくお願いいたします。
- 締切済み
- HTML
- CSSで左側の余白
CSS本を見ながら苦闘しています。 下のようなCSSを書いたのですが、全体のレイアウトが左寄せから10pxほど余白が出て表示されてしまいます。 HTMLではそのような指定はしていません。 どうしてなのでしょうか。 また、どのようにしたら良いのでしょうか。 レイアウトは div#top div#top1 で２段上下にブロックしたあと、左右のブロックで分けています。 ※また、:と;の間にスペースを入れる、入れないは本によってマチマチなのですが、どのような書き方が正しいのでしょうか。 <style type="text/css"> <!-- body { font-size:10pt ; line-height:20px ; background-color:white; color : black ; } td { font-size:10pt; line-height:16px ;} div#top { position: absolute; top:0px; } div#top1 { position:absolute; top:95px ; } div#menu { float:left; } div#content { float:left; border-left:1px solid #666666 padding-top:10px; padding-left:20px; width:580px; } // --> </style>
- ベストアンサー
- HTML
- Firefox Netscapeについて
こんにちは。HTMLとCSSでホームページを作成しています。 左側にメニュー、右側にメインの2段組のサイトを作っているのですが、 IEで、メニュー部分をwidth: 20%; float: left; にして、メインの部分をfloat: left; にしたのですが、FirefoxやNetscapeでは、このようにしても段組にならず、メニューの下にメインがきてしまいます。 IEと同じように2段組で表示させるにはどの様にしたら良いでしょうか？ 教えて下さい。 また、参考になるサイト、本などご存知でしたら教えていただけるとありがたいです。どうぞよろしくお願いします。
- 締切済み
- HTML
- CSSのfloatについて
ホームページを作成していて、CSSが効かなくて困っています。 ２カラムで左側にメニュー 右側にメインのコンテンツを作成しております。 メインのコンテンツは floatでrightに設定していて その中にさらに ２つの内容を入れようと （メインコンテンツ内に左側に画像で右側に画像の詳細をいれたい） floatタグでleftとrightに設定したのですが CSSが効かなくて 左側に画像が配置され その下に画像の詳細文が配置されてしまい 全部左側に配置されてしまいました。 色々と試したみたのですが やっぱりCSSが効きませんでした。 すいません誰かお分かりになられましたら 教えてください。宜しくお願い致します。
- 締切済み
- その他([技術者向] コンピューター)
- CSSでボックスを中央に表示させたい
CSSでボックスを中央に表示させたいのですが、 {float:left; width: 800px; heght: 100px; height: 100px; margin: auto; text-align:left;} こんな感じでできるかと思ったのですができません。 既存の質問にもあったように margin: auto; text-align:left; と入れたのですが、左寄せのままでした。
- ベストアンサー
- CSS
- CSSを使って、商品データをボックス形式で羅列
CSSを使って、商品データをボックス形式で羅列していきたいのですが、 各ボックスは float: left; を使って並べています。 -------------- |タイトル | 内容～ 金額 | -------------- |タイトル | 内容～ 金額 | 内容～ | -------------- |タイトル | 内容～ | 内容～ 金額 | 内容～ | -------------- 内容と金額の位置を position: absolute; で指定していますが、 [内容]の量によってブロックの高さがばらばらなので、 ブロックごとの高さを固定にできません。 float:とposition: absolute; の組み合わせでは 高さを自動にすることはできないのでしょうか？ またこういった、ボックス形式の羅列には float以外の方法はあるのでしょうか？
- ベストアンサー
- CSS
- レスポンシブデザインのCSSについて質問です。
レスポンシブデザインのCSSについて質問です。PCで閲覧した時は、文章を左寄せ、画像を右寄せで表示させて、スマホで閲覧した時は、文章の下に画像を配置する方法を教えて下さい。 ちなみに私の場合はPC用サイトを以下のように作成していますが、スマホではどのようなCSSにすればいいのか、わからずに悩んでいる状況です。可能であれば、簡単なサンプル・ソースを教えていただけると嬉しいです。よろしくお願いします。 ■html <p><img src="gazo.png" class="photo">このページはサンプルです。</p> ■css .photo { float: right; width: 230px; position: relative; }
- 締切済み
- CSS
お礼
誠に有難うございます、なぞが出てきて困ってしまいます。トホホです・・・・