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

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

それでは、次は2カラムレイアウトを作ってみましょう。
1カラムレイアウトと違い、2カラムレイアウトではfloatを使います。
また、スタイルもより多く必要となります。

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

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

2カラムレイアウトを作るうえで、必要なスタイルは以下の6つです。

[必要なスタイル]

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

header {
border:dashed 1px #999;
}

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

#contents {
float:left;
width:748px;
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(ヘッダー)、#sidenavi（サイドナビ）、#contents（コンテンツ）、footer（フッター）、未対応ブラウザ用スタイルとなります。

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

#wrap、header、未対応ブラウザ用スタイルは1カラムレイアウトの時と一緒ですが、新たに#sidenaviが追加され、#sidenaviと#contentsにfloatが、footerにclearが追加されています。

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

気をつけたいこと

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

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

#sidenavi { ←　サイドナビのスタイル
float:left;　←　float:left;を記述しています
width:198px;
height:498px;
border:dashed 1px #999;
margin:10px 10px 10px 0px;
}

#contents {
float:left; 　←　float:left;を記述しています
width:748px; 　←　1カラムと違い、横幅が狭くなります
height:498px;
border:dashed 1px #999;
margin:10px 0px 10px 0px;
}

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

marginによるwidthの変化

今回、#sidenaviには「上方向」「下方向」「右方向」にmarginを指定しています。
1カラムレイアウトの時にも#contentsにmarginを指定していましたが、上下のみの指定でした。

しかし、今回は右方向にmarginを設定しているので、#contentsのwidthをmargin分だけ引いてあげる必要があります。

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

覚えておきたいポイント

floatを忘れずに

1カラムレイアウトではfloatは使いませんでしたが、2カラム以上になるとfloatを使ってレイアウトする必要があります。

HTMLの記述

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

ページを組み立てる

1カラムレイアウトの時と同じように、入力ミスに気をつけて組み立てましょう。入力するコードも長くなっています。

step.1

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

step.2

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

step.3

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

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

step.4

次にcontentsrを入力します。

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

step.5

最後にfooterを入力します。

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

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

[HTMLの記述例]

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

</head>

<body>

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

<div id="contents">
<h2>コンテンツ</h2>
</div>

</div>

</body>
</html>