ホームページの作り方:さきちんうぇぶ

ホームページの作り方を基礎から学べるウェブサイト。
わかりやすい説明で初心者も安心!

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の注意点

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

それぞれの計算図

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

覚えておきたいポイント

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

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

HTMLの記述

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

ページを組み立てる

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

step.1

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

<div id="wrap">
</div>

step.2

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

<div id="wrap">
<header>
<h1>ヘッダー</h1>
</header>
</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">
<header>
<h1>ヘッダー</h1>
</header>
<div id="leftnavi">
<h2>サイドナビ</h2>
</div>
<div id="contents">
<h2>コンテンツ</h2>
</div>
<div id="rightnavi">
<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>3カラムレイアウト</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>

<body>

<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>

<footer>
<h2>フッター</h2>
</footer>
</div>

</body>
</html>

ブラウザで確認

入力が完了したらブラウザで確認してみましょう!
以下のように表示されていれば成功です。

3カラムレイアウトの完成図

なお、回り込みの解除(floatのclear)はfooterにclear:both;を指定しているので、ここで解除されます。

footerにclearを指定するのを忘れないようにしましょう。

覚えておきたいポイント

wrapに収まるように入力しよう

必ず、すべての要素は<div id="wrap"></div>内に収まっている必要があります。
<div id="wrap"></div>内に記述しなければ、レイアウトが崩れてしまいます。

また、footerにclearを指定するのを忘れないようにしましょう。
clearが指定されていないと回り込みが解除されないので、レイアウト崩れの原因となります。

【STEP.6】疑似セレクタの利用
« 前のページへ 2カラムレイアウトの構成

コンテンツの一覧

学習ページの一覧ナビ

快適なサイト運営のために

セキュリティソフトを導入しよう
ウィルス対策について

安心してホームページを運営するための心がけ。

HTMLの特殊文字一覧
HTMLの特殊文字一覧

よく使う、HTMLの特殊文字・記号の一覧表。

カラーコードの一覧表
カラーコードの一覧

HTML・CSSで使えるカラーコードの一覧表。

規約やお問い合わせなど

ご利用案内
ご利用案内

当サイトをご利用になる前に、必ずご確認ください。

FAQ
FAQ

よくあるご質問など。

お問い合わせ
お問い合わせ

さきちんWEBについてのお問い合わせはこちらから。

プライバシーポリシー
プライバシーポリシー

個人情報管理とWeb広告配信について。

運営者情報
運営者情報

さきちんWEBの管理・運営者、さきちんについて。

サイトマップ
サイトマップ

さきちんWEBのサイトマップ。