ベストアンサー

HTMLのfloatタグの使い方？

2013/02/26 09:20

http://but.mods.jp/mtos/ 上記のブログで本文を、左右に分けて表示しました。出来れば、左右の縦幅を揃えて、左右の間の空白も無くしたいです。つまり、長方形の真ん中に一本線が引かれて、左右に本文を書けるレイアウトです。上記のブログは、floatタグを使って、右（width４９％）、左（width５０％）で表現しています。 widthの値を５０％ずつにすると、スペースが足りない為なのか、左右に配置出来ず、上下に配置されます。何か良い方法は無いでしょうか？

prime2011
お礼率89% (425/473)

CSS
回答数4
ありがとう数4

みんなの回答 （4）
専門家の回答

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

ベストアンサー

noname#187595

2013/02/27 16:17 回答No.4

> 常に左ボックスの縦幅を長くするので、外枠は右ボックスの縦幅にしたいのですが、当ブログでは右ボックスの縦幅に成っています。 > mainboxで、左右両方のボックスを囲んでいるので、自動的に左右ボックスの縦幅の長い方が外枠になると期待しました。 > どこが間違っているのでしょうか？ mainboxにclearfixがかかっていない所為ですね。…(A) floatした要素の高さは親要素の高さに反映されません。そのため左ボックスの高さが、mainbox反映されていないのです。【参考】　http://blog.d-spica.com/entry/070307clearfix.html こうした問題を解消するために、clearfixという手法を使います。現在は <div class="cr">に{clear:both;}をして、見た目上だけfloatを解除していらっしゃいますが、これはよいことではありません。 > .mainbox{ display: inline-table; } > の記述は、ＰＣ画面が大きい時に、２つ以上の左右ボックスを続けて配置する為で宜しいですか？いいえ、上記で説明したclearfixの記述方法の１つです。 clearfixにはいろんな方法があるので、検索してみるといいですよ。 ------------- .mainbox:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .mainbox{ display: inline-table; } /* Hides from IE-mac \*/ * html .mainbox { height: 1%; } .mainbox { display: block; } /* End hide from IE-mac */ ------------ ↑上記の部分は「mainboxの内包する要素のフロートを解除する」というclearfix記述の一例です。それから、おそらくIEでご覧になっているのでしょうが、他のブラウザやモニタサイズが違う場合の表示も確認しましたか？最近はIEばなれが加速していますからきちんと確認したほうがよいですよ。私もすべてのバージョンで確認したわけではありませんが、添付の画像のように、firefoxの場合はIEとほぼ同じに見えています。しかしChromeの場合は文字の量によってボックス幅がばらついています。…(B) IE、firefoxともに、幅の狭いモニタだと、改行されて右ボックスが高くなる場合がありますので工夫が必要でしょう。…(C) 対策としては、 (A).親ボックスにきちんとclearfixを指定する。 (B).親ボックスに幅を指定する。（●px、または100％など） (C).1行あたりの文字量を一定にする。もしくは、中央のボーダーを背景画像で処理する（左右のボックスにはボーダーを指定しない）。以下に中央のボーダーを背景画像で処理する場合のcssを書いておきます。背景画像を1px四方のグレーの画像（仮にborder.gifとします）とした場合です。 .mainbox{ width: 100%;/* …(B) */ border: 1px solid #999999; background-image: url(border.gif);/* …(C) */ background-repeat: repeat-y; background-position: center top; } /* ※以下…(A) */ .mainbox:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .mainbox{ display: inline-table; } /* Hides from IE-mac \*/ * html .mainbox { height: 1%; } .mainbox { display: block; } /* End hide from IE-mac */ /* ※…(A)ここまで */ .box-a{ float: left; width: 50%; } .box-b{ margin-left:50%; } .mainbox ol { list-style-position: inside; padding: 10px; margin: 0px; } HTMLは前回と同じです。蛇足ですが、3の回答者の方がおっしゃっているように、ナンバーをいちいち打つのではなく、<ol>リストにして自動でナンバーがつくようにしたほうがよいですよ。右側のリストを続きの数字で始めたいなら、<ol start="●(半角数字）">とすれば指定した番号から始まります。

質問者

お礼 2013/03/02 07:21

丁寧に教えて頂いて、有難うございました。問題が明解に、解決いたしました。本当に有難うございます。

その他の回答 (3)

ORUKA1951
ベストアンサー率45% (5062/11036)

2013/02/26 17:57 回答No.3

いわゆる段組です。　残念ながら、CSS2以前には段組をする方法はありませんでした。CSS3以降は、culumnsプロパティが導入されているので最も楽でしょうが、後方互換を考慮すると二つのブロックに分けるか、tableで配置することになるでしょう。随分煩雑で意味不明の構造になっています。明らかに序列リストですから、olでマークアップすべきです。start属性が必要なのでDOCTYPEはtransitinalになります。 (HTML5ではstart属性が使えます。) ブラウザ間の差をなくすためにDOCTYPEは次のように書かなければなりません。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 　⇒doctypeスイッチ - Google 検索( http://www.google.co.jp/#hl=ja&gs_rn=4&gs_ri=psy-ab&cp=11&gs_id=i2&xhr=t&q=doctype%E3%82%B9%E3%82%A4%E3%83%83%E3%83%81&es_nrs=true&pf=p&sclient=psy-ab&oq=doctype%E3%82%B9%E3%82%A4%E3%83%83%E3%83%81&gs_l=&pbx=1&bav=on.2,or.r_gc.r_pw.r_qf.&bvm=bv.42965579,d.dGY&fp=9517d5dd6577cbb1&biw=1016&bih=602 ) 書き直すと <body> 　<header> 　　<h1>ページタイトル</h1> 　　<div class="iframe"> 　　　<iframe></iframe> 　　</div> 　</div> 　<div class="section> 　　<h2>本文タイトル</h2> 　　<div class="section"> 　　　<h3>他ブログ訪問</h3> 　　　<ol start="10"> 　　　　<li>あいうえお</li> 　　　　<li>かきくけこ</li> 　　　　<li>さいすせそ</li> 　　　　<li>たちつてと</li> 　　　　<li>なにぬねの</li> 　　　　<li>はひふへほ</li> 　　　　<li>まみむめも</li> 　　　　<li>やゆよ</li> 　　　　<li>らりるれろ</li> 　　　　<li>わゐうゑを</li> 　　　</ol> 　　　<ol start="21"> 　　　　<li>あいうえお</li> 　　　　<li>かきくけこ</li> 　　　　<li>さいすせそ</li> 　　　　<li>たちつてと</li> 　　　　<li>なにぬねの</li> 　　　　<li>はひふへほ</li> 　　　　<li>まみむめも</li> 　　　　<li>やゆよ</li> 　　　　<li>らりるれろ</li> 　　　　<li>わゐうゑを</li> 　　　</ol> 　　</div> 　　<div class="section"> 　　　<h3>他ブログ訪問</h3> 　　　<ol strat="5"> 　　　　<li>あいうえお</li> 　　　　<li>かきくけこ</li> 　　　　<li>さいすせそ</li> 　　　　<li>たちつてと</li> 　　　　<li>なにぬねの</li> 　　　　<li>はひふへほ</li> 　　　</ol> 　　　<ol start="11"> 　　　　<li>まみむめも</li> 　　　　<li>やゆよ</li> 　　　　<li>らりるれろ</li> 　　　　<li>わゐうゑを</li> 　　　　<li>ん</li> 　　　</ol> 　　</div> 　</div> 　<div class="footer"> 　　<h2>文書情報</h2> 　</div> </body> で良いでしょう。あとはスタイルシートをちょっと書けば期待通りになります。 ★かならず、最初のolのほうが項目数が多いこと html,body{margin:0;padding:0;width:100%;} div.section h2{display:none;} div.section div.section h3{margin:0;line-height:25px;font-size:18px;text-align:center;} div.section{width:100%;position:relative;} div.section div.section ol{ width:45%; padding: 0 0 0 5%; margin: 10px 0.5%; border-right:solid 1px gray; } div.section div.section ol+ol{ position:absolute;left:50%;top:26px;height:100%; } 後方互換を考えないならCSS3を使うと文書構造をくずさなくて済むので簡単です。

質問者

お礼 2013/02/27 01:16

回答有難うございます。回答２の方の方法で試してみたいと思います。お手数をかけて、回答してくださいまして有難うございました。

noname#187595

2013/02/26 11:01 回答No.2

はじめまして tableではなくcssでとお考えなんですよね。まず、両方のボックスをwidth:50%にすると段落ちしてしまう件ですが。これはブラウザによってborderの太さをwidthに含めてしまうものがあるからです。【参考】http://css.uka-p.com/cause/browser_border.html つまり左右のボックスに1pxのボーダーを指定し、widthを50%にすると、 (50%+2px)×2＝100%+4px になってしまうのです。また、左右の高さを揃える件ですが、要素の高さをそろえなくても、見かけ上罫線の高さがそろえばいいのですよね？対策はいろいろありますが、私なら以下のようにします。【css】 .mainbox{ width: 800px; margin: 0 auto; border: 1px solid #999999;…(1) } .mainbox:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .mainbox{ display: inline-table; } /* Hides from IE-mac \*/ * html .mainbox { height: 1%; } .mainbox { display: block; } /* End hide from IE-mac */ .box-a{ float: left;…(2) width: 50%;…(3) border-right-width: 1px;…(4) border-right-style: solid; border-right-color: #999999; } .box-b{ margin-left:50%;…(5) } .mainbox ol { list-style-position: inside; padding: 10px;…(6) margin: 0px; } ----------------------------------- 【html】 <div class="mainbox"> <div class="box-a"> <ol> <li>aaaa</li> <li>aaaa</li> <li>aaaa</li> <li>aaaa</li> </ol> </div> <div class="box-b"> <ol start="5"> <li>aaaa</li> <li>aaaa</li> <li>aaaa</li> </ol> </div> </div> ----------------------------------- (1)左右のボックス、aとbを内包するmainboxに四方のボーダーを設定します。 (2)ボックスaにfloat: left;を指定。bにはfloatは指定しません。 (3)ボックスaだけにwidth: 50%;を指定。 (4)ボックスaに右のボーダーを指定。bの方が行数が多い場合は、bに左のボーダーを設定します。 (5)ボックスbにmargin-left:50%;（(3)でaに指定した幅）を指定。 (6)罫線内に余白がほしい場合は、ボックスa/bではなく、その内包要素にpaddingを指定します。ボックスa/bに指定するとwidthにプラスされてしまうからです。こうすれば、添付の図のようなレイアウトになり、段落ちの心配もありません。

質問者

お礼 2013/02/26 21:18

回答して頂きまして有難うございます。教えて頂いた通り、当ブログで表現しました。常に左ボックスの縦幅を長くするので、外枠は右ボックスの縦幅にしたいのですが、当ブログでは右ボックスの縦幅に成っています。 mainboxで、左右両方のボックスを囲んでいるので、自動的に左右ボックスの縦幅の長い方が外枠になると期待しました。どこが間違っているのでしょうか？ .mainbox{ display: inline-table; } の記述は、ＰＣ画面が大きい時に、２つ以上の左右ボックスを続けて配置する為で宜しいですか？再度のご教授を頂けますと嬉しく思います。よろしくお願いします。