CSSでリキッドレイアウトを実現する。その2: ポルカの日記

<< CSSベースのHTMLコーディング　その6 | TOP | CSSベースでのHTMLコーディング順序　その1 >>

2008年03月05日

CSSでリキッドレイアウトを実現する。その2

今回は
CSSベースで、テーブルライクな
究極（？）のマルチカラムに挑むパート2です。

テーブルメインのレイアウトでよく使われている、
リキッドレイアウトをCSSで実現してみます。

今回のミッションもパート1同様、
ブラウザ画面いっぱい（つまり<body></body>に対してwidth: 100％) に、
自在に伸縮できるマルチカラムレイアウトを考えることです。

レイアウトの真ん中部分が伸縮自在な3カラムの
ネガティブマージンを使ったバージョンです。

▽CSSベースのHTML
レイアウトの真ん中部分が伸縮自在な3カラム
------------------------------------------------------------
＜例＞

手前省略
<body>
<div id="box1">

<div id="s-2">真ん中のボックス</div>
<div id="s-1">左のボックス</div>
<div id="s-3">右のボックス</div>

<br class="clear">
</div>
</body>
以下省略

［スタイルシート］
【bodyに対して】
width: 100%;

【box1】…外側ボックス（省略可）
width: 100%;　//横幅100%にしてブラウザ画面いっぱいに広がるボックスを作る。

【s-1】…レイアウトに使用する左側ボックス
float: left; width: 160px; margin-left: 0px; margin-right: -100%; //左にフロート（横並び）・横幅180pxで固定・左間隔0px・右間隔-100％

【s-2】…レイアウトに使用する、伸縮自在の真ん中のボックス
float: left; width: auto; margin-left: 180px; margin-right: 180px; //左にフロート（横並び）・横幅は自動（伸縮可能）・左側、右側に180pxの間隔を空ける

【s-3】…レイアウトに使用する右側のボックス
float: left;　width: 160px; margin-left: 0px; margin-right: -200px; //左にフロート（横並び）・横幅160pxで固定・左間隔0px・右間隔200px

【clear】フロート（横並び）を解除する。
clear: left //左のフロート（横並び）を解除

※id名やclass名は任意です。

Mac Safari3.0, FF2.0
Windows IE6.0 FF2.0 で確認
------------------------------------------------------------

この方法とパート1との違いは、
3つのボックス全てをフロートさせている点と、
左右の2つのボックスに、ネガティブマージンを設定している点です。

ただ、真ん中のボックスはHTMLソース上は、
左右のボックスより上に持ってくる必要があります。

また、左右ボックスのネガティブマージンの値を入れ替えることで、
画面上の配置を左右入れ替えすることができるので、

ページによって左右を入替し、なおかつボックスの横幅の比率を変えて、
サイト内のカテゴリの違いを明確化するなど、
使い方によっては、面白い見せ方を生み出せるかもしれません。

▽　▽　▽　▽　▽　▽　▽　▽　▽　▽　▽　▽　▽　▽　▽

簡単なHTMLを組めるようになったくらいで、
CSSに挑戦！　という頃からお世話になってる本です。

タグ、CSSともに、項目別に整理が行き届いており、
簡単なサンプルがついているので、非常にわかりやすかったです。

なにより、
本のレイアウトがシンプルで見やすく、
読みやすいのがナイスです。

これで、開きっぱなしにできたら最高なんですけど…

最新版は、かなりボリュームがたっぷりで、
分厚くなったな～　と思います。

まだ、この手のリファレンス本を
買われていない方がいらしたら、
購入検討されてはいかがでしょう。

△　△　△　△　△　△　△　△　△　△　△　△　△　△　△　

タグ：CSS HTML マルチカラム

【CSS実験室の最新記事】

posted by CSSベースでのHTML（XHTML）レイアウト入門講座＜polka＞ at 08:39 | CSS実験室 |

ポルカの日記 | CSSベースのHTMLレイアウト入門講座

2008年03月05日

CSSでリキッドレイアウトを実現する。その2