3カラムレイアウトの作り方

3カラムレイアウトを組んでみよう

次は3カラムレイアウトを作ってみましょう。
3カラムレイアウトは、2カラムにもう1本サイドナビが追加されたレイアウトになります。

まずはそれぞれ必要となる部品（スタイル）を用意しましょう。

3カラムレイアウトに必要なスタイル

3カラムレイアウトを作るのに必要なスタイルは、以下の7つです。

[必要なスタイル]

#wrap {
width:960px;
margin:0px auto;
}

header {
border:dashed 1px #999;
}

#leftnavi {
float:left;
width:198px;
height:498px;
border:dashed 1px #999;
margin:10px 10px 10px 0px;
}

#rightnavi {
float:left;
width:198px;
height:498px;
border:dashed 1px #999;
margin:10px 0px 10px 10px;
}

#contents {
float:left;
width:538px;
height:498px;
border:dashed 1px #999;
margin:10px 0px 10px 0px;
}

footer {
clear:both;
border:dashed 1px #999;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}

上から順に、#wrap(ラップ)、header(ヘッダー)、#leftnavi（レフトナビ）、#rightnavi（ライトナビ）、#contents（コンテンツ）、footer（フッター）、未対応ブラウザ用スタイルとなります。

3カラムレイアウトの注意点

2カラムレイアウトと違い、3カラムレイアウトにはサイドナビが2つあります。
#leftnavi（左のサイドナビ）と#rightnavi（右のサイドナビ）の2つのサイドナビスタイルを用意する必要があります。

また、3カラムレイアウトになることで、それぞれの幅が違ってくるのでwidhtの値も異なります。

気をつけたいこと

#leftnavi、#rightnaviの幅の分だけ、#contentsの幅を小さくしなければなりません。
#leftnaviの横幅＋#rightnaviの横幅+#contentsの横幅＝960pxになる必要があります。

なお、clearはfooterに指定します。

#leftnavi {　←　左のサイドナビ
float:left;
width:198px;
height:498px;
border:dashed 1px #999;
margin:10px 10px 10px 0px;
}

#contents {
float:left;
width:538px;　←　右と左のサイドナビの幅の分、狭くなります。
height:498px;
border:dashed 1px #999;
margin:10px 0px 10px 0px;
}

#rightnavi { 　←　右のサイドナビ
float:left;
width:198px;
height:498px;
border:dashed 1px #999;
margin:10px 0px 10px 10px;
}

footer {
clear:both;　←　floatをclearします
border:dashed 1px #999;
}

marginによるwidthの変化

3カラムレイアウトでは、#leftnaviに「上方向」「下方向」「右方向」のmarginを、#rightnaviに「上下方向」「下方向」「左方向」のmarginを指定しています。

左右にmarginが指定されているので、#contentsのwidthを左右のmargin分だけ引いてあげる必要があります。

キチンと計算して大きさを決定しないと、レイアウトが崩れてしまうので注意しましょう。

覚えておきたいポイント

やや複雑な3カラムレイアウト

3カラムレイアウトは、左サイドナビ、コンテンツ、右サイドナビで構成されます。他のレイアウトよりも複雑なので、入力するコードも多くミスも起こりがちです。
間違えないように、よく確認しながら組み立てましょう。

HTMLの記述

すべてのスタイルが準備できたら、HTMLファイルにコードを入力してみましょう。

ページを組み立てる

3カラムレイアウトになると入力するコードも多く複雑になります。よく確認しながら、ステップに沿って入力しましょう。

step.1

まずはじめにページの全体位置を決める、wrapを入力します。

step.2

次に、headerを入れます。
必ず<div id="wrap>と</div>の間に入力します。

step.3

leftnaviを入力しましょう。
これも必ず<div id="wrap>と</div>の間に、そして</header>の下に入力します。

<div id="wrap">
<header>
<h1>ヘッダー</h1>
</header>
<div id="leftnavi">
<h2>サイドナビ</h2>
</div>
</div>

step.4

contentsrを入力します。

<div id="wrap">
<header>
<h1>ヘッダー</h1>
</header>
<div id="leftnavi">
<h2>サイドナビ</h2>
</div>
<div id="contents">
<h2>コンテンツ</h2>
</div>
</div>

step.5

rightnaviを入力します。

<div id="wrap">
<header>
<h1>ヘッダー</h1>
</header>
<div id="leftnavi">
<h2>サイドナビ</h2>
</div>
<div id="contents">
<h2>コンテンツ</h2>
</div>
<div id="rightnavi">
<h2>サイドナビ</h2>
</div>
</div>

step.6

最後にfooteriを入力します。

必ず、すべてのコードが<div id="wrap>と</div>の間に収まるよう気をつけてください。

[HTMLの記述例]

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>3カラムレイアウト</title>

</head>

<body>

<div id="leftnavi">
<h2>サイドナビ</h2>
</div>

<div id="contents">
<h2>メインコンテンツエリア</h2>
</div>

<div id="rightnavi">
<h2>サイドナビ</h2>
</div>

</body>
</html>