- ベストアンサー
floatによる段組とは？カラム落ちを防ぐ方法はある？
ORUKA1951の回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞width:100%が流動的で自然なのは分かります。 基本的には、ウィンドウ横幅いっぱいに表示する(リキッドスタイル)のが無駄がなくて良いですが、必ずしもそうではありません。現在はユーザー側のディスプレイ巾も320px(i-Phone--980pxまでは縮小)から、1280pxとか1600pxなんてのもあります。一般的なサイズは1024pxかな・・・という状況ですから、最小で600px～最大900px位に収めたほうが良いでしょうね。 あと記事が多い場合、一行が４０文字～６０文字ぐらいが読みやすいでしょう。 ＞divをfloatで並べることを段組というみたいですね。 厳密にはそうではありません。段組とは流し込みを伴う記事の記入方法で、columnsプロパティ(CSS3)で設定されます。昔はtableで、最近になってスタイルシートでブロックを分けて配置する擬似的な段組が行われています。 floatで並べることが多く行われていますが、記事の順番が制約されること、レイアウトが崩れることがあること、floatを解除するための小細工が必要なため、私は原則使かわず、絶対配置(absolute)を使います。 [参考] 段組 - Wikipedia ( http://ja.wikipedia.org/wiki/%E6%AE%B5%E7%B5%84 ) また、レイアウトのためにHTMLをマークアップするのは本来の姿ではありません。(その必要は無いはず) 例示されましたような、最も基本的なHTMLは、 header ヘッダ section 本文(章) section 本文(項) figure 挿絵 aside 脚注 contentTable 目次 footer フッタ のような構造になっていると思います。div要素は、このように文書構造を示すために使います。 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［7.5.4要素のグループ化: DIV要素とSPAN要素 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )］より この場合、floatを使うと、目次(content table)や脚注(aside)を本文より前に置く必要がでてきます。これは多くの場合、読み上げソフトやスタイルシートを読まない(検索エンジンを含む)ユーザーエージェントに対して、本文より先に悠長な目次などを読ませることになります。 以上のようなHTMLの場合、目次を絶対配置にすることで、文書構造を狂わしたり、段落ちという問題も起こりません。(floatの場合も目次のみfloatさせ、本文をfloatさせなければ段落ちはおきません) 以前、No.3 ( http://okwave.jp/qa/q7069085.html#a3 )で示したHTMLに少し手を加えたものですが、下記のようなシンプルなHTML/CSSだけで、ウィンドウ巾600px以上(i-phoneでは600pxを縮小して表示される)から、幅広のウィンドウでも段落ちはしません。そして、他の検索エンジンを含むユーザーエージェントでもまったく問題にならないでしょう。
関連するQ&A
- 段組で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が正しいという方もいらっしゃいます 通常段組を組む際はどちらが規格に沿っているのか教えていただけないでしょうか？ よろしくお願いします。
- ベストアンサー
- CSS
- CSS：floatを使っての段組で困っています
図のような段組をしたいのですが、ソースはあっているでしょうか？ サイトを作成しているとズレたりするので、根本的な段組が間違っているのか見て頂けると助かります。 ■HTML <body> <div id="container"> <div id="box-2">box-2</div> <div id="box-3">box-3</div> <div id="box-4">box-4</div> <div id="box-5">box-5</div> <div id="box-6">box-6</div> <div id="box-7">box-7</div> <div id="box-8">box-8</div> </div> </body> ■CSS body { margin: 0 auto 0 auto; padding: 0px; height:100%; } #container { width: 800px; } #box-2 { float: left; width: 800px; height: 30px; } #box-3 { float: left; width: 400px; height: 300px; } #box-4 { float: left; width: 400px; height: 300px; } #box-567 { clear:left; float: left; width: 800px; } #box-5 { float: left; width: 300px; height: 200px; } #box-6 { float: left; width: 300px; height: 200px; } #box-7 { float: left; width: 200px; height: 200px; } #box-8 { clear:left; width: 800px; }
- ベストアンサー
- HTML
- 左右段組で、左側を数値固定、段組間に20pxの空き。このCSS記述について
こんにちは。 左右段組をCSSの「float」でやろうとしています。 左をdivでくくりclassを「column01」 右をdivでくくりclassを「column02」とし 左側は横幅180px固定です。 両者の間に20pxの空きを入れたいと思います。 以下のようにCSS指定をしました。 .column01 {width : 180px; float : left;} .column02 {margin-left : 200px;} 質問(1) この記述は正解でしょうか？ いろいろなサイトで調べても column02を指定なしにする解説がほとんどで 正しいのかどうかがよく分かりません 質問(2) 上の記述で、多くのブラウザでは 希望通り表示してくれますが 「Netscape4.73」ではcolumn01と02の間が 200pxどかんと開いてしまいます。 これは「Netscape4.73」のバグなのでしょうか？ それとも(1)の記述自体が間違っているのでしょうか？
- ベストアンサー
- HTML
- 3カラムのサイトでfloatができない
３カラムのホームページを作っているのですが、 中央と右のカラムがどうしてもfloatできません。。 左カラムをfloat:leftにして、中央と右のカラムを#contentsBoxで囲ってfloat:rightさせています 【ＨＴＭＬ】 <div id="wrapper_2"><!--div id wrapper_2 START--> <div id="contentsBox"><!--div id contentsBox START--> <div id="560"><!--div id 560 START--> 中央カラム </div><!--div id 560 END--> <div id="175"><!--div id 175 START--> 右カラム </div><!--div id 175 END--> </div><!--div id contentsBox END--> <div id="205"><!--div id 205 START--> 左カラム </div><!--div id 205 END--> </div><!--div id Wrapper_2 END--> 【ＣＳＳ】 /*+++wrapper_2++++++++++++++++++++++++++*/ #wrapper_2 { width: 984px; background-color:#fff; padding: 8px; margin: 10px auto 10px auto; overflow: hidden; } /*+++contentsBox++++++++++++++++++++++++++*/ #contentsBox { width: 757px; float: right; } #contentsBox:after { height: 0; visibility: hidden; content: "."; display: block; clear: both; } /*+++左カラム+++++++++++++++++++++++++++++*/ #205{ width: 205px; margin: 0 22px 0 0; float: left; } /*+++中カラム+++++++++++++++++++++++++++++*/ #560{ width: 560px; float: left; } /*+++右カラム+++++++++++++++++++++++++++++*/ #175{ width: 175px; float: right; margin-left: 22px; } まだ勉強中なので、初歩的なミスなのかもしれませんが、 どうしても中央カラムの下に右カラムがきてしまいます。 （ドリームウィーバーで見たら、望み通りの配置になっているのですが、ブラウザでチェックすると、中央カラムの下に右カラムがきてしまいます） アドバイスいただければ嬉しいです。 よろしくお願い致します。
- ベストアンサー
- CSS
- スタイルシートでの段組指定について
こんにちは。HTMLやCSSを初めて書いています。 スタイルシートの「float」指定を使って 左右の段組（合計で左右幅100％）をしたいと思います。 コードは以下のように書きました（背景色は適当）。 ---------------------------------------------- .column { float : left ;} #menu { width : 20% ; background-color : red ;} #main { width : 80% ; background-color : blue ;} ---------------------------------------------- タグ指定は <div class="column" id="menu"> 等です。 これを主なブラウザ（IE6.0／ネスケ7.1／Opera7）で 表示させると「20＋80＝100％」になるのですが、 ネスケ4.73は「20＋80*80＝84％」なのか、右に空白ができます。 では、と、#main の80％指定を削ったところ、今度は ネスケ7.1 や Opera7 で float が利いてくれません。 質問１）float については各ソフト、こういう解釈なのでしょうか？ それとも私の記述が間違っているのでしょうか？ 質問２）そういうものである場合、ネスケ4.73に対する ごまかしテクニックはあるのでしょうか？（テーブルの使用を除く） bodyの背景色を右段と同じにする方法はイマイチです。 よろしくお願いいたします。
- ベストアンサー
- CSS
- スタイルシートで上手く段組が出来ません。
スタイルシートで段組をして、いわゆる擬似フレームのHPを作りたいのですが、いまいち上手く出来ません。 下の画像の赤紫部分(HTML内ではtopsとしている部分)も分割して、全部で5つのフレームに分けたいのですが、そこを分割しようと <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> <!-- body { margin:0px; padding:0px; } #top { width:450px; height:200px; float:left; background-color:#cc6600; } #tops { width:300px; height:200px; float:left; background-color:#cc5555; } #left { width:250px; height:600px; clear: both; background-color:#ff9933; } #right { width:500px; height:600px; float:left; background-color:#ffcc66; } #under { width:750px; height:10px; clear: both; background-color:#ff9955; } --> </style> </head> <body> <div id="top"></div> <div id="tops"></div> <div id="left"></div> <div id="right"></div> <div id="under"></div> </body> </html> というタグを打つと、topsの部分はちゃんと回り込んでくれるのですが、画像のように、回り込みを解除したleftの横のrightがちゃんとfloat:left;と打ち込んでいるのにも関わらず、leftの下にいってしまうのです。 どうしたらちゃんと5つに分割出来るのでしょうか？ よろしくお願いしますm(_ _)m
- ベストアンサー
- その他([技術者向] コンピューター)
- floatをfooterに指定すると正しく表示ができない。
floatをfooterに指定すると正しく表示ができない。 画像の(3)のようにfooterにfloat:leftを指定しなければ綺麗に表示されるのは分かります。ところが、画像の(1)や(2)のように、footerにfloat:left;を指定して、次の行で<div style="clear:left"></div>と指定して、footerにfloat:leftを指定しなかったのと同様の処理をすると、(1)や(2)のようにwidthに対して様々な現象が起きてしまいます。 (1)はwidthを指定しない場合、width:auto;を指定した場合に見られ、(2)はwidth:100%;とした場合にwrapperよりはみ出すという現象が起きます。なぜ、floatを指定しないのと指定後解除するのとで同様の結果が得られずに違った結果になるのでしょうか？わかる方いらっしゃいましたら回答宜しくお願い致します。 以下はソースでそのままエディタに貼り付けると表示できます。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>サンプル</title> <style type="text/css"> <!-- /* default.css */ #container { background:red; border:10px solid fuchsia; padding:10px; } #left { float: left; width: 200px; height:100px; background:yellow; } #right { float: left; border:5px #000 solid; width: 200px; height:200px; background:black; color:#FFF; } #footer { float: left; height:200px; background:blue; border:5px #000 solid; color:#FFF; } --> </style> </head> <body> <div id="wrapper">WRAPPER <div id="header">HEADER</div> <div id="container">CONTAINER <div id="left">LEFT </div> <div id="right">RIGHT </div> <br style="clear:left"/> </div> <div id="footer">FOOTER </div> <div style="clear:left"></div> </div> </body> </html>
- ベストアンサー
- HTML
- 【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 の clear
CSS によるレイアウトを試しています。 float を中断したいときにはその次の要素で clear=left|right する、というのは理解したのですが、この clear, 要素のネストを無視するのでしょうか。 たとえば次のソース <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>File Browser</title> <style type="text/css"> <!-- #leftside { background-color: #66FF00; float: left; width: 120px; height: 120px; } #rightside { background-color: #33CC99; margin-left: 120px; } #navlink .boxrow { float: left; height: 30px; width: 120px; background-color: #CC9999; margin: 5px; } #content { background-color: #CCFF99; height: 300px; clear: left; } --> </style> </head> <body> <div id="leftside"> </div> <div id="rightside"> <div id="navlink"> <div class="boxrow"></div> <div class="boxrow"></div> <div class="boxrow"></div> </div> <div id="content"> </div> </div> </body> </html> （rightside の要素の中なので）content の clear により navlink の直下に配置されて欲しいのですが、leftside の float まで clear してしまっているようです。 親の要素の中だけで clear することはできないのでしょうか？
- ベストアンサー
- HTML
- XHTML1.1でposition:relative指定したdivの挙動
XHTML1.1で、widthとheightをpx指定したdiv（divA）の中に、position:relative;を指定したdiv（divB）を配置した場合、 divAよりdivBの幅が広くなると、divBの内容がdivAの外側にはみ出して表示されてしまいますよね。 これを回避する方法はないのでしょうか。 以下簡単ですがサンプルです。 ----- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css"> #divA { width: 200px; height: 200px; border: 1px solid #000; overflow: scroll; } .divB { position:relative; } </style> </head> <body> <div id="divA"> <div class="divB"> ************************************************************************************************************<br /> </div> </div> </body> </html>
- ベストアンサー
- CSS
お礼
いつもご丁寧に有り難うございます。 floatで並べるのが小細工なのですか。 いや、これは目が点になりましたよ。 確かにabsoluteで並べるのは固定化して良いのか という私の疑問そのものです。 でも、そちらが主流なんですね。 どちらかというと最大幅を意識されていますよね。