- ベストアンサー
フッターのclear:bothが効かない！原因は何？
- コーダー初心者の方からの質問です。右コンテンツを二段組にした際に、フッターの位置がおかしくなりました。原因を教えてください。
- 質問者は右コンテンツを幅一列で組んでいたのですが、二段組のレイアウトを追加指定したところでフッターの位置がずれてしまいました。
- HTMLのコードを見ると、フッターの要素が右側のコンテンツの内部に配置されていることが分かります。この配置が原因でフッターが正しく表示されない可能性があります。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
たとえばちょっと複雑・・でも、よくありそうなHTML/CSSを考えて見ます。 右がHTMLを文書構造にしたがってマークアップしたもの。左がスクリーン用に見栄えを整えたもの。(印刷には適さないので、印刷用スタイルシートは別途用意するか、CSSのmediaをscreenに限定する。) HTMLは(画像もスタイルシートも読まない)テキストブラウザや読み上げブラウザ、そして検索エンジンを想定してきちんと文書構造にしたがってマークアップします。 そのうえでスタイルシートでは横幅の広い(広すぎる？)ディスプレイの特性を生かして、左のようにデザインしていく。 floatを本文内で使用するとき・・結構多いと思う・・ので、他では使わないほうが無難です。
その他の回答 (2)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
HTMLのマークアップでIDやCSS名に id="wrapper"，id="head"，id="left"，id="right， id="section01"，class="section01"なんて？？？不適切。先の回答でも書きましたが仕様書でも明確に 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから こういった使用法は避けるべきである。 文書作成者が定めたクラス名では、意味を理解してもらえない場合もある。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［セレクタ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/selector.html#class-html )］より 本題ですが、その文書の説明を聞く限りマークアップは <h1>見出し</h1> <div class="nav"></div> <p>・・・</p> <p>・・・</p> <div class="two_columns"> <div class="column c1"></div><!-- class名の先頭は数字はだめ --> <div class="column c2"></div> </div> <div class="footer"></div> だけでよさそう。CSSも div.nav{float:left;width:20%;min-height:400px;} div.two_columns{position:relative;} div.two_columns div.column{width:40%;} div.twocolumns div.c2{position:absolute;top:0;right:0;} div.footer{clear:left;} だけでよい。
お礼
ありがとうございます。 もう一度組みなおしてみます。 独学なのですが、参考にした本がまずかったでしょうか？ 基本はその本からなのですが、 どうしても、clear:bothの意味が飲み込みきれません。 （意味はわかるのですが）
- abacabu
- ベストアンサー率37% (250/663)
独学でＷＥＢサイトを作成している者です。 ＨＴＭＬ階層よりもむしろＣＳＳと合わせて公開して頂けるとありがたいですが、 １．(Ｘ)ＨＴＭＬはどのタイプをお使いですか？ ２．ＤＴＤ(DOCTYPE宣言)は、正しく、システム識別子まで書いていますか？ １，２について (例)ＨＴＭＬ４．０１ Strict： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">*1←この行が識別子 (例)XHTML1.0 Strict： <?xml version="1.0" encoding="UTF-8"?>*2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">*3 *1：ＨＴＭＬに於いてはシステム識別子は省力出来るが色々と不具合が有るので 正式の記述をして下さい。 *2：ＸＨＴＭＬに於いてＸＭＬ宣言を省ける条件は、ＸＭＬで基本文字コードである ＵＴＦ－８もしくはＵＴＦ－１６を用いた場合のみ省略可ですが、 使用する事推奨されています。 *3：ＸＨＴＭＬに於いてはシステム識別子を省略できませんのでしっかり記述して 下さい。 ３．ＸＨＴＭＬに於いては<html>にｘｍｌ名前空間を宣言する。(Ｘ)ＨＴＭＬでは 言語宣言をする。 <html lang="ja">*4 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">*5 *4：ＨＴＭＬに於いてはこれです(日本語使用宣言) *5：ＸＨＴＭＬでは、xmlns(xml name space：xml名前空間)とxml:langとlangを 併用する事を推奨されています。 ４．ＣＳＳを使う場合は<head></head>内部の<title>の前で <meta http-equiv="Content-type" content="UTF-8">*6 <meta http-equiv="Content-Style-Type" content="text/css">*7 *6：HTML、XHTMLどちらでも必要な文字コード宣言です。 （特にＣＳＳとは無関係ですがＸＨＴＭＬに於いてはＸＭＬ宣言と合わせて必要です） *7：これを宣言しないとＣＳＳ反映されませんので。 <link rel="StyleSheet" type="text/css" href="./***.css" media="all">*8 *8：これは外部スタイルシートを外部参照してHTMLに反映させるものです。 (ＸＨＴＭＬに於いては<head></head>内部での記述、タグへの直接のstyle=""記述は 非推奨ですので、外部参照しましょう) 基本事項はここまでです。まぁ普通に記述してある物として… <div id="footer">でしっかりfloat解除してますか？ 現在何をどうfloatしていて解除には何を使っているかが分かりません。 解除には float: none;（このボックスをフロートしない） clear: left or right or both;(leftのみ指定の場合はleft、rightのみ指定の場合はright 全解除(左右解除)はboth)ちなみにclear: none;は解除しないという命令 ちゃんとfooter要素にwidth: **;指定してますか？ width指定というのはしていないとfloat、clearの設定が出来ません。 恐らく解除も！？ どうでしょうか？とりあえず考えられる事は書いておきました。 どれにも当てはまらない場合はまた補足でも頂ければと思います。
お礼
回答ありがとうございます。 以下ＣＳＳですが長文になりますので 省略しています。 全体をwrapperで囲み head ナビがleft コンテンツがright です。 コンテンツのright部分の.section01を 横一の文章のところを途中レイアウト変更のため #Benefitsと#Loseに分けて 二段組にしようとしてから。 フッターが変になりました。 xhtmlの基本事項は手打ちせず。既存のコーディングを使用しています。 フッターの幅の指定しているのですが… なにがおかしいのでしょうか？ 引き続きご教授いただけるとたすかります。 以下CSS----------------------------------------------------- body { } #wrapper { } #head { } #right { } .section01 { } #Benefits{ float:left; width:273px } #Lose{ float:right; width:273px } .section02 { } #left { } #footer { clear: both; width: 800px; background-color: #000066; padding:1px; } #footer p { font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; font-size: 1em; font-weight: bold; color: #FFFFFF; text-align: center; }
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_4_thumbnail_img_sm.png)
お礼
解りやすい回答ありあがとうございます。 一部レイアウトを訂正して解決できました。