CSSでレイアウト

3つのブロック要素div1,div2,div3があった場合に添付のような
レイアウトにするにはどうすればよいでしょうか？

div2,div3をさらにレイアウト用のdiv4でグループ化してしまえばできますが、
今後もできるだけHTMLをいじることなくCSSだけで自由にレイアウト変更をできるように
なっておきたいと思っています。

できれば座標指定はしたくないのでPositionのStaticは使わないほうが嬉しいです。

全部Staticにする方法はわかっておりますので全箇所Staticではなく、
「全部相対postionではなく1か所だけStaticを使う」などが効率的だ、というのであれば
そちらのやり方でも教えていただけると助かります。

特定の環境での実行を意図していませんが必要な場合はIE8以降、などイマドキな環境
での利用しやすいものがより助かります。HTML/CSSのバージョンはそれに応じる形で
特に指定はございません。

よろしくお願いいたします。

No.5 ベストアンサー 回答者： ORUKA1951 回答日時： 2012/03/25 19:29

実際のマークアップはもちろん異なるかもしれませんが、サンプルであげた文書について説明します。

　ブラウザの表示メニューから、スタイルシートなしで見て、それがスタイルシートを解釈しない他のユーザーエージェントや検索エンジンにただしく情報が伝えられるであろう事を理解してください。
　→Lynx などのテキスト ブラウザを使用して、サイトを確認します（ほとんどの検索エンジンのスパイダーには Lynx で見えるようにサイトが映ります）。 ( http://support.google.com/webmasters/bin/answer. … )
　実はgoogleは、サンプルのclass名は理解しています。(HTML5の新しい要素の提唱者の筆頭ですから・・)

　その上で、ブラウザでのデザインをしていくとき、著者は読者により適切に伝わるよう工夫します。どのようなデザインが良いかは好みです。しかし、そのデザインのために文書構造----header→section→footerの順番を変えなければならないとしたら、「軒を貸して母屋を取られる」になってしまいます。その意味でもabsoluteが最善の方法です。

　そて、なぜ、footerがheaderに続いて表示されるかと言うと、本文sectionをabsoluteで配置すると、その本文ブロックは、本来の位置に存在しなかったように続くブロックは配置されます。
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
絶対配置のボックスは、包含ブロックに対する位置を明示され、通常フローから完全に取り除かれる（つまり兄弟要素に全く影響しない）。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［9.6 絶対配置（Absolute positioning） ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )］より

　さのため、headerに続いてfooterが存在することになります。そしてheaderやfooterは、margin-leftで左側が開けてあるので、その残った狭い範囲に順番に流し込まれる。

　また、３番目のスタイルシートでは、headerにあるはずの目次がsectionの左スペースに絶対配置で置かれていますね。これも同様な仕組みです。

　もちろん、印刷では、多くのスタイルは適用されませんので、印刷向きになるはずです。

＞今後もできるだけHTMLをいじることなくCSSだけで自由にレイアウト変更をできるように
なっておきたい

　このように、将来デザインを一新したくなったときを考えると、どのように配置するかは一切考えず(実際には経験が必要ですが)に、文書構造だけをマークアップすることがとても重要になります。それは、必然的に配置にabsoluteを使うことにもなるのです。
　文書構造がしっかりしていれば、HTMLを開くことなく、スタイルシートを編集・変更できるようにもなるのです。
div.header div.nav{position:absolute;top:200px;width:20%;z-index:10;}
は
div.header の子孫であるdiv.navについて{スタイルを指定}してあると、解読できますね。
　半角スペースは、子孫セレクタです。>の子供セレクタを使っても良いのですが、古いブラウザが対応していないので・・・。



　

この回答へのお礼

ありがとうございます。仕様をおりまぜて説明いただいたので正しく学び、今後自力で調べる手立てにもなりました。
また質問することもあるかもしれませんがよろしくおねがいします。

お礼日時：2012/03/25 23:37

No.6 回答者： tracer 回答日時： 2012/03/25 22:41

#1です。

#1のfloatに関しては、親要素以上の幅では横に並ばないことを利用して配置したものです。従って、おっしゃるように、親要素の幅が子要素の横幅合計よりも大きい場合は、全てが横に並びます。

さて、レイアウトにおけるfloatとabsoluteは、マークアップ初心者の方にとって最初の障壁かと思います。ちょっと私的な思惑を書いてみます。

まず、floatとabsoluteで、どちらが優れているという話ではないので、その辺りは誤解のないようにされたほうがよいと思います。極端な話、テーブルレイアウトが絶対にダメ！というわけでもないです。テーブルレイアウトが必要なケースがごく限られているというだけです。実際の制作では、WEBの仕様書は制作の根幹とも言えますが、仕様書を厳守することが正義ではありません。制作がしやすくて、検索エンジンにフレンドリーで、ユーザーに使いやすいものをケースバイケースで選択していくことがゴールになるかと思います。

その上で、floatとabsoluteを考えてみると、「HTMLにまったく手を入れずにCSSだけでレイアウトを完全に操作する」という意味では、absoluteの1択かと思います。その意味ではfloatと比較してabsoluteの汎用性は高いです。しかし、「HTMLにまったく手を入れずにCSSだけでレイアウトを完全に操作する」は必ずしも理想ではありません。HTMLがシンプルになればなるほどCSSにはトリッキーな記述が必要になり、CSS自体のメンテナンスコストは上がります。つまり、ほんとにCSSのみで完全にレイアウト操作するよりも、ある程度HTMLの修正を見越したものの方が、トータルでは制作コストが安くなる場合も少なくありません。

つまり、floatが優れているとか、absoluteが最強という理解ではなく、それぞれの特徴を理解した上で、サイト全体の構成を見越し、その時々で最善のCSSの記述をするのが重要かと思います。

ちょっと質問の意図とはずれてしまいましたが。参考までに。

この回答へのお礼

大変丁寧なご回答ありがとうございます。
実装と仕様と実運用という狭間の日頃感じていた点がはっきりした気がします。
仕様とベストプラクティスをバランスよく獲得するのが必要と感じていたので大変参考になりました。

お礼日時：2012/03/25 23:41

No.4 回答者： ORUKA1951 回答日時： 2012/03/25 10:34

＞誤解を避けるためもう少し抽象化した質問にしますと、なんらかのブロック要素で囲まれた

＞ものを記載の図のように配置するためにはどのようなcssを記述すればよいでしょうか？
　まず示したサンプルの説明を読んで、きちんと動作を確認してください。
　期待通り・・・３つのブロックとして表示されるはずですし、他の配置も選択できます。

＞absoluteで設置したくないというのを書きたかったものです・・。
　本来は、absoluteで配置すべきです。なぜなら、配置のために文書構造を変えなくて良い。文書構造を無視してHTMLを書かなくて済むからです。詳しくは
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
例えば絶対配置(absolute)による方法では、HTMLを記述する上で内容の配置順序が自由になることが回り込ませるボックスを先に記述する必要がある回り込みによる方法よりも優れている
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［段組 - Wikipedia( http://ja.wikipedia.org/wiki/%E6%AE%B5%E7%B5%84# … )］より

　先に示した方法は、ＩＥ７以降の新しいブラウザのいずれでも同様に配置できるはずです。

　

この回答への補足

ありがとうございます。
なるほどAbsoluteがより良いという記述があるんですね。
勉強になりました。

再度コードを確認させて頂きましたが、基本的には右側のメニューに見せるためにはmargin-leftで調整するという感じなんですね。
Footerがdiv.headerブロック要素のすぐ下に表示されていますがこれがなぜかコードを見てもわかりませんでした。教えていただけないでしょうか？(要素のleftの位置はmargin-leftで決まっていると思います。Topの位置がどうやって決まっているのか、という意味です)
私のイメージではdiv.footerのtopの位置はdiv.sectionブロックのbottomと一致するのではと思ったのですが実際にはdiv.headerブロックの下にあるというのが理解できておりません。
度々ですみませんが、よろしくお願いいたします。

補足日時：2012/03/25 17:52

No.3 回答者： ORUKA1951 回答日時： 2012/03/22 10:59

スタイルシートです。

HTMLと同じ階層に置くこと--HTMLもCSSもShift_JISです。
その後、ブラウザの表示メニューから、3種類のスタイルシートを選択してください。印刷プレビューも確認する。

　このように、文書構造とプレゼンテーションを完全に分離することでHTMLには一切!!手を加えずに、プレゼンテーションを変更することができます。慣れればHTMLをまったく見なくてもデザインできますよね。

　そのために必要なことは、HTMLにはプレゼンテーションに関わることは一切記述しないこと--徹底して文書構造をマークアップすることです。HTML5では、これがもっと徹底されす。そのために文書構造のための新しい要素が追加されます。( http://standards.mitsue.co.jp/resources/w3c/TR/h … )

　そうして書かれたHTMLは、一般的なスクリーンブラウザの新旧どころか、検索エンジンを含めたすべてのユーザーエージェントに対応させられます。先のHTMLを印刷プレビューすると印刷イメージもわかりますよね。

＞できれば座標指定はしたくないのでPositionのStaticは使わないほうが嬉しいです。
　これは間違っています。staticは、HTML上でのblock要素( http://w3g.jp/xhtml/dic/block_element )のデフォルト(初期設定です。)特に指定しない限りはstaticです。他の指定positionのabsolute,relativeやfloatのnone以外はstaticです。あくまでstaticとして配置させるのが基本で、必要に応じて他の値を指定します。

main-left.css

@charset "Shift_JIS";
div.section,div.footer
div.section{position:absolute;left:0;top:0;width:60%;}
div.header,div.footer{margin-left:60%;}

standard.css

@charset "Shift_JIS";
div.header,div.section,div.footer{width:80%;min-width:640px;max-width:800px;margin:0 auto;}
div.section div.section{width:auto;}

2column.css

@charset "Shift_JIS";
div.header,div.section,div.footer{width:80%;min-width:640px;max-width:800px;margin:0 auto;position:relative;}
div.section *{margin:0 20%;}
div.header div.nav{position:absolute;top:200px;width:20%;z-index:10;}
div.section div.section{margin-left:20%;}
div.section * *{margin:0;}

この回答への補足

詳細なご説明ありがとうございます。

Divで書いたのが不適切だったのかなと思います。すみません。
staticの部分も誤りです。申し訳ありません。absoluteで設置したくないというのを書きたかったものです・・。

誤解を避けるためもう少し抽象化した質問にしますと、なんらかのブロック要素で囲まれたものを記載の図のように配置するためにはどのようなcssを記述すればよいでしょうか？

補足日時：2012/03/24 21:54

No.2 回答者： ORUKA1951 回答日時： 2012/03/22 10:41

申し訳ありませんが。

。。
　HTML/CSSの役割分担を誤解されています。HTML(Hyper Text Markup Language)は、文字通りハイパーテキスト(他の文書にリンクできるテキスト)をマークアップする方法で、文書構造をマークアップするものでデザインのためのものではありません。デザイン(プレゼンテーション)はスタイルシートが担います。これはWebデザインの基本です。仕様書にも随所に書かれています。
★2.4.1 構造とプレゼンテーションの分離 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
★14.1 スタイルシートの概説 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )

　divは、デザインのためではなくHTMLで用意されている文書構造をマークアップするためのタグが足りないときに『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』するためのもです。HTML5では、文書構造をマークアップするために不足していた要素(タグ)が追加されます。

　たとえば、HTML4.01で「文書に構造を付加するため」に次のようにする必要があったもの
<body>
　<div class="header">
　　文書のヘッダに当たる見出しや要約
　</div>
　<div class="section">
　　文書の本文(章)
　　<div class="section">
　　　サブ項目(項)
　　　<div class="figure">
　　　　挿絵
　　　</div>
　　</div>
　</div>
　<div class="footer">
　　文書情報などフッタ
　</div>
</body>
これが、
<body>
　<header>
　　文書のヘッダに当たる見出しや要約
　</header>
　<section>
　　文書の本文(章)
　　<section>
　　　サブ項目(項)
　　　<figure>
　　　　挿絵
　　　</figure>
　　</section>
　</section>
　<footer>
　　文書情報などフッタ
　</footer>
</body>
と簡単に記述できるようになります。

★このように、文書構造であるHTMLと、プレゼンテーションを規定するスタイルシートを分離することで初めて、
『HTMLをいじることなくCSSだけで自由にレイアウト変更をできるように』なります。
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
　それによって、単にブラウザの差だけではなく・・HTMLの本来の目的である
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )］より
　↑とても重要!!
　単にIEだ、firefoxだけじゃなく、読み上げソフト(スクリーンリーダー)、点字出力端末、テキストブラウザ、携帯電話のみならず・・重要な検索エンジンにもただしく情報が伝えられるページが作れるのです。

　ごく簡単なHTMLと、数種類のスタイルシートを例としてあげておきます。

★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint. … )
★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_ … )
　検証済みのウェブ標準(HTML4.01strict+CSS2.1)です。
　なお、タブは、＿に置換してあります。
<!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:[e-mail]" title="send a mail" >
＿<link rel="START" href="../index.html">
＿<style type="text/css">
<!--
p{text-indent:1em;line-height:1.4em;margin:0;}
html,body{margin:0;padding:0;width:100%;background-color:gray;}
div.header,div.section,div.footer,div.section div.section{min-height:200px;}
div.header{background-color:white;}
div.section{background-color:silver;min-height:400px;}
div.section div.section{position:static;width:auto;margin-left:1em;background-color:rgb(255,255,220);}
div.footer{background-color:aqua;}
div h1,div h2,div h3{margin:0;line-height:1.6em;}
div.section div.section div.figure{width:200px;height:200px;float:right;background-color:yellow;}
-->
＿</style>
＿<link rel="stylesheet" type="text/css" media="screen" href="main-left.css" title="本文左">
＿<link rel="Alternate stylesheet" type="text/css" media="screen" href="standard.css" title="標準">
＿<link rel="Alternate StyleSheet" type="text/css" media="screen" href="2column.css" title="2カラム">
</head>
<body>
＿<div class="header">
＿＿<h1>サンプル</h1>
＿＿<p>文書のヘッダに当たる見出しや要約</p>
＿＿<div class="nav">
＿＿＿<ol>
＿＿＿＿<li><a href="/">トップ</a></li>
＿＿＿＿<li><a href="/book">書籍</a></li>
＿＿＿＿<li><a href="/product">製品</a></li>
＿＿＿</ol>
＿＿</div>
＿</div>
＿<div class="section">
＿＿<h2>章見出し</h2>
＿＿<p>文書の本文(章)</p>
＿＿<div class="section">
＿＿＿<h3>項見出し</h3>
＿＿＿<p>サブ項目(項)</p>
＿＿＿<div class="figure">
＿＿＿＿<p>挿絵</p>
＿＿＿</div>
＿＿</div>
＿</div>
＿<div class="footer">
＿＿<h2>文書情報</h2>
＿＿<p>文書情報などフッタ</p>
＿</div>
</body>
</html>

No.1 回答者： tracer 回答日時： 2012/03/22 06:58

よく分かってませんが、そんなにこ難しい話ではない気がします。

div1,div2,div3には何らかの親要素があるわけですよね？
これで十分なのでは。

<style type="text/css">
#container{
width:450px;
}
#div1{
width:300px;
height:300px;
background:#f00;
float:left;
}
#div2{
width:150px;
height:150px;
background:#0f0;
float:left;
}
#div3{
width:150px;
height:150px;
background:#00f;
float:left;
}
</style>

<body>
<div id="container">
<div id="div1">1</div>
<div id="div2">2</div>
<div id="div3">3</div>
</div>
</body>

この回答への補足

ありがとうございます。
動作は確認できたのですが私自身Floatの理解ができていないようで少し説明をお願いできますでしょうか？
containerを600pxにしたところ横並びにdiv1 div2 div3が表示されたので、頂いたコードは単純にサイズ的にDiv3はDiv2の横に入らないのでずれて下に表示されている、というようなイメージであってますか？

補足日時：2012/03/24 21:42