A List Apart - Faux Absolute Positioning

CSSでポジションを指定する方法は大きくわけてfloatを使う方法と絶対位置で指定する2つの方法がある。多くのサイトではヘッダとフッタを伴うカラムレイアウトを採用していることが多い。絶対位置指定では縦方向にコンテンツが成長するタイプのレイアウトでフッタの位置を指定できないという問題がある。このためfloatレイアウトを使うわけだが、こちらでは予期しないコンテンツの内容変更によって予定していたポジションからずれてしまうことがある。とくにIEではwidthの挙動に問題があるため制御するのがきわめて難しいという状況だ。

Eric Sol氏はこうした現状に対して新しい指定手法を考案したとし"Faux Absolute Positioning"としてA List Apartにおいて紹介している。同氏はより自由にドラッグ&ドロップでフォームを作成できるWebアプリケーションを開発する必要があり、同じくA List Apartで紹介されているIn Search of the Holy Grailの手法を使ったり絶対位置の手法を使ってみたものの、どちらも満足する結果は得られなかったとしている。

最終的に同氏はposition: relative、left: 100%、マイナス値のmargin-left指定を使って固定位置から左部オフセットを計算する方法を手法として採用したとしている。実際にどのように使うのかはFaux Absolute Positioningに掲載されているサンプルを見るのがわかりやすい。描画の対象エリアとなるcanvas、ベースラインとなるline、コンテンツを納めるitem、実際にコンテンツが入るitem1といったようにdiv要素を用意し、それぞれをCSSで位置指定する。item1でのmargin-left指定がマイナス値となる。

Faux Absolute Positioningベース要素 - 同ドキュメントより抜粋

Faux Absolute Positioning CSS指定の例 - 同ドキュメントより抜粋

上記例で表示される要素の位置 - 同ドキュメントより抜粋

HTML 4.01/CSS 2.1に準拠した記述になっているし、margin-leftのマイナス値指定は多くのブラウザが実装している。さらにこの方法はIE6の再描画バグを回避するほかパディングを容易にし、しかもposition: overflowも使えるようになる。さらに右をベースとして指定しているため、コンテンツが幅を越えてしまった場合でも右サイドに回り込んでそれほど邪魔にならないという特徴もある。至れり尽くせりというわけだ。

"Faux Absolute Positioning"はグリッドベースデザインをベースに考案されているため、自由な幅を持つ2カラムレイアウトには適用しない方がいいとされている。またこのテクニックは最近のブラウザやWindowsのIE5.5でも動作するが、MacOSでのIE5では正しく動作しない。すべての適用できる手法ではないが、コンテンツが縦に成長するタイプやグリッドベースのレイアウトでは便利に扱える方法だ。Webデザイナはひとつの手法として同方法を検討してみるとよさそうだ。