カラムレイアウト

カラムレイアウト

Flexboxを利用すれば簡単にカラムレイアウトを実現する事ができます。
従来のようにfloatやpositionを利用すると少し不便な部分がありましたが、Flexboxなら簡単なので今後の主流になると思われます。
CSSフレックス

親要素 {display:flex; flex-direction:並びの方向を指定; justify-content:配置位置を指定;}
子要素 {order:表示の順番を指定（0が標準値）;}

カラムレイアウトの一例

以下の場合なら縦方向に数字の順番に各要素を並べる事ができます。

#container {display:flex; flex-direction:column; justify-content:center;}
header {order:0;}
#side {order:1;}
#main {order:2;}
footer {order:3;}

フルサイズレイアウト

ヘッダーとフッターだけフルサイズにする方法

ヘッダーとフッターの横幅を画面いっぱいまで伸ばす方法です。

1. インコンテナでメインとサイドを囲む（一例としてid="incontainer"を使用）
2. CSSでコンテナの幅を100%にする（#container {width:100%;}）
3. CSSでインコンテナの幅をコンテナで使用していたサイズにする（#incontainer {width:containerのサイズpx;}）
4. CSSでインコンテナの要素を中央に寄せる（CSSセンタリング）
5. サイドにあるborderを消す

フルサイズレイアウトの一例

以下のようにするとヘッダーとフッターだけを伸ばす事ができます。

<container>
<header>～</header>
<incontainer>
<main>～</main>
<side>～</side>
</incontainer>
<header>～</header>
</container>