プロが教えるわが家の防犯対策術！

floatとclear:bothで困っています

解決済

  • 質問者：utubora1113
  • 質問日時：
  • 回答数：1件

こんにちは、検索をしたのですが、問題が解決しなかったので、質問させて頂きます。

HPを制作中で、sidebarをページの右側につけたいのですが、
そのことについて困っています。

sidebar内容をページの右側にレイアウトさせたく、HTML上、div id=sidebarで処理していますが、

#sidebar{
float:right;
}
を使用すると、bodyの範囲がheaderまでで止まります。
(firebugにてチェック済み)

floatをつけた際に、clear:both;を必ずかけなければいけないということを知り、

#sidebar{
float:right;
clear:both;
}
をかけても上記と同じ現象が起きます。

当たり前かもしれませんが、
#sidebar{
clear:both;
}

のみですと、bodyが全範囲に反映されます。

これが原因でページが制作できなく、困っています。

どうすれば、sidebar内容(img)が右側にいき、尚且つ、bodyが全範囲に反映されるのでしょうか？

同じような質問が過去にあれば申し訳ございません。

宜しくお願い致します。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (1件)

No.1ベストアンサー

  • 回答者： ORUKA1951
  • 回答日時：

そもそもsidebarって何でしょう。

文書構造がわかりません。
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［The global structure of an HTML document (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )］より
　と仕様書に書かれているように、class名やid名は文書構造を補完するためのものです。決してデザインのためではありません。スタイルシートは、その文書構造を元にデザインしていきますが、デザインのためにHTMLを書くのではありません。そんなことしていたらHTML5にまったく付いていけなくなりますよ。

＞sidebar内容(img)が右側にいき
　imgは何でしょう。「テキストを画像に置き換えて表現 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」したものでしたら、代替文字の内容が知りたい。

　HTMLが、たとえば下記のようなものだったとしましょう。
<body>
　<div class="header">
　　<h1>タイトル</h1>
　</div>
　<div class="section">
　　<h2>本文見出し</h2>
　　<p>本文記事</p>
　　<div class="tableContent"><!-- table of content(目次) -->
　　　<ol>
　　　　<li><a href="#section1">一章</a>
　　　　<li><a href="#section1">一章</a>
　　　</ol>
　　</div>
　</div>
　<div class="footer">
　　<h2>文書情報</h2>
　</div>
</body>
　このようにHTMLはデザインは一切無視して、ひたすら文書構造をマークアップします。(2.4.1 構造とプレゼンテーションの分離 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … ))とはそういうこと。

　これをスタイルシートで、左だろうが右だろうが、上だろうが下だろうが、自在にデザインしていくことができます。

div.section{position:relative;min-height:200px;}
div.section>*{margin-left:200px;}
div.section div.tableContent{posotion:absolute;left:0;top:0;width:190px;height:100%;}

/* わかり易く色と枠をつけておく */
body>div{border:solid 1px gray;background-color:aqua;}
div.section{background-color:lime;}
div.section div.tableContent{background-color:green;}
div.footer{background-color:silver;}

floatは使いません。、floatを使うと、必ず回り込ませるブロックより前に書かなければならなくなったり(文書構造をくずす)、本文中で本来のfloat(記事中の挿絵の周囲にテキストを回りこませる)が使えなくなったり・・・
　→Webデザインにおける段組 ( http://ja.wikipedia.org/wiki/%E6%AE%B5%E7%B5%84# … )
　ちなみに、上記の<div class="tableContent"></div>は、<div class="section"></div>内のどこにあっても指定した位置に表示されます。

以前に回答した
・floatによる段組について - Webデザイン・CSS - 教えて！goo ( http://oshiete.goo.ne.jp/qa/7079628.html )
など

※idはリンクやjavascriptのターゲットにするとき以外は、原則つけないほうが良いです。
　詳細度が高くなるため、スタイルシートが肥大化します。headerやsection,footerは、ひとつの文書の中で何度でも登場するのでclass名をつけておきます。スタイルシートではセレクタの記述でそれらを区別することができます。
　div.section|margin-left:1em;font-size:0.95em}としておけば、章→項→小項と進むたびに左側が字下げされ、文字は小さくなります。また、div.section div.section h2{color:red;}とすれば、項以下は赤くなる。
※sidebarの画像がわかりませんが、もしそれが「テキストを画像に置き換えたもの」なら、テキストを記述し背景画像にしましょう。すべてのユーザーエージェントが画像を読むわけではありません。特に検索エンジンは画像なんて読めません。






　
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

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

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

おすすめ情報