3カラムレイアウトで、中央を可変にするCSS(リキッドレイアウト)

カテゴリ:CSSテクニック 2006年7月10日 16:19

すべて固定幅の 3 カラム構成はよく見ると思います。
しかし、左と右にメニューなどを置き、真ん中だけ可変(リキッドレイアウト)にしたい場合もあると思います。
マイナス値のmarginによる現象を利用してこれを実現しちゃいましょう。

3 カラムレイアウトで、中央を可変にする(リキッドレイアウト)デモ

▼EntryMore▼

さて、とある記事でこれを見つけて、かなりびっくりさせられました。
まず簡単に言ってしまうと、marginのマイナス値を、幅以上に設定すると、floatしたボックスはなぜか HTML 上で上に書かれているボックスに重なります。
メインの CSS はこんな感じです。

ポイントは、真ん中の部分を#containerInner #contentsのふたつで囲み、#containerInner にのみfloatを設定しているところです。

イメージで言うと、まず 3 行の文章を想像してください。
普通に考えれば、書かれた順に上から文章が 3 行になりますよね?
これが CSS を指定する前の html だと思ってください。
そして、1 行目が中央部分、2 行目が左、3 行目が右の要素となります。

さて、普通のワープロなどでは現在編集中の箇所を示すカーソルが点滅してますよね?
それを、2 行目の先頭に持ってきてください。どうなりますか?
当然、2 行目の先頭でカーソルが点滅しますよね。

さて、その状態で左ボタンを押してみてください。カーソルはどうなりますか?
1 行目の一番後ろに移動しますよね?
これがmarginのマイナス値のイメージです。

ただ、マイナス値が幅以下の場合はただ左にずれるだけになります。
しかし、これを幅以上に設定すると、なぜか左にずれていたものが消え、上のボックス(上の説明では 1 行目の文章の一番後ろ)に出現します。ソースで言うと

てな感じです。
でもこの場所に出現されても左側になっていないので困りますね。
では一番左側にきてもらいましょう。

これで無事、一番左に表示されました。
ただ、これだと真ん中のボックスに書かれている内容にかぶさってしまうので真ん中の要素のmarginを左右200pxに設定して回避しましょう。
(右も設定するのは、このあとの右側のボックス分の余白も取るためです)

これで左部分と真ん中の部分がうまく表示されました。
次に右側の部分です。
この状態でブラウザで表示させると右側にしたい部分が上のボックスのすぐ下の左側によっていると思います。

これは左部分と右部分にfloat:leftを設定していて、かつ左側のボックスが上に逃げちゃってるので右側のボックスが左に詰まった(floatした)状態になっているためです。

この右側のボックスも上に持っていきたいですよね。
これも、結局左側のボックスと同じ原理です。
さっき上で左側のボックスが右側にきて困った、と書きましたよね?
これをそのまま右側のボックスに設定すれば、今度はしっかり右側に表示されることになっちゃいます。

これで完成です。

真ん中のボックス部分は普通に背景やボーダーを設定できます。
ただ、ここで注意があります。
WnIE の場合、幅の認識が違うため、margin-left: -100%としてもうまく動きません。
(一番外側のボックスが 100% なら問題ありませんが)
これは、親ボックスを基準にした 100% ではなく、bodyを基準にしたサイズになるからと思われます。
なので、一番外側の div 要素の幅(サンプルでは 80%)に合わせて指定します。

最終的な形は上のようになります。
_margin-leftはアンダースコアハックと呼ばれるハックです。
(ハックについては現在作成中なのでしばしお待ちを)
以上が、3 カラムで真ん中の要素を可変にする方法です。

ちなみに参考にしたサイトは layout gala です。(英語ですが...)

この記事のカテゴリー一覧を見る⇒CSSテクニック

  • このエントリーをはてなブックマークに追加

トラックバックURL

http://css-eblog.com/cgi-bin/mt/mt-tb.cgi/14

トラックバック

3段組(メインコンテンツ・リキッド)レイアウトの作り方

このブログは3段組で、メインコンテンツの幅が可変のレイアウトになっています。r下記のサイトを参考にさせていただいて、このブログで用いているレイアウトの解...

byWorld of granshe. 2008年5月16日 22:42

コメント

1 - きっぴ さん

えどさん、英語もご堪能なんですねぇ、はぅ。(ため息)nwebを勉強していると、よく英語のサイトに行き着きますが、もうちょっと、英語力があれば・・・(>−<)と学生時代の自分を呪います。

2006年7月13日 10:07

2 - えど さん

いや…wほとんど読めませんよwただ、英語でも自分の知ってることを主題としたものだとなんとか意味が分かるかなーって感じですwなので、それを励みにがんばって読んでます(*'-')いずれは普通に英語サイト読めるようになりたいなぁと願いつつ…。

2006年7月13日 13:28

3 - LINDO さん

勉強になりました。使わせていただきます!

2009年5月22日 11:11

4 - えど Author Profile Pageさん

>>3 - LINDOさんコメントありがとうございます。nぜひぜひ使ってやってください(*'-')

2009年5月22日 14:57