pyridoxin's Weblog

リキッドレイアウトで2カラム

各ブラウザを考慮したCSSレイアウトはCSSによる段組（マルチカラム）レイアウト講座が詳しい。ここではリキッドレイアウトで2カラムを実現する方法について話します

まずリキッドレイアウトというのはこのブログのように幅が可変(具体的にはwidthが%指定の)なレイアウトであることだ。対になる固定レイアウトに比べてさまざまな画面で空白なしで情報を詰め込むことができる反面レイアウトデザインが非常に困難

本題に入っていくがレイアウトの前にHTML(XHTML)がvalidであることを確認してほしい。Markup Validation Service。当たり前の話だが正しく書かれていないソースにいくら適切なレイアウトを心掛けたところでそれは無駄な努力だからだ

すぐに思いつくのはfloatであるが2カラムを実現しようとして両方にfloat:left;を指定した場合css2.1の仕様では次のboxが下に回り込むことを許しているので注意して欲しい。つまり上下にレタリングされることも仕様として正解だし実際そういうブラウザも存在する。だから左の要素にはfloat:left;、右の要素にはfloat:right;を指定した方がよい。widthは合計で100％にすると少しはみ出るので99％以下にしよう

Yの部屋はそのようにレタリングされているがY日記、イラストは違う。｢おいこら｣といわれるかもしれませんがposition: absoluteでleft:73%;とか左側の位置を指定するのも違う方法として存在している。方法は一つではない。実際に様々なブラウザで試すことが重要だ。もちろん CSS 2.1 Specificationは理解して当然だが･･･

テーマ:(X)HTML/CSS - ジャンル:コンピュータ

1. 2007/01/30(火) 01:26:27
2. xhtml
3. リキッドレイアウトで2カラムのトラックバック：0
4. リキッドレイアウトで2カラムのコメント：0