締切済み

CSSで「float: left;」の次にフッタをうまく表示させるには？

2009/11/21 21:28

http://okwave.jp/qa5450892.html にて、CSSの段組に関する疑問が無事に解決されました。が、実はもう一つ、新たに表示に際して困ったことが起きています。現在のデザインは、<div id="menu">の右側に<div id="contents">を表示させるようになっておりまして、メニューブロック及びコンテンツブロックは、コンテンツブロックの表示法をもう少し改良するくらいで大丈夫な段階まできました。さて。このページに、新たにフッタを追加したいと考え、<div id="contents">の下に、幅100%のフッタを、<div id="head">のような感じでつけてみたいと考えているのですが、実際にそのようにしてみようとしたところ、 <div id="contents">のさらに右側にfooterが表示されるようになります。この状態を、コンテンツブロックそのものに<br>が入るような感じでフッタを表示させようとする場合、スタイルシートでは、どのように記せばいいのでしょうか。もちろん、フッタを排除してヘッダ部分にいろいろと書いておくのが簡単な方法ではあるのですが。ご指導、よろしくお願いします。

中野和明（@alexseed）
お礼率44% (24/54)

HTML
回答数4
ありがとう数2

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

みんなの回答

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

2009/11/23 19:41 回答No.4

画像、拝見しました。 HTML本体のほうから、まだ草案の段階ですが、将来勧告に移行すると思われるHTML5の考え方--HTML4.01で足りなかった部分--を考慮して将来要素名の変更も考えると <body> 　<div class="header"> 　　<h1>見出し</h1> 　　<div class="article"> 　　</div> 　</div> 　<div class="section"> 　　<div class="menue"> 　　</div> 　　<div class="body"> 　　　 　　　<img src="" class="figure" /> 　　　<hr /> 　　</div> 　　<div class="footer"> 　　</div> </div> 　このようなごくシンプルで、スタイルシートなしでも--古い携帯とか--でも情報が得やすく、SE(サーチエンジン)も適切な情報が得られやすいものにしておきます。ここで、menueをfloatにした場合、<div class="body">の最後に<hr />を入れておかないと、もしmenueのほうが長い場合、<div class="body">が早い段階で終了してしまうため、背景色を指定していた場合図のようになってしまいます。

naokita
ベストアンサー率57% (1008/1745)

2009/11/23 02:08 回答No.3

画像は後からアップしたのでしょうか？それだけなら、あまり難しくするよりも単純に #footer{ clear:both;} として表示確認してください。幅などの隙間問題があるのなら、clearfixで対応すれば良い。 NO.2さんの　hrを入れて　hr{clear:both; visibility:hidden;} で良いのですが・・・ -------------------------- 幅を％でこだわる方もいますが、最近は固定幅でも良い流れです。それよりも、http://okwave.jp/qa5450892.html にてW3Cに準拠と書いていますが、該当ページは、それどころではありませんね・・・　それらも見直しを。

質問者

補足 2009/11/30 16:08

画像は後からアップしました。今のところ、#footer{ clear:both;}と入れておいて…ってことでいいような感じですね。で、該当ページがＷ３Ｃ基準になってない…？ Another HTML Lintでチェックして、とりあえず１００点取れればいいかという感じでやってましたので、それじゃ足りないみたいですね…う～ん…

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

2009/11/22 09:19 回答No.2

>現在のHTML記述をあえて崩さずに行える方法が何かあれば　それは難題ですね。　というのは、私の記述したHTMLは、文書構造(システマチック的(物理構造的)にもセマカテック的(意味的)にもごく一般的なもので、(初心者が陥りやすい)デザインのために構造化したものではないようにしてあるからです。例示したHTMLを読み直してください。きわめて簡単なものです。　今のページが、何ページであろうと、必ず破綻して将来的にはもっと肥大したページをすべて書き換えることになります。・・私はそれを何度もさせられた・・・　とは言っても、きちんと書かれたHTMLなら、ファイルから置換機能を持つテキストエディタの置換処理でソースを開かなくても大部分は修正できる。 ★下記のソース中タブは全角スペースに置き換えてあります。＞コンテンツブロックそのものに<br>が入るような感じでフッタを表示させようとする場合、はすでに示しましたが、 hr{ 　　clear:both; 　　visibility:hidden; } で対応できるはず。 Body要素直下のhrのみclearを適応するなら body>hr{ 　　clear:both; 　　visibility:hidden; } とするか body hr{ 　　clear:both; 　　visibility:hidden; } body * hr{ 　　clear:none; 　　visibility:visible; } とすればよいです。　とにかく、基本的な継承度や子孫セレクタ、隣接セレクタなどのセレクタをきちんと理解してシンプルで、デザインの大幅な改定にも対処できるHTMLを作ってください。　デザインのためにHTMLを書くのではなく、文書構造、文書の意味構造にあったHTMLを書き、必要なら最低限のDIVやclass,idを加える。例】 <div id="content"> 　　<div id="menue"> 　　　<h2>目次</h2> なら、 div#content div#menue h2{display:none;} で、div.menue内の<h2>だけ非表示になるけど、他のh2は影響を受けない。　floatを特定のhrのみ有効にして、あるけど見えないようにするには適切なセレクタhr{ 　　clear:both; 　　visibility:hidden; } 【参考サイト】画像にfloatを指定すると別ボックスと重複してしまいます - 教えて！goo 　 http://oshiete1.goo.ne.jp/qa5365813.html

質問者

お礼 2009/11/22 12:11

まだHTMLの読解中ではありますが… 一応<div>にてブロック分けするイメージについて、簡単な図を作成してアップしてみましたが、こんな感じになるでしょうか。もう一つ大きなブロックで複数のブロックを囲んだほうがいいのだろうかとも思いますが、ともあれ、まずはブロック分けから今一度考え直して、それから…といった感じです。

質問者

補足 2009/11/22 10:22

分からない言葉がいろいろと出てきておりますので、今、必死になって回答の意味が分かるように調べ回っています＾＾；ページレイアウト…要するに見栄えそのものについては、HTMLを追加して、CSSをいじくった状態で… しかし、回答をいただいているような指摘を受けているということは、個人的に気に入らない。なので、全ページ改訂ということで確定ですね。スタイルシートも、それに伴い改変。フッタのスタイルシートに、float位置を初期化する命令を組み込んでおけば大丈夫だったということで、hrをあえて使う必要はなさそう…だけれど、説明を見ると、使ったほうが良さそうな印象も…。可能な限り、現レイアウトを崩さず、その上でHTMLとスタイルシートを変更する…となると、かなりの作業になるでしょうけれど、基本さえ確定しておけば、そう難しい作業ではなさそうです。問題は、具体的に、現存のものをどのように変更するかですが…。スペルミスはともかくとして、ブロックの中にブロックを入れて云々…ということになりそうですね。ちとイメージ図を作って、画像をこちらに後ほどアップしてみます。

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

2009/11/21 23:37 回答No.1

そもそも最初の解決方法というものはおかしい。ためしに、ウィンドウの幅を半分くらいにしてみると良くわかる。訪問者がどの幅のウィンドウで見ているかわからないので、幅は基本的には%で指定すべき。 IEは、親ブロックの幅を間違えるので HTML自体は、次のような形 <div id="BodyText"> <div id="content"> 　　 　　<div id="menue"> 　　　<h2>目次</h2> 　　　<ol> 　　　　<li></li> 　　　</ol> 　　</div> </div> <hr /> <div id="documentInfo"> </div> CSS body div#content{ 　　position:relative; 　　margin:0.5em 20%; } body div#content div#menue{ 　　position: absolute; 　　top: 0px; 　　left: -36%; 　　width: 30%; 　　font-size: 0.8em; } body div#content div#menue h2{ 　　display:none; } とすれば、本来用途が違う、扱いにくいfloatを使わなくてすむ。 floatは画像などの周囲に文章を回りこませるためです。　floatを使うなら、 CSSで、 hr{ 　　clear:both; 　　visibility:hidden; }

質問者

お礼 2009/11/22 09:17

記載していただいたHTMLをCSSを、内部CSSとしてサンプルを作ってみました。かなり大ざっぱに作っただけですが… このサンプルでは、IEとFirefoxでは全く違う表示となるため、残念ながら使うことができません。現状のままのほうがまだましだということになります。となると、floatの回り込みを解除する命令を使用したほうがいい、ということになりますので、こちらを採用することになりますが… <hr>を使用する必要はありますか？　平行線はあまり使わない方がいいなんて話を聞いたような気がしましたが…。

質問者

補足 2009/11/22 00:18

width幅の指定は、こちらも一応％で指定しています。menu枠はpxですけれど。このあたりも修正しなければならないでしょうね。今使用しているHTMLの記述と、お答えいただいたHTML表記とは、ちと差異がありますので、HTMLとCSSを、意味を調べながらチェックしてみますが… この文例から言うと、現在のHTMLを大幅に改訂しなければならないようですね。外部CSSの修正だけで大丈夫だろうかと思っていたのですが、floatを使用しないとなると、ご指摘の方法を採用する場合、HTMLの修正を行なわなければならない、しいては60ページ以上すべて記述を変更しなければならない、ということになりそうです。変更するのは、時間をかければいいだけですが、現在のHTML記述をあえて崩さずに行える方法が何かあればいいのですが…。