フロートによる2カラムレイアウト

kwackr HTML & CSS 入門
By: Ben Mortimer

ここでは、ブログなどでよく利用されているフロートを用いた2カラムレイアウトを実際に作成しながら段組みレイアウトの基礎を学びたいと思います。

目次
HTML5の記述
幅固定2カラムレイアウト -左メインコンテンツ-
ページ全体のセンタリング
横幅の計算
CSSの記述
幅固定2カラムレイアウト -右メインコンテンツ-
CSSの記述
メイン幅可変サブ幅固定レイアウト -左メインコンテンツ-
HTMLの追加
CSSの記述
メイン幅可変サブ幅固定レイアウト -右メインコンテンツ-
min-width と max-width

HTML5の記述

まずはHTMLのみでページを記述していきます。論文もそうですが、重要な文章は最初に記述するというルールに従い、メインコンテンツ » サブコンテンツの順に、HTMLの骨組みを設計してみます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <title>ページタイトル</title>
  <!--[if lt IE 9]>
    <script src="html5shiv.js"></script>
  <![endif]-->
  <style type="text/css">
    article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
      display: block;
    }
  </style>
</head>
<body>
<div id="container">
  <header>
    ヘッダーの内容
  </header>
  <div id="main">
    メインコンテンツの内容
  </div><!-- #main -->
  <div id="sub">
    サブコンテンツの内容
  </div><!-- #sub -->
  <footer>
    フッターの内容
  </footer>
</div><!-- #container -->
</body>
</html>

サンプルでは、header要素やfooter要素などのHTML5の新要素を使用していますので、古いIEにHTML5の新要素を認識させるため、html5shivを読み込ませています。また、id属性を付与したdiv要素の終了タグの後ろにid名をコメントすることで、HTMLソースの可読性を高めています。

それでは、このHTMLをレイアウトしていきましょう。

幅固定2カラムレイアウト -左メインコンテンツ-

ページ全体のセンタリング

ブロック要素をセンタリングする為には幅(width)の指定と左右のmarginにautoを指定します。ここでは、#container の幅を960pxとし、上下にも margin を20px指定してみます。

#container {
  width: 960px;
  margin: 20px auto;
}

横幅の計算

ウェブサイト作成において、横幅の設定は非常に重要なポイントになります。ここでは、サイト全体の横幅を960pxとしていますので、横並びのボックスにしようとしているメインコンテンツとサブコンテンツが、960px幅に収まるようにレイアウトを設計する必要があります。

ここでは、メインコンテンツ(#main)の幅を620px、サブコンテンツ(#sub)の幅を320pxとし、メインコンテンツとサブコンテンツの間隔を20px空け、

#main(620px) + 間隔(20px) + #sub(320px) = 960px

となるようにレイアウトしてみます。

CSSの記述

最初に記述したメインコンテンツを左にレイアウトするには、左フロートを使用します。#main に float:left を、#sub に float:right を指定し、footer には clear:both を指定します。こうすると、メインカラムは左、サブカラムは右にレイアウトされ、960px – 620px – 320px = 20px メインコンテンツとサイドバーの間隔が空きます。また、古いIEのバグ対策のため、footer には width:100% を指定します。

  1. #container に width を指定する
    header
    #main
    #sub
    footer
  2. #main に width を指定し、float:left を指定する
    header
    #main
    #sub
    footer
  3. #sub に width を指定し、float:right を指定する
    header
    #main
    #sub
    –>
    footer
  4. footer に clear:both を指定する
    header
    #main
    #sub
    –>
    footer -clear

    サンプルコードは以下の通りです。

    #container {
  width: 960px;
  margin: 20px auto;
}
#main {
  width: 620px;
  float: left;
}
#sub {
  width: 320px;
  float: right;
}
footer {
  clear: both;
  width: 100%; /* for IE6,7*/
}

    幅固定2カラムレイアウト -右メインコンテンツ-

    CSSの記述

    先ほどとは逆に、メインカラムに右フロートを使用します。#main に float:right を、#sub に float:left を指定し、footer には clear:both を指定します。

    サンプルコードと表示サンプルは以下の通りです。

    #container {
  width: 960px;
  margin: 20px auto;
}
#main {
  width: 620px;
  float: right;
}
#sub {
  width: 320px;
  float: left;
}
footer {
  clear: both;
  width: 100%; /* for IE6,7*/
}

    メイン幅可変サブ幅固定レイアウト -左メインコンテンツ-

    メインコンテンツをリキッドレイアウトにすることで、ブラウザのスペースを有効利用しつつ、サブコンテンツ幅を固定出来る優れたレイアウトです。サブカラム幅を320px、メインカラムとの間隔を20pxとし、ネガティブマージンを利用してレイアウトしていきます。

    HTMLの追加

    幅固定レイアウトで使用したHTMLの #main 内に、div要素などのブロックレベル要素を追加します。ここでは #inner とします。

    <div id="container">
  <header>
    ヘッダーの内容
  </header>
  <div id="main">
    <div id="inner">
    メインコンテンツの内容
    </div><!-- #inner -->
  </div><!-- #main -->
  <div id="sub">
    サブコンテンツの内容
  </div><!-- #sub -->
  <footer>
    フッターの内容
  </footer>
</div><!-- #container -->

    CSSの記述

    コンテナブロックの width を 96%（左右にマージンを持たせるため、100% にしていません） に指定し、#main の width:100%, #sub の width を指定したのち、#main, #sub に float:left を指定します。そうすると #sub がカラム落ちしますので、#main に #sub の width の分だけ、負の margin-right (ネガティブマージン) を与え、#sub のカラム落ちを修正します。

    しかし、このままでは、#main はネガティブマージンを与えた領域の部分が #sub と重なってしまうので、#main 要素内に記述した #inner に、正の margin-right を与え、重なりを防ぎます。この時、負のマージンよりも多い値を指定すれば、メインカラムとサブカラムの間を空ける事が出来ます。

    1. #container に width (%指定) を指定する
      header
      #main
      色はにほへど 散りぬるを 我が世たれぞ 常ならむ 有為の奥山 今日越えて 浅き夢見じ 酔ひもせず
      #sub
      footer
    2. #main に width:100%, #sub に width を指定し、#main, #sub に float:left を指定する。
      header
      #main
      #sub
      footer
    3. #main に、負の margin-right (ネガティブマージン) を指定する
      header
      #main
      #sub
      footer
    4. #inner に、正の margin-right を指定する
      header
      #main
      #sub
      footer
    5. footer に clear:both を指定する
      header
      #main
      #sub
      footer -clear

      サンプルコードと表示サンプルは以下の通りです。ネガティブマージン-320pxに対し、340pxの正のマージンを与えることで、メインとサブの間隔を20pxにしています。

      #container {
  width: 96%;
  margin: 20px auto;
}
#main {
  width: 100%;
  float: left;
  margin-right:-320px;
}
#inner {
  margin-right: 340px;
}
#sub {
  width: 320px;
  float: right;
}
footer {
  clear: both;
  width: 100%; /* for IE6,7*/
}

      メイン幅可変サブ幅固定レイアウト -右メインコンテンツ-

      メインカラムとサブカラムの入れ替えは、float, margin の left, right の値を入れ替えます。サンプルコードと表示サンプルは以下の通りです。

      #container {
  width: 96%;
  margin: 20px auto;
}
#main {
  width: 100%;
  float: right;
  margin-left:-320px;
}
#inner {
  margin-left: 340px;
}
#sub {
  width: 320px;
  float: left;
}
footer {
  clear: both;
  width: 100%; /* for IE6,7*/
}

      min-width と max-width

      リキッドレイアウトはブラウザのスペースの有効活用が可能ですが、訪問者がウィンドウを小さくしすぎると、見栄えが悪くなります。

      そこで、ある一定のサイズ以下になった時に、ボックスのサイズをそれ以上小さくならないように出来るプロパティが min-width です。

      また、ある一定のサイズ以上になった時に、ボックスのサイズをそれ以上大きくならないように出来るプロパティが max-width です。

      使い方は、CSS に下記のように記述するだけです。

      #container {
  min-width: 760px;
  max-width: 1260px;
}

      ただし、min-width, max-width はIE6以前のIEでは対応していませんので、注意して下さい。