一般的な2カラム（2段組）の組み方

HTMLとCSSを使った、一般的な2カラム（2段組）レイアウトの作り方です。
よく使うレイアウトなので、作り方をマスターしておきましょう。
以下のレイアウト図を元に、HTMLとCSSを組んでいきます。


 

まずは、HTMLから作っていきます。

1.ヘッダーのエリアを書く

ヘッダーを書きます。今回は、headerタグを使います。

HTML
<header>
</header>

2.ナビのエリアを書く

次は、ナビエリアを書きます。今回は、navタグを使います。

HTML
<header>
</header>
<nav>
</nav>

3.キービジュアルのエリアを書く

キービジュアル用のタグが存在しないので、divタグで括ります。
今回は、idにkeyを指定します。
HTML
<header>
</header>
<nav>
</nav>
<div id="key">
</div>

4.2カラムエリアを書く


ここは、少し複雑になってきます。
レイアウトの図を見ると、メインコンテンツとサイドエリアが横に並んでいます。こういったレイアウトを2カラム（2段組）と言います。
横に二つ並んでいるということは、CSSで横に並ばせる指定をしているということです。
いくつか手がありますが、2カラムを実現するためには、floatプロパティがよく使われます。


floatを使って横並びをする場合、同時にclearをどこで行うかも考えていかなくてはなりません。
今回は、clearfixを使ってclearしていこうと思います。







よって、上記の図の様に、clearfixを入れるための要素を書き、その中にメインコンテンツとサイドになる部分を書いていきます。
floatとclearについて詳しくは、以下の記事をご覧ください。
floatとclear

今回は、clearするための要素は、divタグでid属性をcontents_wrap、
メインコンテンツはmainタグ、サイドエリアはasideタグで記述します。

HTML
<header>
</header>
<nav>
</nav>
<div id="key">
</div>
<div id="contents_wrap">
    <main>
    </main>
    <aside>
    </aside>
</div>

5.footerエリアを書く

次は、footerエリアを書きます。footerタグを使います。
HTML
<header>
</header>
<nav>
</nav>
<div id="key">
</div>
<div id="contents_wrap">
    <main>
    </main>
    <aside>
    </aside>
</div>
<footer>
</footer>

6.CSSで、レイアウトを組む

今回は、ヘッダーやナビなどの横幅が、1000pxとなっています。
一つ一つの要素に、CSSで指定しても良いのですが、繰り返し同じ記述を書くことになってしまう為、若干手間です。
ですので、今回は要素を1000pxで中央寄せにするクラスを作って、そのクラスを真ん中に寄せたいHTMLに記述する形で作ります。
中央寄せするためのクラスは、innerとします。
CSS
.inner{
width:1000px;
margin-left:auto;
margin-right:auto;
}
HTML
<header class="inner">
</header>
<nav class="inner">
</nav>
<div id="key" class="inner">
</div>
<div id="contents_wrap" class="inner">
    <main>
    </main>
    <aside>
    </aside>
</div>
<footer class="inner">
</footer> 

7.header、nav、#key、footerを仕上げる

とりあえず、横並びになっていない要素を先に作ります。
注）今回は、各々の要素の中に文字などが何も含まれないため、通常は高さが0になってしまい、ブラウザ上に何も表示されません。ですので、今回は各々の要素にheightプロパティを使って、高さを指定します。
実際にホームページを作る際は、必要に応じてheightプロパティを消す必要があります。

尚、今後の記述はHTMLに何も変更がないためCSSのみ記述します。

CSS
.inner{
width:1000px;
margin-left:auto;
margin-right:auto;
}

header{
height:100px;
background-color:#FFA8A8;
}

nav{
height:100px;
background-color:#A8FFAB;
}

#key{
height:500px;
background-color:#FFFFA8;
}

footer{
height:100px;
background-color:#C3A8FF;
}

ここまで記述すると、以下の図の様になります。

8.2カラムを組む

次に、2カラムを組み込んでいきます。
CSS .inner{
width:1000px;
margin-left:auto;
margin-right:auto;
}

header{
height:100px;
background-color:#FFA8A8;
}

nav{
height:100px;
background-color:#A8FFAB;
}

#key{
height:500px;
background-color:#FFFFA8;
}

footer{
height:100px;
background-color:#C3A8FF;
}

main{
width:650px;
height:700px;
float:left;
background-color:#A8EBFF;
}

aside{
width:300px;
height:700px;
float:right;
background-color:#FFD4A8;
}
ここまでで、以下の様な図になります。


　この様に、footerが上にめり込む様に上がってきてしまいます。これは、floatをclearしていないから起こっている現象です。

9.clearする

今回は、clearfixを使ってclearしていきます。
clearfixについては、以下の記事を参照してください。
floatとclear

CSSに、
.cf::after{
content:"";
display:block;
clear:both;
}
以上を追加して、
idがcontents_wrapのdivにクラスcfを追加します。

以下が、今回の完成コードです。

CSS
.inner{
    width:1000px;
    margin-left:auto;
    margin-right:auto;
}

.cf::after{
    content:"";
    display:block;
    clear:both;
}

header{
    height:100px;
    background-color:#FFA8A8;
}

nav{
    height:100px;
    background-color:#A8FFAB;
}

#key{
    height:500px;
    background-color:#FFFFA8;
}

footer{
    height:100px;
    background-color:#C3A8FF;
}
main{
    width:650px;
    height:700px;
    float:left;
    background-color:#A8EBFF;
}

aside{
    width:300px;
    height:700px;
    float:right;
    background-color:#FFD4A8;
}

HTML
<header class="inner">
</header>
<nav class="inner">
</nav>
<div id="key" class="inner">
</div>
<div id="contents_wrap" class="inner cf">
    <main>
    </main>
    <aside>
    </aside>
</div>
<footer class="inner">
</footer>
上記のコードをブラウザで確認すると、以下の様な2カラムレイアウトが完成します。

以上で2カラムレイアウト完成です。

10.別の書き方

今回は、中央にしたい要素に、innerというクラスをつけることで実現しました。
それ以外に、全ての要素をdivタグで括ってしまい、そのdivに中央寄せのプロパティを書いていくことも可能です。

以下は、wrapというidのついたdivで全ての要素を括った場合のコードです。
CSS
#wrap{
    width:1000px;
    margin-left:auto;
    margin-right:auto;
}


.cf::after{
    content:"";
    display:block;
    clear:both;
}


header{
    height:100px;
    background-color:#FFA8A8;
}


nav{
    height:100px;
    background-color:#A8FFAB;
}


#key{
    height:500px;
    background-color:#FFFFA8;
}


footer{
    height:100px;
    background-color:#C3A8FF;
}
main{
    width:650px;
    height:700px;
    float:left;
    background-color:#A8EBFF;
}


aside{
    width:300px;
    height:700px;
    float:right;
    background-color:#FFD4A8;
}


HTML
<div id="wrap">
    <header>
    </header>
    <nav>
    </nav>
    <div id="key">
    </div>
    <div id="contents_wrap" class="cf">
        <main>
        </main>
        <aside>
        </aside>
    </div>
    <footer>
    </footer>
</div>
この方法は、一つづつinnerをつける手間が省けますが、途中の要素を横幅100%にするなどの操作が難しくなるデメリットがあります。
ラベル: