- ベストアンサー
floatとclear:bothで困っています
- floatとclear:bothを使用してsidebarを右側に配置する方法
- sidebarの内容を右側にレイアウトさせたいが、floatとclear:bothを使用するとbodyの範囲が制限される
- どうすればsidebarの内容を右側に配置し、bodyの全範囲に反映させることができるか
- utubora1113
- お礼率0% (0/1)
- CSS
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
そもそもsidebarって何でしょう。文書構造がわかりません。 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［The global structure of an HTML document (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )］より と仕様書に書かれているように、class名やid名は文書構造を補完するためのものです。決してデザインのためではありません。スタイルシートは、その文書構造を元にデザインしていきますが、デザインのためにHTMLを書くのではありません。そんなことしていたらHTML5にまったく付いていけなくなりますよ。 ＞sidebar内容(img)が右側にいき imgは何でしょう。「テキストを画像に置き換えて表現 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )」したものでしたら、代替文字の内容が知りたい。 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-html401j/intro/intro.html#h-2.4.1 ))とはそういうこと。 これをスタイルシートで、左だろうが右だろうが、上だろうが下だろうが、自在にデザインしていくことができます。 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#Web.E3.83.87.E3.82.B6.E3.82.A4.E3.83.B3.E3.81.AB.E3.81.8A.E3.81.91.E3.82.8B.E6.AE.B5.E7.B5.84 ) ちなみに、上記の<div class="tableContent"></div>は、<div class="section"></div>内のどこにあっても指定した位置に表示されます。 以前に回答した ・floatによる段組について - Webデザイン・CSS - 教えて！goo ( http://okwave.jp/qa/q7079628.html ) など ※idはリンクやjavascriptのターゲットにするとき以外は、原則つけないほうが良いです。 詳細度が高くなるため、スタイルシートが肥大化します。headerやsection,footerは、ひとつの文書の中で何度でも登場するのでclass名をつけておきます。スタイルシートではセレクタの記述でそれらを区別することができます。 div.section|margin-left:1em;font-size:0.95em}としておけば、章→項→小項と進むたびに左側が字下げされ、文字は小さくなります。また、div.section div.section h2{color:red;}とすれば、項以下は赤くなる。 ※sidebarの画像がわかりませんが、もしそれが「テキストを画像に置き換えたもの」なら、テキストを記述し背景画像にしましょう。すべてのユーザーエージェントが画像を読むわけではありません。特に検索エンジンは画像なんて読めません。
