Hatena::ブログ(Diary)

ミショニポー このページをアンテナに追加 RSSフィード

Feedback

Menu Tags

2009-10-04

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

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


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

DEMO

ところで、




イコールハイトとは、

f:id:tenman:20091004220755j:image

上の画像は、3カラムレイアウトと思ってほしい、左3列のページを右3列のページのように高さを揃えること。

例えば、背景画像を使っていたりする場合に、同じ高さでないと見栄えが悪いということがある。

ブログなどの場合に、ナビゲーションリンクの数等は、変化するので、あらかじめ高さを指定しておくのが困難。

また、単にjavaScript等で、最大の高さを取得するだけでは、フォントサイズを変更した時などに、ブロックからコンテンツがはみ出すということがおきる。

だから、cssや、javascriptで何とかしようとする。



カラム落ち

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




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

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




<?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から操作してもよさそうな気がしました。

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




参考サイト

投稿したコメントは管理者が承認するまで公開されません。

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証

トラックバック - http://d.hatena.ne.jp/tenman/20091004/p1
TOP
keywordcloud
人力検索はてな はてなアンテナ はてなブックマーク はてなダイアリー はてなフォトライフ はてなグループ はてなグラフ はてなアイデア はてなスター はてなメッセージ はてなワールド はてなハイク Rimo
ページビュー
788071

サービス

メモや備忘

ナンダーリン カンダリーン

カレンダー
<< 2009/10 >>
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
プロフィール

最近のコメント

砂場