一歩ずつ学ぶ

最終更新日:

HTML5入門: 2カラムレイアウトのひな形を作ってみる

前回は1カラムのレイアウトを作りました。(前回記事: HTML5入門: 1カラムレイアウトのひな形を作ってみる

今回は2カラムレイアウトのひな形を作ってみます。

  • ヘッダー領域
  • メイン領域(記事領域 + サイド領域)
  • フッター領域

イメージは下図の通りです。 実際にコンテンツを書いていくのは下図の赤字部分の header、article、side、footer部分です。 containerとmain部分はレイアウト調整のための外枠というイメージです。

2カラムレイアウト

HTML5のひな形からスタート

HTML5のひな形からスタートします。 (参考記事: HTML5入門!基本中の基本、HTML5のひな形をつくる

これを一旦保存しておいてください。 文字コードはUTF-8、ファイルの拡張子は.html、 ファイル名は何でも構いません(例: sample.html)

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title></title>
</head>
<body>

</body>
</html>

スタイルシートを指定

1カラムレイアウトの時と同じ様にHTMLファイルとは別にCSSファイルを作成して参照するようにします。 <head>~</head>の中に<link>タグを記述してスタイルシートを指定します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

</body>
</html>

CSSファイルのファイル名をstyle.cssとしています。 HTMLファイルと同じフォルダにstyle.cssという新規ファイルを作成してください。

全体を囲う領域 container

これから先は<body>~</body>タグの中に記述していきます。 今後は<body>~</body>以外の部分は省略します。

<body>

この中に記述していきます。

</body>

最初に全体を囲う領域を作成します。div要素を使い、idをcontainerとします。

<body>
<div id="container">

</div>
</body>

ヘッダー領域 header

次にヘッダー領域を作成します。div要素を使い、idをheaderとします。 先ほど記述したcontainerの中に記述します。 ヘッダー領域にはサイトタイトル等を記述します。

<body>
<div id="container">

  <div id="header">header領域</div>

</div>
</body>

メイン領域 main

メイン領域を作成します。div要素を使い、idをmainとします。 今回のメイン領域には文字は入力しません。 レイアウト調整のための外枠です。

<body>
<div id="container">
  <div id="header">header領域</div>

  <div id="main">


  </div>

</div>
</body>

フッター領域 footer

フッター領域を作成します。div要素を使い、idをfooterとします。 フッター領域にはCopyright情報等を記述します。

<body>
<div id="container">

  <div id="header">header領域</div>

  <div id="main">


  </div>

  <div id="footer">footer領域</div>

</div>
</body>

記事領域 article

記事領域を作成します。div要素を使い、idをarticleとします。 記述場所はid="main"の中です。 記事領域には本文を記述します。

<body>
<div id="container">

  <div id="header">header領域</div>

  <div id="main">

    <div id="article">article領域</div>

  </div>

  <div id="footer">footer領域</div>

</div>
</body>

サイド領域 side

サイド領域を作成します。div要素を使い、idをsideとします。 記述場所はarticleと同じくid="main"の中です。 サイド領域にメニュー等を記述します。

<body>
<div id="container">

  <div id="header">header領域</div>

  <div id="main">

    <div id="article">article領域</div>

    <div id="side">side領域</div>

  </div>

  <div id="footer">footer領域</div>

</div>
</body>

HTMLはこれで終了です。 mainの中にarticleとsideがあるのが今回の特徴です。 下図のようなレイアウトをこれからCSSで実現していきます。

2カラムレイアウト

HTMLファイルのまとめ

HTMLファイル全体をまとめると下記の通りです。 前回作成した1カラムレイアウトのHTMLにid="side"のdiv要素が1つ加わっただけです。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="container">

  <div id="header">header領域</div>

  <div id="main">

    <div id="article">article領域</div>

    <div id="side">side領域</div>

  </div>

  <div id="footer">footer領域</div>

</div>
</body>
</html>

CSSを記述

ここから先はCSSファイルのstyle.cssに記述していきます。 エディタ等でCSSファイルを開いておいてください。

containerの横幅と中央表示

id="container"と指定したdiv要素に対してスタイルを設定します。 今回はcontainer部分の横幅を950pxに指定します。 ちなみに2カラムのレイアウトでまず思いつくのがYahooですが、 Yahooの横幅は950pxです。

#container {
  width: 950px;
}

次にcontainerが中央に表示されるように指定します。 margin: 0 auto;とすることで、上下の余白が0px、 左右の余白が自動調整されて中央に表示されます。

#container {
  width: 950px;
  margin: 0 auto;
}

headerの境界線

id="container"と指定したdiv要素に対して境界線を設定します。 前回と同じように、あくまで一時的な境界線です。 最終的には消します。

ここでは直線、幅が1px、黒色の境界線を指定します。

#header {
  border: solid 1px black;
}

articleの境界線とfloat、width設定

境界線

id="article"と指定したdiv要素に対して境界線を設定します。 直線、幅が1px、赤色の境界線を指定します。

#article {
  border: solid 1px red;
}

float、width設定

articleを左側に配置するための設定をします。 float: left;と指定することで左側に配置されます。

そして、floatを指定した要素は横幅を明確にする決まりになっています。 横幅を指定するのはwidthです。ここでは横幅を620pxに設定します。 floatとwidthはワンセットと覚えておいてください。

#article {
  border: solid 1px red;
  float: left;
  width: 620px;
}

sideの境界線とfloat、width設定

境界線

id="side"と指定したdiv要素に対して境界線を設定します。 直線、幅が1px、緑色の境界線を指定します。

#side {
  border: solid 1px green;
}

float、width設定

sideを右側に配置するための設定をします。 float: right;と指定することで右側に配置されます。 floatとwidthはワンセットですから横幅を320pxに設定します。

#side {
  border: solid 1px green;
  float: right;
  width: 320px;
}

mainのoverflow設定

id="main"と指定したdiv要素に対してoverflowの設定をします。

先程id="article"とid="side"に対してfloatを設定しました。 floatを設定した場合、横幅のとり方によってはレイアウトが崩れることがあります。 具体的にはid="footer"の内容が割り込んでくることがあります。

そこで、レイアウトが崩れないようにするのがoverflow: hidden;という記述です。 overflowはfloatを指定した要素の親要素に対して指定します。 今回floatを設定したのはarticleとside、この2つの親要素はmainなのでmainに対してoverflowを設定します。 こうすることでfooterが割り込んでくるのを防止できます。

#main {
  overflow: hidden;
}

footerの境界線

id="footer"と指定したdiv要素に対して境界線を設定します。 直線、幅が1px、青色の境界線を指定します。

#footer {
  border: solid 1px blue;
}

CSSファイルのまとめ

以上でCSSファイルstyle.cssの記述は終わりです。 先ほど記述した6つの部分をまとめると以下の通りです。

#container {
  width: 950px;
  margin: 0 auto;
}

#header {
  border: solid 1px black;
}

#main {
  overflow: hidden;
}

#article {
  border: solid 1px red;
  float: left;
  width: 620px;
}

#side {
  border: solid 1px green;
  float: right;
  width: 320px;
}

#footer {
  border: solid 1px blue;
}

今回のポイントは2つあります。

  • floatとwidthはワンセット
  • floatを指定した親要素にoverflow: hiddenを指定

実際に表示してみる

作成したHTMLファイルをブラウザで開いてみてください。 次のように表示されていればOKです。
表示を確認: sample.html

↑ PAGE TOP