2カラムのレイアウト

質問

2カラムのレイアウトにおいて、HTMLの記述部分において。

【例1】コンテナーの「★外」に、フッターがある場合と。
・「コンテナー(コンテンツ+サイドバー)」
・「フッター」

【例2】コンテナーの「★中」に、フッターがある場合。
・「コンテナー(コンテンツ+サイドバー+フッター)」

があるように思いますが? ★どっちでもいいんでしょうか?
(どっちも、同じレイアウトになるんでしょうか?　そんな感じがします。)　 ^^
HTML/CSS　初心者なもので。。。よろしくです。　^^
----------------------------------------------------------------

【例1】

<div id="container">
　　<div id="contents">　本文 </div>　
　　<div id="sidebar">　サイド部分 </div>
</div>　<!--container部分終わり-->

　<div id="footer">
　　<p>著作権</p>
　</div> <!--footer部分終わり-->

【例2】

<div id="container">
　　<div id="contents">　本文 </div>　
　　<div id="sidebar">　サイド部分 </div>

　<div id="footer">
　　<p>著作権</p>
　</div> <!--footer部分終わり-->

</div>　<!--container部分終わり-->

回答No.1

abril · ベストアンサー

【例1】になるか【例2】になるかは、実現したいレイアウトがどちらの構成で可能か、に依るところが大きいかと思います。
仮に「どっちも、同じレイアウトに」なる、のであれば、私個人はcontents・sidebar・footerは全てcontainerの子要素とし、わざわざfooterだけをcontainerの子要素にはしないですね。例えばfooterの幅がcontainerの幅と同じでウィンドウに対して水平方向にセンタリングでレイアウトされている場合など、containerの子要素としておけばfooterで再度幅やセンタリングの指定する必要が（containerでのプロパティの値が継承されますので）ありませんが、外に出してしまうと、新たにfooterに対してcontainerと同じプロパティの値を与えてやったりしなければならなくなり、効率が悪いからです。外に出しても勿論間違いというわけではないですが、継承させれば済む値を（”そうでなければならないという必然性のない”構成にする事に依って）指定し直さなければならないのは、CSSのせっかくの"C"が活かせないので、避けます。
ということで（私が）footerをcontainerの外に出すのは、「どっちも、同じレイアウトに」ならない、場合ですね。
具体的にはそうですね…ちょっと適当なサンプルかどうかわかりませんが、例えば上記と異なりcontainerの幅が決め打ち（○○○px）でデザインされているのに対し、footerのスタイルが違っていて、幅がウィンドウに対して100%のリキッドなレイアウトになっていてラインが引かれたり背景がレンダリングされていたり…といった様な場合、footerがcontainerの外に出ていないと困ったことになります。

お礼

こんにちは。
どちらも、方法があるんですね。
また、レイアウトも、それなりに? 違うようで。。。^^

目的により、どちらでもあり。。。のようですので、
ありがとうございました。　^^