付録．Colum Up

Revised: Jul./11th/2004

ページを多段組にする方法を紹介します。

一ページの中に、サイドバーとメインの、並列する二つのペインを表示したいことがあると思います。企業サイトなど、一ページに情報を詰め込みたい場合に使われます。ここでは、CSS を使えばなんでもできることの例として、ページ内に多段組にするための CSS の方法を紹介します。

多段組の表示例

以下で実現する多段組方法の描画例を以下に挙げます。ソースは、個別のファイルを開いてアクセスしてください。

図：colupSample01.html の表示例


図：colupSample02.html の表示例

図：colupSample03.html の表示例

図：colupSample04.html の表示例

サンプル HTML

ここでは、次のページをサンプルとして、多段組の方法を説明します。

<h1>Sugai, Manabuのウェブサイト</h1>
<p>最終更新日: 2004-07-11</p>
<p>ウェブページの作成方法を説明します。リンクはご自由にどうぞ。</p>

<!-- 左セル -->
<h2>What's New!</h2>
<ul>
<li>2004-08-01: ホームページビルダー</li>
<li>2004-07-21: インライン要素</li>
<li>2004-07-11: ブロック要素</li>
<li>2004-07-01: body</li>
<li>2004-06-21: head</li>
<li>2004-06-11: headとbody</li>
<li>2004-06-01: HTML</li>
</ul>

<!-- 右セル -->
<h2>目次</h2>
<p>当サイトのメインコンテンツです。</p>
<dl>
<dt>HTML 文書作成</dt>
	<dd>HTML 文書の作成方法を説明します。</dd>
<dt>CSS 作成</dt>
	<dd>HTML 文書に CSS を採用する方法を説明します。</dd>
<dt>JavaScript Tips集</dt>
	<dd>ダイナミックな表現のためのチップスを紹介します。</dd>
<dt>Java 文法解説</dt>
	<dd>プログラミング言語 Java の文法を説明します。</dd>
</dl>

<address>
Copyright&copy; 2004. Manabu Sugai. 著作権は放棄していません。
</address>

表示例01

以下では、"What's New!" と "目次" を2アップにして、先頭部分とアドレス部分は一段にすることにします。

HTML による多段組

HTML のテーブルを使ってた段組のレイアウトを実現する方法があります。各内容を右セルと左セルに突っ込む方法です。

<table summary="レイアウト用テーブル">
<tr><td style="width: 200px; vertical-align: top">
	<!-- 左セル -->
	<h2>What's New!</h2>
	<ul>
	<li>2004-08-01: ホームページビルダー</li>
	<li>2004-07-21: インライン要素</li>
	<li>2004-07-11: ブロック要素</li>
	<li>2004-07-01: body</li>
	<li>2004-06-21: head</li>
	<li>2004-06-11: headとbody</li>
	<li>2004-06-01: HTML</li>
	</ul>
</td><td style="width: 400px; vertical-align: top">
	<!-- 右セル -->
	<h2>目次</h2>
	<p>当サイトのメインコンテンツです。</p>
	<dl>
	<dt>HTML 文書作成</dt>
		<dd>HTML 文書の作成方法を説明します。</dd>
	<dt>CSS 作成</dt>
		<dd>HTML 文書に CSS を採用する方法を説明します。</dd>
	<dt>JavaScript Tips集</dt>
		<dd>ダイナミックな表現のためのチップスを紹介します。</dd>
	<dt>Java 文法解説</dt>
		<dd>プログラミング言語 Java の文法を説明します。</dd>
	</dl>
</td></tr>
</table>

見栄えを整形するために、左セルは幅 200px、右セルは幅400pxに指定しました。

テーブル要素によるレイアウトは、広く使われている方法ですが、要素の構造化という観点では望ましい遣い方ではありません。左上端のセルから、右方向に順番に読んでいけば意味が通るような、セルの順番が容易にシリアライズ（逐次化）できるような場合にだけ使っても良いでしょう。

表示例02

'`position`'

プロパティ 'position' を指定すれば、自由にレイアウトできます。

<div id="header">
	<h1>Sugai, Manabuのウェブサイト</h1>
	<p>最終更新日: 2004-07-11</p>
	<p>ウェブページの作成方法を説明します。リンクはご自由にどうぞ。</p>
</div>

<div id="sidebar">
	<!-- 左セル -->
	<h2>What's New!</h2>
	<ul>
	<li>2004-08-01: ホームページビルダー</li>
	<li>2004-07-21: インライン要素</li>
	<li>2004-07-11: ブロック要素</li>
	<li>2004-07-01: body</li>
	<li>2004-06-21: head</li>
	<li>2004-06-11: headとbody</li>
	<li>2004-06-01: HTML</li>
	</ul>
</div>
<div id="main">
	<!-- 右セル -->
	<h2>目次</h2>
	<p>当サイトのメインコンテンツです。</p>
	<dl>
	<dt>HTML 文書作成</dt>
		<dd>HTML 文書の作成方法を説明します。</dd>
	<dt>CSS 作成</dt>
		<dd>HTML 文書に CSS を採用する方法を説明します。</dd>
	<dt>JavaScript Tips集</dt>
		<dd>ダイナミックな表現のためのチップスを紹介します。</dd>
	<dt>Java 文法解説</dt>
		<dd>プログラミング言語 Java の文法を説明します。</dd>
	</dl>
</div>

<div id="footer">
	<address>
	Copyright&copy; 2004. Manabu Sugai. 著作権は放棄していません。
	</address>
</div>

/* ブラウザのデフォルトに依存しないように、
  全てのマージンとパッディングを 0 にします */
* { margin: 0;
	padding: 0 }

/* マージンとパッディングを指定します */
body,h1,h2,p,address { margin: 1em }
ul { margin-left: 2em }
dd { margin-left: 2em }

/* 2-upの本質です */
div#header, div#footer { border: 1px solid red }
div#main { margin-left: 250px;
	border: 1px solid red }
div#sidebar { position: absolute;
	left: 1em; top: auto; right: auto; bottom: auto;
	width: 200px;
	border: 1px solid red  }

ここでは分かりやすくするために、各ディビジョンに 'border: 1px solid red' を与えました。

縦の高さの短い方を 'position: absolute' にすることがポイントです。

表示例03

'`float`'

プロパティ 'float' による実現方法も有用です。

/* ブラウザのデフォルトに依存しないように、
  全てのマージンとパッディングを 0 にします */
* { margin: 0;
padding: 0 }

/* マージンとパッディングを指定します */
body,h1,h2,p,address { margin: 1em }
ul { margin-left: 2em }
dd { margin-left: 2em }

/* 2-upの本質です */
div#header, div#footer { border: 1px solid red }
div#sidebar { display: block;
	float: left;
	width: 200px;
	border: 1px solid red }
div#main { display: block;
	float: left;
	margin-left: 50px;
	border: 1px solid red }
div#footer { clear: left }

表示例04

細かい微調整は CSS で幾らでもできます。ここでは、2-up のための CSS の使い方を紹介しました。