ここでは、ホームページ作成のスキルを独学で身につける方法をシリーズでご紹介します。先回は、ホームページのレイアウトについて考えました。今回はその代表的な形である「3カラム」レイアウトを作ってみましょう。
「3カラム」レイアウトとは
カラムとは段組みのことです。
そして、メインコンテンツが3つの段組みで構成されているものを「3カラム」レイアウトと呼びます。
この方法はレイアウトの代表的な形で、多くのウェブサイトで使用されています。今ご覧になっているこの記事のページも段組みが使用された「3カラム」レイアウトです。
後ほどいろいろと調整できますので、まずはこの「3カラム」レイアウトを作成し、ホームページのベースを作ってみましょう。
「3カラム」レイアウトの作成方法
手順１ HTMLファイルに記入
HTMLファイルに以下のように記入してみましょう。 最初むずかしければコピー＆ペーストでも大丈夫です。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>はじめてのホームページ</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">
ここにはヘッダーが入ります
</div>
<div class="main">
<div class="main-contents">
メインコンテンツ
</div>
<div class="right-navi">
右側のカラム
</div>
</div>
<div class="left-navi">
左側のカラム
</div>
<div class="footer">
ここにはフッターメニューが入ります
</div>
</body>
</html>解説
まず「body」の中にヘッダーとなる「header」、メインコンテンツ、フッターとなる「footer」を作ります。
次にメインコンテンツを「main」（真ん中のコラム＝main-contents と、 右側のコンテンツ＝right-navi）と、左側のコンテンツ(left-navi）で構成します。
ここが少しわかりにくいところなのですが、このように「3コラム」を作成する際には、左、真ん中、右といった順番に書くのではないのです。
まず最初に「真ん中」の部分を書きます。これはHTML内では「重要な情報を上から順番に書いていく」というルールに乗っ取ったものです。「右側」のコラムよりも、「真ん中」のコラムのほうが重要な情報を記入することが多いので、上に書きます。
また、このようにしておくと、「レスポンシブデザイン」に対応させるときに便利です。※レスポンシブデザインについては後の記事で解説します。
手順２ CSSに以下のようにスタイルを指定
カラムを作成する方法はいくつかあるのですが、今回は「float」という、前の要素の右や左に滑り込ませる方法を使用して3つの段組みを作成します。 そして、わかりやすいようにそれぞれの部分に背景色を付けています。
ちょっと格好悪いのですが、完成するまでこのように色をそれぞれ付けておくと動きがわかりやすいです。
body{
background-color: lightyellow;
}
.header {
height: 150px;
background-color: yellow;
}
.footer{
height: 200px;
background: black;
color: #fff;
clear: both;
}
.main-contents, .left-navi, .right-navi {
height: 400px;
}
.main-contents {
background-color: red;
color: #fff;
float: left;
width: 80%;
}
.left-navi {
background-color: blue;
color: #fff;
width: 20%;
float: right;
}
.right-navi {
background-color: green;
color: #fff;
float: right;
width: 20%;
}
.main{
width: 80%;
float: right;
}解説
ポイント１：「float」を使用する。
「float」は「float：右か左」で指定できます。 真ん中のカラムに対して「右側のカラム」を滑りこませて右に寄せ、さらにその真ん中のカラムと右側のカラムに対して「左側のカラム」を滑り込ませて左に寄せています。
ポイント２：幅は「％」で指定する
それぞれのカラムには幅「width」を「％」で指定しています。「px」でも指定できますが、今後のことを考えて今回は「％」にしています。そうすると、ブラウザのサイズを変えても、それぞれの「幅の割合」は変わりません。
※この「％」は画面サイズに対しての割合ではなく、あくまで「親要素」に対する割合です。それで、左側のカラム（20％）、真ん中と右を合わせたカラム（80％）となります。そして、さらにその真ん中と右を合わせた要素の中で、真ん中のカラムを（80％）、右側のカラムを（20％）としています。
ポイント３：「float」を使用した後の要素には必ず「clear: both;」を付ける
カラム部分は「float」を使用していますが、それに続く「footer」要素は「float」を使用しません。それで、「footer」には「clear: both;」を付けましょう。これを付けないと、フッター部分が上まで上がってきてしまい、うまく表示されません。
手順３ 動作をテストする
うまくできていれば以下のようにブラウザで表示されるはずです。 もしうまくいかない場合は、記入ミスなどが考えられますので、もう一度確認してみてくださいね。
まとめ
上記のようにカラムを作成できたでしょうか。HTML内で記入する順番と「入れ子」の構造を間違えないようにしましょう。そしてCSSでは「float」を使用します。