footerのclear:bothが効きません

Question

教えてください。コーダー初心者です。タイトルどおりフッターで指定したクリアーが聞きません。上ヘッダーで、左にナビ、右にコンテンツ右コンテンツ内に右幅いっぱいの文章をその下に右コンテンツを二段組した文章をいれました。フッターは現在右コンテンツ側によってしまい。左ナビしたまできてくれません。右コンテンツを幅一列で組んでいたのですが、二段組のレイアウトを追加指定したあたりからフッターがおかしくなりました。原因は何でしょうか？教えてください。下記はhtmlです。

ヘッド

ナビ

コンテンツ

横一文章

右文章

左文章

ORUKA1951 · Accepted Answer

たとえばちょっと複雑・・でも、よくありそうなHTML/CSSを考えて見ます。
右がHTMLを文書構造にしたがってマークアップしたもの。左がスクリーン用に見栄えを整えたもの。(印刷には適さないので、印刷用スタイルシートは別途用意するか、CSSのmediaをscreenに限定する。)

HTMLは(画像もスタイルシートも読まない)テキストブラウザや読み上げブラウザ、そして検索エンジンを想定してきちんと文書構造にしたがってマークアップします。

そのうえでスタイルシートでは横幅の広い(広すぎる？)ディスプレイの特性を生かして、左のようにデザインしていく。

floatを本文内で使用するとき・・結構多いと思う・・ので、他では使わないほうが無難です。

ORUKA1951 · Answer

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 )］より本題ですが、その文書の説明を聞く限りマークアップは　

見出し

・・・

・・・

　だけでよさそう。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;} 　だけでよい。

abacabu · Answer

独学でＷＥＢサイトを作成している者です。ＨＴＭＬ階層よりもむしろＣＳＳと合わせて公開して頂けるとありがたいですが、１．(Ｘ)ＨＴＭＬはどのタイプをお使いですか？２．ＤＴＤ(DOCTYPE宣言)は、正しく、システム識別子まで書いていますか？１，２について (例)ＨＴＭＬ４．０１ Strict： *1←この行が識別子 (例)XHTML1.0 Strict： *2 *3 *1：ＨＴＭＬに於いてはシステム識別子は省力出来るが色々と不具合が有るので正式の記述をして下さい。 *2：ＸＨＴＭＬに於いてＸＭＬ宣言を省ける条件は、ＸＭＬで基本文字コードであるＵＴＦ－８もしくはＵＴＦ－１６を用いた場合のみ省略可ですが、使用する事推奨されています。 *3：ＸＨＴＭＬに於いてはシステム識別子を省略できませんのでしっかり記述して下さい。３．ＸＨＴＭＬに於いてはにｘｍｌ名前空間を宣言する。(Ｘ)ＨＴＭＬでは言語宣言をする。 *4 *5 *4：ＨＴＭＬに於いてはこれです(日本語使用宣言) *5：ＸＨＴＭＬでは、xmlns(xml name space：xml名前空間)とxml:langとlangを併用する事を推奨されています。４．ＣＳＳを使う場合は内部のの前で <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の設定が出来ません。恐らく解除も！？どうでしょうか？とりあえず考えられる事は書いておきました。どれにも当てはまらない場合はまた補足でも頂ければと思います。

footerのclear:bothが効きません

たとえばちょっと複雑・・でも、よくありそうなHTML/CSSを考えて見ます。

HTMLのマークアップでIDやCSS名に

独学でＷＥＢサイトを作成している者です。

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング