- ベストアンサー
floatの挙動について
- floatの挙動について質問があります。
- 次のコードで#sidebody内に#a～cboxを左側に縦に並べ、#dboxを右側に配置したいのですが、#dboxのfloatが#sidebodyに対して効きません。
- 原因を教えていただけませんでしょうか。
- ninnikutips
- お礼率50% (56/110)
- CSS
- 回答数5
- ありがとう数15
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (4)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
No.3,4です。 ＞floatを使わずリストでレイアウトを作るなんて、考えてもみませんでした。 ＞参考のHPのソースをいくつか見てますが、初めてです。 たまたま、今までにそのようなサイトしか出会えなかっただけでしょう。 プロの作成したページだと逆転すると思います。 ちょっと説明しておきます。 1) floatを使わず【absolute/relative】で並べてレイアウトする 2) 【ナビゲーションのリストをそのまま正直に】リストでマークアップ (2)は言わずもがなですので(1)について 先のサンプルで <style type="text/css"> となっているところを <style type="text/css" media="screen"> と書き換えて印刷プレビューでご覧頂くだけで効果は実感できるでしょう。本文 と関係ないナビゲーションリンクは後回しにされるはずです。 ★それは「検索エンジンにもそう見えている!!」と言う意味です。 このページの本文に直接関係ないが関連した補足記事(asideと言います)を追 加したとします。もしこれを右なり左に表示しようとすると本文より前に置くこ とになります。これはSEO上もメンテナンスの上からも望ましくありません。 また本文中でfloatやclearが使えないという致命的な問題が発生します。 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから 例えば絶対配置による方法では、HTMLを記述する上で内容の配置順序が自由にな ることが回り込ませるボックスを先に記述する必要がある回り込みによる方法よ りも優れているが、場合によっては後続のボックスに重なって表示されるおそれ がある ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［段組 - Wikipedia( http://ja.wikipedia.org/wiki/%E6%AE%B5%E7%B5%84 )］より ＞これから組みなおすのはちょっと難しく、今後の目標とさせていただくことと しました。 でしようね。 いずれHTML5の時代が到来します。HTML5では完全に文書構造とプレゼンテー ションが分離されることが望まれます。今までも物はそのままで良いので、順次 切り替えていかれるのが良いでしょう。サンプル見られたらわかるように、なに せ色々な面で楽になります。デザインは気が変わったら自在に変えられる。スマ ホやプリンターに対応させようとしたらスマホ用やプリンター用のスタイルシー トを別に書けば良い。
お礼
お礼が遅れて失礼いたしました。 思い切って、ご教示頂いたやり方で組みなおしました。 レイアウト崩れもないし、どこでclearするか迷うこともなくなるし、構造もすっきりと分かりやすくなりました。 本当にありがとうございます。 しかし・・・今までいくつかcssの教材や入門者向けのHP、DreamWeaverのチュートリアルでさえどれも段組みをfloatで行っていたのですが、一体なんだったんだろうという気持ちです。 そういったHP等ではセレクタの使い方もちゃんと説明されていなかったので、無駄にclassを増やして対応していたのですが、今回の改修を機にhtmlは文書構造のみ、cssはプレゼンテーションという考えに切り替えました。ありがとうございました。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
body内は(検索エンジンも含めて)誰が見てもわかるので説明しません。 class名は、HTML5の新しい要素名とその意味をそのまま利用しています。HTML5にするときは、それぞれ <div class="header"></div> ⇒<header></header> <div class="section"></div> ⇒<section></section> <div class="nav"></div> ⇒<nav></nav> <div class="footer"></div> ⇒<footer></footer> に書き換えるだけです。 html,body{margin:0;padding:0;} ブラウザのデフォルトのスタイルでは余白が少しあるので h1,h2,h3,h4,h5,h6,p{margin:0;line-height:1.6em;} いずれも同様にマージンがあるので、また日本語の文字は大きいので p{text-indent:1em;} 日本語の段落の更新は「字下げ」で示すので /* ここから */ div.header,div.section,div.footer{ width:90%;min-width:190px;max-width:900px; 基本サイズと最大、最小サイズを指定することでスマホから幅広ディスプレイまで対応 margin:0 auto; 中央に寄せます。 padding:5px; 余白を少しとって置くブロックの最小サイズは上の190px+2×5px=200px border-color:red; border-style:solid; ボーダーのスタイルと色を指定 } div.header{ border-width:1px 1px 0 1px; headerは上と左右を1px position:relative; これはここではなくても良かった } div.section{ border-width:0 1px; 上下は0、左右は1px; background-color: green; position:relative; ナビゲーションなど含まれる要素のサイズの基本にするため!!(ポイント) min-height:250px; ナビゲーションに最低限必要な高さはここで指定する。 } div.footer{border-width:0 1px 1px 1px;} footerは左右と下が1px、上は0 div.section h2,div.section p{margin-left:100px;} section(本文)内のh2,p要素の左を空けてナビゲーション用のスペース確保 div.section div.nav{ position:absolute; 親ブロックから切り離す top:0;left:0;width:100px;height:100%; 高さ・幅・位置はstaticでない親コンテナブロックを参照 background-color:silver; } div.section div.nav ol{ list-style:none; margin:0;padding:0; リストなのだがリストでない＝ブロックに変更 text-align:center; 中央配置--この値は継承されるので最上階が便利 } div.section div.nav ol li{ display:block; リストの項目じゃなくする margin:0;padding:0; これらも0にしておく line-height:20px;height:20px; これで上下左右中央に配置される。 position:relative; これも下位(a要素)の位置サイズ基準にするため } div.section div.nav ol li+li{ 二つ目以降は・・ line-height:100px;height:100px; 高さが100pxになるので・・ } div.section div.nav ol li a{ display:block; a要素は行内要素なのでブロックにして width:100%;height:100%; 高さと幅は親に合わせる。 color:white; } div.section div.nav ol li a{ background-color: blue; } div.section div.nav ol li+li a{ background-color:fuchsia;/* pinkはない */ } div.section div.nav ol li+li+li a{ background-color:navy;/* darkblueはない */ } ★使える色は、『 ⇒色キーワードのリストは、aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、orange、purple、red、silver、teal、white、yellowである。( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/syndata.html#value-def-color )』です。これ以外はブラウザ依存で保証されていません。 もし、sub sectionがあるときは ＿<div class="section"> ＿＿<h2>見出し</h2> ＿＿<p>本文はsection</p> ＿＿<p>メインの記事は先に書かないと検索エンジンがページ内容を誤解する。</p> ＿＿<div class="section"> ＿＿＿<h3>見出し</h3> ＿＿＿<p>・・・・</p> ＿＿</div> ＿＿<div class="nav"> ＿＿＿<ol> ・・・【中略】・・・ ＿＿＿</ol> ＿＿</div> ＿</div> div.section div.section{margin-left:100px;min-height:0;min-width:0;} div.section div.section p,div.section div.section div.section{margin-left:0;} などが必要になます。 本文と関係ない記事(aside)を追加するときは <div class="section"> 本文 <div class="nav"></div> <div class="aside"></div> </section> にしてそれぞれ右左に置けば良いです。
お礼
大変参考になりました。 これから組みなおすのはちょっと難しく、今後の目標とさせていただくこととしました。 ありがとうございました。
補足
ORUKA1951様、またまたご教示いただきましてありがとうございます。 floatを使わずリストでレイアウトを作るなんて、考えてもみませんでした。 参考のHPのソースをいくつか見てますが、初めてです。 floatである程度作ってしまってるので、どうしようか悩みどころですが・・・ ウーン、悩みます
- ORUKA1951
- ベストアンサー率45% (5062/11036)
- syosincyan
- ベストアンサー率0% (0/1)
はじめまして。 挑戦してみたのですが、cssの最初の#contentの赤枠線がうまくいきませんでした。 とりあえず#dboxが右側に行ったので中途半端ですいませんが、回答してみました。 １．まず書き損じと思いますが</head>が下から2行目に来ているので、 上から4行目へ移動してください。 ２．htmlのbodyの中身は並べ替えました。 <div id="content"> <div id="dbox">d</div> <div id="sidebody"> <div id="abox">a</div> <div id="bbox">b</div> <div id="cbox">c</div> </div> </div> ３．cssは#contentの赤枠線がうまくいきません。その後を変更しました。 #dbox { display :block; width: 100px; height: 250px; float: right; background-color: green; text-align: center; color: white; } #abox { display :block; width: 100px; height: 20px; background-color: blue; text-align: center; color: white; float: left; } #bbox { display :block; width: 100px; height: 100px; background-color: pink; text-align: center; color: white; } #cbox { display :block; width: 100px; height: 100px; background-color: darkblue; text-align: center; color: white; }
お礼
どうもありがとうございました。 参考にさせていただきました。
お礼
ズバリそれですね。 何回も何回も見直してるのに気づきませんでした。 いや、何回も見直してるからこそ気づかなかったのか・・・ すみませんね。 バカですね。 ありがとうございました！