3col+カラム落ちなし+equalHeightレイアウト

divを使ったレイアウトで、カラム落ちなしで、イコールハイトもちゃんとできるページ構造を考えてみました。

幅、カラム数の調整も、簡単です。
DEMO

ところで、

イコールハイトとは、

上の画像は、3カラムレイアウトと思ってほしい、左3列のページを右3列のページのように高さを揃えること。
例えば、背景画像を使っていたりする場合に、同じ高さでないと見栄えが悪いということがある。
ブログなどの場合に、ナビゲーションリンクの数等は、変化するので、あらかじめ高さを指定しておくのが困難。
また、単にjavaScript等で、最大の高さを取得するだけでは、フォントサイズを変更した時などに、ブロックからコンテンツがはみ出すということがおきる。
だから、cssや、javascriptで何とかしようとする。

カラム落ち

divエレメントで、レイアウトする時に、本来3列で維持されなくてはいけないページが、コンテンツの内容や、ブラウザが変わってしまうことで、設計と異なるレイアウト（例えば2列）になってしまう事を言う。きっちりと対策するには、htmlとcssに精通していないといけない。

というわけで、「この辺の有象無象に精通していなくても、大丈夫なようにする」のが、今回のテーマ

異様にしょぼいソースですが、このような発想は、どこにも見つかりませんでしたので、恥ずかしげもなく、かつ特別に公開中です。

<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="ja" xml:lang="ja" xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<meta http-equiv="content-script-type" content="text/javascript" />
	<meta http-equiv="content-style-type" content="text/css" />
	<link rel="start" href="./" />
	<script type="text/javascript" src="http://www.google.com/jsapi">
	</script>
		<script type="text/javascript">	google.load("jquery", "1.3.2");
	</script>
	<script type="text/javascript">

	jQuery(document).ready(function(){

	jQuery("div.inline").wrap('<td class="inline"></td>');
	jQuery("td.inline").wrapAll('<table width="950" border="0" id="layout" summary="layout table"><tr></tr></table>');
		jQuery("td.inline:first").addClass("navi").attr("style","width:200px;background:#ccc;");
		jQuery("td.inline:last").addClass("more").attr("style","width:200px;background:#ccc;");

		});

	</script>
	<style type="text/css">
		body{
		text-align:center;
		}
		td{
		vertical-align:top;
		}
		div.inline{
		height:100%;
		}

		#layout,#header,#footer{
		margin:0 auto;
		text-align:left;
		}
		#footer{
		text-align:center;
		}
		.pageLabel{
		width:950px;
		background:#eef;
		height:40px;
		}
	</style>
	<title>Sweet Colmn Layout</title>
</head>
<body>
	<div id="header" class="pageLabel">
		<h1>3column</h1>
	</div>
	<div class="inline">left navigation column</div>
	<div class="inline">
		<p>content</p>
		<p>content</p>
		<p>content</p>
		<p>content</p>
	</div>
	<div class="inline">right extra column</div>
	<div id="footer" class="pageLabel">
		<address>
			<a href="http://d.hatena.ne.jp/tenman/">ミショニポー</a>
		</address>
	</div>
</body>
</html>

諸々

htmlドキュメントの多くは、ナビゲーションリンクを記述したりするためのカラムや、エントリを記述するためのカラムなどから構成されることが多い。

　WEB標準を標榜するコーディングエンジニアは、divエレメントを利用した記述方法を使うことが多いようです。divエレメントを使った場合に、視覚的表現として、それぞれのdivの高さをグループ化（揃える）する方法が必要になることがある。

この方法は、比較的ハードルが高いため、カラムレイアウトのみテーブルエレメントを利用する｢ハイブリッドレイアウト」と呼ばれる手法も存在する。

カラムレイアウトとイコールハイトのための、html css javascriptについてMemoを残す

JavaScriptを使って、複数のブロックの高さを取得して、もっとも高いブロックにあわせてjavaScriptからスタイルを操作する手法。
- javaScriptで揃えるべきブロックの高さを、取得して、最大の高さをそれぞれのブロックに適用する。
- ブラウザのフォントサイズの変更に対応できるものは少ない。文字を拡大した時にブロックを突き抜けるものもある。

CSSのプロパティによって、視覚的な制御を行う手法
- 32000px程度のマージンとパディングを組み合わせた手法
  - 動作に問題がある模様で、普及はしていない。
- ダミーブロックを配置して、見た目に、イコールハイトに見せかけるデザイン手法

CSS3でのdisplayプロパティや、CSS3 モジュール：マルチカラムレイアウトを利用して実現しようとするもの
- 主要ブラウザで実装されているとは限らないので、限定的

ドキュメント内容だけにとどまらず、レイアウトや配色等を総動員して、いわゆる「表現」のために、支払っているコストは少なくない。
それぞれが思い思いのアプローチで、それに立ち向かっているというのが現実ですが、自分もそれに立ち向かう準備をするために、さまざまなサイトを参考に、方法をめぐらしますが、すでに行われている様々なアプローチが、実は、とても高度で、しかもそのような作業が、htmlにとってどうなのかを考えると、少なからず疑問が生まれてくる。

「テーブルタグをデザインのために使うのは、やめよう。」という声に呼応したことによって、制作者の負担は増大していて、何よりも、これから始めようとする人の｢表現」のためのハードルが高くなっているように感じる。

htmlのtableレイアウトは、工夫の極地で、ある意味で完成された技巧だと思う。現在でも、画像のスライスをテーブルを使うのは、珍しくもない。htmlエディタでも、tableの作成の部分は、「作りこまれている感」がある。

テーブルを使えば、イコールハイトと、カラムはとても簡単にできる。

問題は、どこでどう使うかというところで、jQueryから操作してもよさそうな気がしました。

何よりも、簡単な記述ですべてが終わるので、、、