Hatena::agenda

CSS、HTML、XHTML、XML、DOM、XSLT、XPath、ECMAScript、Python、ウェブユーザビリティ、その他に関連する文書等のリソースを挙げていったりします。より本質的な議論を志向。
注意:Hatena::agendaの更新は終了しています!過去の記事はagenda のホームページよりどうぞ。今後の更新情報の取得は、agendaのフィード(XML/Atom)から。

 | 

2007-09-07 今でも簡単にできるリキッドレイアウトを模索する

Hatena::agenda - 本物のリキッドレイアウトの具体化。

リキッドレイアウトは動的なスタイルシートによって実現する。CSS2は閲覧環境に応じてある程度柔軟な変化を提供するが、まだ充分ではない。今現在でもJavascriptの助けを借りれば、本物のリキッドレイアウトに近づけることはできる。

リキッドレイアウトを助ける主なstuffは、今のところ次の四つ。

  • 1. CSS2のfloatプロパティ本来の使い方
  • 2. CSS2のfloatプロパティでのページレイアウト
  • 3. CSS2のtableでのページレイアウト
  • 3. CSS3のマルチカラムの先行実装

1. CSS2のfloatプロパティ本来の使い方

floatプロパティは「サイドバー」を表現するために作られたのでは、ない。テキストが回りこむ浮動オブジェクトを描くのがfloatプロパティの本来の姿である。しかし例えばあるテーブルにfloatプロパティを指定したとき、たとえそれがウィンドウの幅の8割を占めていても、テキストは回りこんでしまう。すると一行が異常に短くなってしまうことがあり、読みづらいことこの上ない。充分に小さなテーブルや画像に対してのみfloatを指定したいが、どの程度が充分に小さいかを製作者が判断することはできない。

この問題を解決するために、動的にスタイルシート(クラス名)を変更する。ウィンドウ幅に対して半分以下の幅をもつtableなら浮動オブジェクト化し、そうでなければ浮動させないようにすればいい。イメージとしてはこのようなスクリプトだ。

function optimizeLayout(){
	var w = document.documentElement.clientWidth;
	for each(let e in document.selectNodes("descendant::table"))
		e.className = e.clientWidth/w < 0.5 ? "FloatingObject" : "";
}

window.addEventListener("resize", optimizeLayout, true);
window.addEventListener("load", optimizeLayout, true);

半分というのは単純化のための例に過ぎず、より良いリキッドレイアウトを追求するなら「ウィンドウ幅の残りが20em以上」のような計算が必要である。フォントサイズがユーザーの好みに応じて可変となり得るメディアにおいては、width(幅)の概念は一文字の大きさが基準となる。

2. CSS2のfloatプロパティでのページレイアウト

イメージとしてはこのような構造だ:

<body>
    <div class="container">
        <div class="contents" href="contents.xht" rel="contents"></div>
        <div class="main">本文</div>
        <div class="appendix" href="appendix.xht" rel="appendix"></div>
    </div>
</body>

もちろんdiv要素にhref属性などない。言いたいのは「埋め込むな。参照せよ。」ということだ。実際には目次や付録はlink要素でリンクしておき、必要となった時に埋め込む。

  1. CSSのem単位に相当するpx値を計算する
  2. メイン領域(div class="main"; max-width: 30emの指定あり)の幅が30em以上となり、左右の余白が15em以上となったところで、contentsとしてリンクされているXML文書をdiv要素(div rel="contents")内にロードし、左側に浮動させる。
  3. さらに余白が15em以上となった時、appendixとしてリンクされているXML文書をdiv要素(div rel="appendix")内にロードし、右側に浮動させる。

15emとか30emという値、右側、左側というのは一例に過ぎない。

3. CSS2のtableでのページレイアウト

2.とほぼ同じだが、floatではなくより適切なdisplay: tableを利用しようということ。

4. CSS3のマルチカラムの先行実装

本文部分のブロック要素の高さの合計値が表示領域の高さ未満であったなら、本文部分を包括するdivブロックに対して-moz-multi-column-widthを指定する。しかしそのような適切なdivブロックが常にあるとは限らない。

長文の場合、本文部分のブロック要素(主にp要素)のshrink to fitした場合の「面積」を順々に加算していき、表示領域の面積を超えない範囲でdiv要素で包括するというプロセスが必要となる。

逆に短い文章、小さなコンテンツはマルチカラム化できない。表示領域の高さに対し30%未満の場合、前述の2.と3.の方法で外部リソースをロードした方が良い。

 |