- ベストアンサー
floatを使うと隙間ができる
- floatを使用すると、左サイドバーとメインコンテンツの間に隙間ができます。この隙間を埋めるためには、コンテンツの幅を調整する必要があります。
- さらに問題なのは、Google Chromeで見ると、左サイドバーとメインコンテンツの高さが揃わず、左サイドバーが下にずれて上部との間に隙間ができます。marginを0に設定したり、heightを指定しても、隙間は消えません。
- この問題を解決するための改善方法はいくつかあります。例えば、flexboxを使用してコンテンツをレイアウトする方法や、グリッドシステムを導入する方法などがあります。具体的な実装方法については、詳細なコードやCSSの設定が必要ですが、これらの方法を試してみることをおすすめします。
- kurobon619
- お礼率76% (314/410)
- CSS
- 回答数5
- ありがとう数9
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
私が不可解に思うのはなぜ情報を全て出さないのか、です。 htmlに<div id="header">が無いのに急にcssでは出てくるし… さらに、下記のものをそのまんま組んでみましたか？ <div id="header"> </div> <div id="content"> <div id="main"> </div> <div id="left"> </div> </div> #header { position: relative; width: 100%; height: 160px; } #content { width: 950px; height: auto; margin-right: auto; margin-left: auto; padding-right: 6px; } #main { width: 700px; height: 1020px; float: right; } #left { text-align: center; width:230px; float: left; height: 1020px; margin-right: 0px; margin-bottom: 5px; margin-top: 0px; } 少ない情報で回答が必要なら、まず削った情報分だけでもご自身でブラウザで確認してください。 今回の件で言いますと、全く問題は起きていません。 全てのボックスにbackground-colorを指定して確認してみればどういう状態かわかるでしょう。 #headerと#left及び#mainは密着しています。 heightは隙間には関係ありません。 縦に意図しない隙間が空く、と言うのなら質問者様が情報を出していない部分に原因があります。 回答者もエスパーじゃないので、情報が無くては回答のしようがありません。 #mainと#leftの間に隙間が空く、という事については 950pxのボックスの中で230pxを左寄せ、700pxを右寄せにしているのですから、#leftと#mainの間に20pxの間隔が空くのは当然です。 #leftと#mainを密着させたいのなら、その20pxは一体どこへやりたいのでしょう？ 本当に解決させたいのなら、情報を全て出した上で何が意図しない挙動なのか、意図しない隙間は何ピクセルなのか、目的としてはどうしたいのか、こういう事を全て書く事をお勧めします。 スクリーンショットを添付するとよりわかりやすくなります。
その他の回答 (4)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
せっかくHTML5も書いたので追加して置きます。 質問タイトルは{floatを使うと・・・}になっていますが、このような段組に はfloatを使わないほうが良いです。 ・主要でない要素を先に書く必要がある。 ・段内でfloatが使えない ・marginなどの指定が厄介 先のサンプルをHTML5にしてみました。 『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造 を付加するため( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』に使用してありますから、そのままHTML5に直せたのです。leftのような文書 構造に関係ないclass名は使わない。左じゃなく右や下に配置しようとしたとき 混乱する。 ★HTML5の新しい要素( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements ) ★改善点 スマホ縦置きのような狭い画面460px以下では、デザインが変わります。ウィ ンド幅を縮めてみてください。 ★HTMLもスタイルシートも、とっても簡単で分かりやすいと思います。数年後に 手を入れたくなっても楽でしょう。 <!doctype html> <html> <head> ＿<meta charset="utf-8"> ＿<title>サンプル</title> ＿<meta name="description" content=""> ＿<meta name="author" content="ORUKA"> <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]--> ＿<style type="text/css" media="screen"> <!-- html,body{margin:0;padding:0;} h1,h2,h3,h4,h5,h6,p{margin:0;line-height:1.6em;} p{text-indent:1em;} header,section,footer{width:90%;min-width:460px;max-width:880px;margin:0 auto;padding:0;} section{position:relative;min-height:460px;} section h2,section p{margin:0 150px 0 0;} section section{width:auto;min-width:0;min-height:0;margin:5px 150px 0 0;} section section p{margin:0;min-height:0;} section nav{position:absolute;width:150px;top:0;height:100%;right:0;} /* 色づけ */ body{background-color:gray;} header{background-color:aqua;} section{background-color:white;} section section{background-color:silver;} section nav{background-color:fuchsia;} footer{background-color:orange;} @media screen and (max-width:460px){ header,section,footer{min-width:200px;} section{position:relative;min-height:0;} section h2,section p{margin:0;} section section{margin:0;} section nav{position:static;width:100%;height:auto;right:auto;} } --> ＿</style> </head> <body> ＿<header> ＿＿<h1>タイトル</h1> ＿＿<p>このページでは・・・・</p> ＿</header> ＿<section> ＿＿<h2>見出し</h2> ＿＿<p>本文はsection</p> ＿＿<section> ＿＿＿<h3>項見出し</h3> ＿＿＿<p>本文項記事</p> ＿＿＿<p>sectionの階層でレベルが判断される</p> ＿＿＿<p>HTML4.01でclass名が文書構造を示す物にしてあるため、HTML5にする ときはそのまま<div class="header"></div>は<header>< /header>とすれば良いです。</p> ＿＿</section> ＿＿<nav id="contentTable"> ＿＿＿<h3>目次</h3> ＿＿</nav> ＿＿<section> ＿＿＿<h3>チェックすべきこと</h3> ＿＿＿<ol> ＿＿＿＿<li>DTDはstrictであるか</li> ＿＿＿＿<li>DOCTYPEは標準モードで動作するよう適切に書かれているか</li> ＿＿＿</ol> ＿＿＿<p> ＿＿＿＿基本的にこれだけを守っておけば、現行のブラウザでの差は出ないはず です。 ＿＿＿</p> ＿＿</section> ＿＿<nav id="contentTable"> ＿＿＿<h3>目次</h3> ＿＿</nav> ＿</section> ＿<footer> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistory"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2014-07-02</dd> ＿＿</dl> ＿</footer> </body> </html>
- ORUKA1951
- ベストアンサー率45% (5062/11036)
まず、 下記サンプルを確認してください。 ★Ctrl+＋やCtrl+－で文字サイズを拡大しても縮小しても、ウィンドウ幅をスマホ程度から、超幅広ディスプレイにしても、IE7以降ならどのブラウザでもきちんと配置されるはずです。Ie6では、ナビが一杯にならない。IE5ではセンターに寄らないくらいで使用に問題はありませんね。 ★印刷や携帯電話には素のブラウザのもつスタイルで印刷表示されます。 ★leftをrightに、marginの値を変更すれば左だろうが右だろうが自在に。もちろん下にしてもよい。 ★float使ってないので本文内でfloat,clearが使えます。 ★HTMLもスタイルシートも簡単でメンテナンスも簡単なはず。 見よう見まねではなく、ちゃんと基礎から身につけたほうが早いですよ。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css" media="screen"> <!-- html,body{margin:0;padding:0;} h1,h2,h3,h4,h5,h6{margin:0;line-height:1.6em;} p{text-indent:1em;} div.header,div.section,div.footer{width:90%;min-width:400px;max-width:880px;margin:0 auto;padding:10px;} div.section{position:relative;min-height:300px;} div.section h2,div.section p{margin:0 0 0 160px;} div.section div.section{width:auto;min-width:0;min-height:0;margin:5px 0 0 160px;} div.section div.section p{margin:0;min-height:0;} div.section div.nav{position:absolute;width:150px;top:0;height:100%;left:0;} /* 色づけ */ body{background-color:gray;} div.header{background-color:aqua;} div.section{background-color:white;} div.section div.section{background-color:silver;} div.section div.nav{background-color:fuchsia;} div.footer{background-color:orange;} --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<p>このページでは・・・・</p> ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> ＿＿<p>本文はsection</p> ＿＿<div class="section"> ＿＿＿<h3>項見出し</h3> ＿＿＿<p>本文項記事</p> ＿＿＿<p>sectionの階層でレベルが判断される</p> ＿＿</div> ＿＿<div class="nav" id="contentTable"> ＿＿＿<h3>目次</h3> ＿＿</div> ＿＿<div class="section"> ＿＿＿<h3>チェックすべきこと</h3> ＿＿＿<ol> ＿＿＿＿<li>DTDはstrictであるか</li> ＿＿＿＿<li>DOCTYPEは標準モードで動作するよう適切に書かれているか</li> ＿＿＿</ol> ＿＿＿<p> ＿＿＿＿基本的にこれだけを守っておけば、現行のブラウザでの差は出ないはずです。 ＿＿＿</p> ＿＿</div> ＿＿<div class="nav" id="contentTable"> ＿＿＿<h3>目次</h3> ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistory"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2014-07-02</dd> ＿＿</dl> ＿</div> </body> </html>
お礼
ORUKA1951さん これは参考になります。 ありがとうございます。
ＣＳＳをどのように書いているのかを表示しないと、回答ができないのでは？・・・
補足
nanden1548さん仰る通りです。 縦の隙間は解決しました。 #header { position: relative; width: 100%; height: 160px; } #content { width: 950px; height: auto; margin-right: auto; margin-left: auto; padding-right: 6px; } #main { width: 700px; height: 1020px; float: right; } #left { text-align: center; width:230px; float: left; height: 1020px; margin-right: 0px; margin-bottom: 5px; margin-top: 0px; } contentを height: auto; からheight: 1020px;にして、main left 上部は揃ったのですが、 leftが下がっている位置に合わせて並んだので、header との間に意図しない隙間ができています。 こちらのほうが不可解です。
- tkmojo
- ベストアンサー率50% (105/207)
横幅の指定をせずにブロックレベル要素にfloatを使うのは自殺行為ですよ。 中のテキストの量だけ横幅が増えるので絶対まともにレイアウト出来ません。 テキスト量が伸び、左右のボックスがぶつかるともれなくカラム落ちです。
補足
tkmojoさん、ありがとうございます。 すみません、説明不足で、横幅はmain leftともに指定しています。
お礼
tkmojoさん 仰る通りです。 情報を隠していたわけでなく、 構文は実際はもっと複雑で、焦点を絞って書いたつもりが、 不足もあって、かえって伝わらないものになってしまいました。 仰る通り、構文自体は問題はありませんでした。 全角で空白ができてるという初歩的なミスでした。 お手数かけて申し訳ありません。