CSSの三段組みレイアウトについて教えて下さい。。

締切済

質問者：souzaburou
質問日時：2014/04/24 20:14
回答数：3件

CSSレイアウト初心者ですが、CSSの作成段組みを作る時に

<div id="container">

<div id="header">
</div>

<div id="contents">

<div id="left_bar">
</div>

<div id="main">
</div>

</div>

<div id="right_bar">
</div>

<div id="footer">
</div>

</div>

と三段組固定レイアウトを作成したいのですが、

一度目は何回やり直してもfloatの設定でleft_bar,mainの横並びが上手くいかずに、
contentsの中でleft_bar,mainが縦並びになってしまい何回何が原因か様々なサイトで考えを模索してソースを直しても何故かleft_bar,main
がcontentsの中で何回書き直しても縦並びになりもう一度一からCSSを組み直してみると、
どうした訳かようやくcontentsの中でleft_bar,mainが横並びになってくれました。

これは一体根本的に何が原因で横並びにさせるつもりが、縦にボックスが並んでしまうのでしょうか？

CSSのfloatの概念からハックかなと思いハック親ボックスにハックをかけてみてでも全く関係ないみたいでしたし、親ボックスにピクセルを指定していないからかと思い親ボックスにピクセルで指定しても何故か縦並び？！

CSSをもう一度書きなすことで意図したレイアウトになると言う事は一番は何が原因していると見られるのでしょうか？

通報する

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

質問の本文を隠す

回答 (3件)

最新から表示
回答順に表示

No.3

回答者： balloon23
回答日時：2014/04/25 13:18

自分の場合、よくあるケースで

１）どっかでclearfix使っている（タグはなくても擬似要素でやってたりとか）
2）タグが正しく記入されているか（謎のdivがあったりしてはまる）
3）ブロック全てにの幅計算が当たっているか（よく100％きっちりにしてIEであぼん）

などなど。
　
可能性ありそうなのは、まずは1と2とかでしょうか？
　
対策として
◇cssの中に「clear」設定している箇所を探していじる
◇html lintなどで、（主にdivの）閉じ忘れ、余分なものがないかチェックする
◇（ちょっと難易度上がりますが）ブラウザのプラグインなどで要素のチェックをする
（firebugとかwebdeveloperとか）
　
cssのリンク先を間違えてるなんてこともしょっちゅうですが；

- 0
- 件

通報する

No.2

回答者： ORUKA1951
回答日時：2014/04/24 20:58

そもそも、そんなHTMLは書かない!!

HTML4.01で
『構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』が強く唱えられ、『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』
となっていたことは御存知だと思います。
　すなわち、divに付くidやclassは、(文書構造を示す要素が用意されていないために)「DIVと組み合わせて文書構造を示すための物」でした。
　HTML5では、文書構造を示すために新しい要素( http://standards.mitsue.co.jp/resources/w3c/TR/h … )が追加されDIVは原則使わなくなります。
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
NOTE: Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable. Use of more appropriate elements instead of the div element leads to better accessibility for readers and easier maintainability for authors.
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［4.4 Grouping content — HTML5( http://www.w3.org/TR/html5/grouping-content.html … )］より

<div id="container">要らないでしょう。
　<div id="header"></div>headerになるものは沢山あるのでclassでしょう。
　<div id="contents">本文はsection
　　<div id="left_bar"></div>先で右に配置するときや、下にするときはどうする
　　<div id="main"></div>mainのほうを先に書かなきゃ
　</div>
　<div id="right_bar"></div>スマホ用に下に置きたいときは？
　<div id="footer"></div>
</div>

簡単なサンプルです。HTML5にするときは、
<div class="header">その部分のヘッダ</div>　→　<header></header>
<div class="section">本文</div>　→　<section></section>
<div class="nav">ナビゲーション</div>　→　<nav></nav>
<div class="aside">本文と直接関係ない記事</div>　→　<aside></aside>
<div class="footer">文書のフッタ</div>　→　<footer></footer>
にすれば良いです。

★タブは＿に置換してあるので戻す。
★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html )
　でチェック済みHTML4.01strict+CSS2.1
★リキッド--スマホから幅広ディスプレイに対応(必要ならmediaqueryでデザインを変える)
　当然、フォントを大きくしてもデザインが崩れない。
★印刷にはデザインが変わる(印刷プレビューで確認)
　印刷時には本文でない物は後回しにされる。もちろん検索エンジンにも・・
★段組にfloat使ってないので、本文内で画像のfloat/clearなど本来の使い方ができる。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
＿<title>サンプル</title>
＿<meta name="author" content="ORUKA1951">
＿<meta http-equiv="Content-Style-Type" content="text/css">
＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" >
＿<link rel="START" href="../index.html">
＿<style type="text/css" media="screen">

＿</style>
＿<style type="text/css" media="print">

</style>
</head>
<body>
＿<div class="header">
＿＿<h1>タイトル</h1>
＿＿<p>このページでは・・・・</p>
＿</div>
＿<div class="section">
＿＿<h2>見出し</h2>
＿＿<p>本文はsection</p>
＿＿<div class="section">
＿＿＿<h3>項見出し</h3>
＿＿＿<p>本文項記事</p>
＿＿＿<p>sectionの階層でレベルが判断される</p>
＿＿</div>
＿＿<div class="nav">
＿＿＿<ol>
＿＿＿＿<li><a href="/">Top</a></li>
＿＿＿＿<li><a href="/books">Books</a></li>
＿＿＿＿<li><a href="/manual">Manual</a></li>
＿＿＿</ol>
＿＿</div>
＿＿<div class="aside">
＿＿＿<h3>補足記事</h3>
＿＿</div>
＿</div>
＿<div class="footer">
＿＿<h2>文書情報</h2>
＿＿<dl class="documentHistry">
＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt>
＿＿＿<dd>2013-03-03</dd>
＿＿</dl>
＿</div>
</body>
</html>