ページ１ | ページ２ | ページ３

３段組のレイアウト (Part1)

Webページを３段組でレイアウトするサンプルです。このサンプルは、ヘッダー部、メイン部、フッター部から構成されています。メイン部は３段組にして列幅をパーセントで指定しています。列幅をパーセント(%)指定で段組するレイアウトをFluidまたはLiquidと呼びます。ここでは、１列目を「20%」、２列目を「60%」、そして３列目を「20%」の幅に設定しています。ブラウザのウィンドウをドラッグしてリサイズすると列幅がパーセントで指定した幅で調整されます。

ブラウザのウィンドウを拡大してWebページのすべての内容を表示したところ (1/2) ブラウザのウィンドウを縮小してWebページの一部を表示したところ (2/2)

サンプルのダウンロード (ColsFluid.lzh)

３段組のレイアウトを作成する手順は、フレーム編とCSS編に分けて説明します。フレーム編では、XHTML要素を入力してWebページの枠を作ります。そして、CSS編でこの枠にスタイルシートを適用して３段組のレイアウトで表示させます。

◆３段組のレイアウトを作成する （フレーム編）

ここでは、HTMLファイルを作成してWebページの枠を作る手順を説明します。

ステップ１　新規Webページを作成する (3ColsFluid.htm)

お好みのエディタを起動したらhtml、head、body要素を入力します。head要素に、title要素を追加してページタイトルを入力します。 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>３段組 - Fluid レイアウト</title>
</head>
<body>
</body>
</html>

ステップ２　ヘッダー部、メイン部、フッター部を定義する

body要素にdiv#header、div#wrapper、div#footer要素を追加して「ヘッダー部」、「メイン部」、「フッター部」を定義します。 

<body>
<div id="header">
</div>
<div id="wrapper">
</div>
<div id="footer">
</div>
</body>

ステップ３　ヘッダー部に見出しを入力する

div#headerにdiv.content要素を追加したら、子要素としてh1要素とp要素を挿入してヘッダーとページの説明文を入力します。 

<div id="header">
  <div class="content">
    <h1>３段組パターン１（パーセント指定）</h1>
    <p>
      ブラウザのウィンドウをリサイズしてみてください。
      このページではイメージを一切使用していません。
    </p>  
  </div>
</div>

ステップ４　メイン部を３段組にする

div#wrapperに、div#leftcol、div#midcol、div#rightcol要素を追加してメイン部を３段組にします。それぞれの列に、div.content要素を追加したらh3要素とp要素を子要素として挿入します。h3要素にはCSSで宣言する列幅のパーセント「Left 20%」「Center 60%」「Right 20%」を入力します。p要素にはダミーテキストとして「Lorem ipsum」を入力します。Loremu ipsum(ロレム・イプサム)とは、出版、ウェブデザインなどの分野で利用するダミーテキストです。レイアウトを検証するときに利用すると便利です。Loremu ipsumのテキストデータは、次のサイトからダウンロードすることができます。

http://www.lorem-ipsum.info/generator3

このサイトでは、「Standard Lipsum」の他に「日本語」「中国語」などのダミーテキストも生成することができます。

Lorem ipsumのダミーテキストをダウンロードできるサイト 

<div id="wrapper">
    <div id="leftcol">
      <div class="content">
        <h3>Left 20%</h3>
        <p>Lorem ipsum…</p>
      </div>
    </div>
    <div id="midcol">
      <div class="content">
        <h3>Center 60%</h3>
        <p>Lorem ipsum…</p>
      </div>
    </div>
    <div id="rightcol">
      <div class="content">
        <h3>Right 20%</h3>
        <p>Lorem ipsum…</p>
      </div>
    </div>
  </div>
</div>

ステップ５　フッター部にCopyrightを定義する

div#footerにdiv.content要素を追加したら、p要素を挿入して「Copyright」を表示します。 

<div id="footer">
  <div class="content">
    <p>
      Copyright ©2009
    </p>
  </div>
</div>

ステップ６　ブラウザに表示してみる

この状態でデフォルトブラウザ(※)にWebページを表示すると図のようになります。この時点では、まだスタイルシートを適用していませんのでコンテンツが上から順番に表示されます。後述する「３段組のCSS編」では、このWebページにスタイルシートを適用して３段組で表示します。

※Webページを作成するときは、モダンブラウザの中からデフォルトブラウザを決めます。そして、デフォルトブラウザの仕様に合わせてスタイルシートを定義します。ここでは、デフォルトブラウザをFirefoxとしています。

デフォルトブラウザ(Firefox)にWebページを表示したところ

ページ１ | ページ２ | ページ３