段組でfloat:leftとfloat:rightの違い

前へ 次へ
このQ&Aのポイント
  • スタイルシートで段組を行う際のfloat:leftとfloat:rightの違いについて説明します。
  • 通常2カラムの場合、float:leftとfloat:rightの指定をすると、段組の間のスペースの広さや表示位置が微妙に変化します。
  • また、firefoxでfloat:leftとfloat:rightを使うと、右側の段組が下に落ちてしまうことがあります。正しい指定方法はどちらなのか、判断がつかず悩んでいるとのことです。
回答を見る
  • ベストアンサー

段組でfloat:leftとfloat:rightの違い

こんにちは！ 今スタイルシートで段組をやっているんですが 2カラムの右側がfloat:leftとfloat:rightでは微妙に表示が変わります 段組の間のスペースが広くなったり狭くなったりです firefoxで表示するのに左をfloat:left、右をfloat:rightにすると 右側の段組が実現されず下に落ちてしまいます。 通常2カラムの場合の段組はどのように指定するのが正しいのでしょうか？ 過去の質問や、googleで検索しましたがどちらも場合も正しいとか誤ってるという意見が半々で どうにも判断がつかず悩んでいます。 3カラムでもfloat:left float:left float:left　とやっているのもあるので こちらが正しいのかな？とも思いましたが やはりそれは違って float:left float:right float:leftが正しいという方もいらっしゃいます 通常段組を組む際はどちらが規格に沿っているのか教えていただけないでしょうか？ よろしくお願いします。

noname#11353
noname#11353
  • CSS
  • 回答数1
  • ありがとう数1

質問者が選んだベストアンサー

  • ベストアンサー
  • steel_gray
  • ベストアンサー率66% (1052/1578)
回答No.1

HTMLとしてはどっちを先に書くかって議論（重要なコンテンツはより先に、補助的な情報などは後にまわすべき…とか）は成り立っても、スタイルシートでfloat:leftとfloat:rightでどちらが正しいとか規格に沿っているとかって事はないと思います。 （HTMLの書き方が決まればfloat:left/rightが自然と決まってくる事はあるかもしれませんが） float:left/rightで結果が違ってくる事は充分ありえます。marginやpaddingの設定、ブラウザの解釈の微妙な差異などの理由があります。 あまり意味はありませんが何の条件付けもなく、ただ２段組と聞けば２段ともfloat:leftでいいと思います。

noname#11353
質問者

お礼

回答ありがとうございます！ 大変よく分かりました！ この回答をみて実際やってみたらなるほどでした^^

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. CSS

関連するQ&A

  • float:left; したものを右寄せ

    <div style="text-align:right;"> <ul> <li style="float:left;">リスト</li> <li style="float:left;">リスト</li> <li style="float:left;">リスト</li> </ul> </div> リスト要素を横に並べるようにfloat:left;をいれたものを、 画面右寄せにするにはどうすればいいでしょうか。 上のソースではtext-align:right;が効かず左よせになってしまいます。。 よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • float: left; が必要なわけ

    floatで段組を仕様としているのですが、あと一歩納得いかないところがあるので、教えてください。 <div>要素を二つ横に並べるのですが、 一つ目の<div>要素に"float: left;"を指定するのは納得がいくのですが、二つ目にもfloat: "left";を指定しなければならない理由が分かりません。 そのまま何も付けなくても回り込みがされるのではないのですか？ ＃今作っているページではfloat: right;を指定しています。 ↓のページ中段の例を見て不思議に思い、調べてみたのですが思い通りのページがなかったので質問しました。 http://www.motchie.com/article/multicolumn.html

    • 締切済み
    • CSS
  • IEだけfloatがずれてしまう

    いつもお世話になります。 floatの書き方（IEの注意点？）について教えて頂きたいことがあります。 divで囲んだ文字列の右にボタンを配置していく、というのをfloatにて以下のように定義しました。 Firefox、Chromeでは一列に綺麗に並ぶのが確認できたのですが、IE8、9では、「abc」が右下にずれて しまい、正常に表示されませんでした。 --------------------- <html> <head> </head> <body> <div style="width: 200px; float: left; border: 1px black solid;"> あかさなた<label style="float: right;">abc</label> </div> <input type="button" value="ボタン１" style="float: left;" /> <input type="button" value="ボタン２" style="float: left;" /> </body> </html> --------------------- なぜIEだけこのような挙動になるのでしょうか。 あるいは、この書き方に何か間違いがあるのでしょうか。 宜しくお願いします。

    • ベストアンサー
    • CSS
  • CSS段組み？で右カラムを右寄せにするには？

    説明が難しいのですが・・・ テーブルレイアウトでいえば、下記のHTMLで実現できるような表示方法を、 tableタグを使わずに実現したいです。 <table style="width: 100%;"><tr> 　<td>左パーツ</td> 　<td style="text-align: right;">右パーツ</td> </tr></table> divタグに float: left; を付けると、２つのdivブロックを横並びに配置できますが、 右側にあるdivにtext-align: right;を付けても、左寄せになってしまいます。 ※width未指定なので当たり前なのですが・・・ ただ、今回の場合は実際にマルチカラムを実現したいわけではなく、 上記コードでいうところの左パーツを画面の左端へ、 そして右パーツを画面の右端に表示させたいだけです。 左右それぞれの横幅は特定していません。 どなたか分かる方、教えて下さい。

    • ベストアンサー
    • CSS
  • 【CSS】float:left; を使用した２カラム、本文中でclearすると間が空いてしまう

    お世話になります。 左がメニュー（仮称・BOX-A、float:left指定）、右が（仮称・BOX-B）本文、下にフッター（clear: both）…といったページを作成しています。 問題は、本文・BOX-Bにおいて、縦長の画像を使用した場合、文章を画像の右に回りこませたい時があります。 　↓　↓　↓ <img src="xxx.jpg" style="float:left; width:100px"> 　　画像回り込み文章～～～文章 <br style="clear:left"> 通常の文章 ----------------------------------------------------------- しかし、これを行ってしまうと、BOX-Aのfloatも解除されてしまい、BOX-Aの内容（高さ）分、 BOX-Bの『通常の文章』が表示される位置に空間ができてしまうのです。 …以下のURLが、その状態の例です。 http://www.geocities.jp/multi_column/practice/sample/2column2_fixed_liquid_poor.html 上記サイト様の、 http://www.geocities.jp/multi_column/practice/2column2.html#liquid の、ページ半ば…よりやや下に、上記問題点を克服するという 『メインカラム幅可変、サイドバー幅固定 2カラム（ネガティブマージン型）』 の説明が載っているのですが、同じように組んでも上手く行きません…。 本文中（BOX-B）で、floatのclearを行っても支障がなくなるようなCSSの組み方はありませんでしょうか？ 何卒、宜しくお願い致します。

    • ベストアンサー
    • HTML
  • floatを使った時のブラウザでの違い

    ブログにてfloatを使い、下記のように表示させたいのですが、 IE7では思い通りに表示できるものの、Firefox2.0ではうまく表示できず困っています。 本来、 日付　　　　タイトル カテゴリ -------------------- 日付　　　　タイトル カテゴリ -------------------- このようにしたいのですが、Firefoxで確認すると、 日付　　　　タイトル カテゴリ -------------------- 日付　　　　タイトル カテゴリ -------------------- 日付　　　　タイトル カテゴリ -------------------- と、最新エントリーのタイトル（class="right"）と、 区切り線（class="end"）の間だけがかなり空いてしまいます。 これはブラウザのバグなのでしょうか。それともスタイルシートの記述が 間違っているのでしょうか。よろしくお願いします。 なお、タグとcssは以下のように書いています。 【タグ】 <div class="left"> 日付<br /> カテゴリー</div> <div class="right">タイトル</div> <div class="end"></div> 【css】 div.left {float: left;width: 100px;} div.right { } div.end {clear: both; border-bottom: 1px dotted #000000;}

    • ベストアンサー
    • HTML
  • スタイルシートを使って段組でのバディングは？

    書籍にのっていたスタイルシートでの段組を 次のように記述してみました。 <DIV style="float:left;border-right:3px dashed #000000;width:50%;padding-left:10px;"> ○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○ </DIV><DIV style="padding-left:10px">　 ○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○ </DIV> 中央に点線が入って文章が左右に分けられるのですが、 文字と中央線の余白がないので、paddingやmarginを使って みたのですが、特に右側文章の左にある点線と文字の空間がどうしてもできません。（左側部分のの左右余白は機能するのですが） tableを使ったときはpadding-leftで設定できたのですが、正しい方法がありましたらお教えください。 書籍にもここらへんの説明がないのです。

  • 入れ子にしたfloatのclear

    初めてこちらを利用させていただきます。 CSSで縦3段、例えば上から『HEADER』、『MAIN』、『FOOTER』などとの段組を作成し、中央の『MAIN』内に『MENU』と『CONTENTS』の左右2段の段組をfloat:leftを利用して作成し、テンプレートとして利用しようとしています。 このテンプレート部分は、『MENU』の幅のみ固定で、『CONTENTS』は可変幅のレイアウトとしております。ここまでは順調に作成できたのですが、肝心のコンテンツの作成でつまづきました。 『CONTENTS』内に、更にfloat:leftで左右にDIVを配置したブロックを複数作ろうとした場合、2つ目のブロックを配置した時、1つ目の右側DIVの高さが1つ目左側DIVよりも高さが低い場合、2つ目以降のブロックが1つ目左側のDIV右に回りこんで表示されてしまいます。これは1つ目のブロックを配置した後、float:leftをclearしていないから当然だと思います。 そこで、1つ目のブロックの後にclearを摘要（<br />などに）させると、テンプレートの、『FOOTER』直上に2つ目のブロックが配置されてしまいます。1つのclearで入れ子になったfloat:leftが全てclearされてしまう様です。 これが『仕様』と言われればそれまでですが、TABLEや、固定幅のfloat：right等を使用すれば回避できそうですが、TABLE脱却・リキッドレイアウトをここまで実現できたのに、肝心のところで妥協するのも悔しい気がします。 まさか、こんな単純な事で丸一日悩むとは思いませんでした。web上を検索して回ったのですが、良い解決策が見つからず、こちらにおすがりした次第です。文章ではうまく表現できずわかりにくいかもしれませんが、何か回避作があれば教えて下さい。

    • ベストアンサー
    • CSS
  • スタイルシート　float

    スタイルシートを使って左右分割のページを作ろうと思っています。 #left{ width:170px; float:left; } #right{ float:right; } としたところ、 ブラウザ（IEです）を余裕を持たせているときは正常表示されますが、 左画面　｜　右画面 ウインドウ幅を狭くすると、 右側にくる部分が、画面上に、 左側にくる部分が、画面下に、 右画面 -------- 左画面 上下に分割された画面となってしまいます。 これを、ウインドウ幅を狭くしても 左右分割に保つようにするにはどうしたら良いのでしょうか？

  • CSSのfloatについて

    ホームページを作成していて、CSSが効かなくて困っています。 ２カラムで左側にメニュー 右側にメインのコンテンツを作成しております。 メインのコンテンツは floatでrightに設定していて その中にさらに ２つの内容を入れようと （メインコンテンツ内に左側に画像で右側に画像の詳細をいれたい） floatタグでleftとrightに設定したのですが CSSが効かなくて 左側に画像が配置され その下に画像の詳細文が配置されてしまい 全部左側に配置されてしまいました。 色々と試したみたのですが やっぱりCSSが効きませんでした。 すいません誰かお分かりになられましたら 教えてください。宜しくお願い致します。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する