<< CSSベースのHTMLコーディング　その5 | TOP | CSSベースのHTMLコーディング　その6 >>

2008年02月26日

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

エントリー順に行くと、CSSの利用メリットを書くところでしたが、
向きを変えて、テーブルメインのレイアウトでよく使われている、
リキッドレイアウトをCSSで実現してみます。

と、いうのも、
お仕事仲間である、
万年青年のルイス兄さんから、
------------------------------------------------------------
画面いっぱいに広げられるマルチカラムを
CSSだけで、できるんやろうか？
------------------------------------------------------------

と、聞かれ、
とりあえず、テーブル使う方が早いッスよ、
と答えたものの、

職人としてこれでエエのか、
と思うところもあり、

都度都度、ふと思うあっても使うことがなかったのと、
これ！　といった、記述法をサクっと見つけられなかったので、
めんどくさくて、ほったらかしにしていた疑問を解決するべく、
CSSベースで、テーブルライクな
究極（？）のマルチカラムに挑んでみました。


通常、マルチカラムをCSSで行う場合は
フィックスレイアウト、つまり下記の例のように、
横幅を固定したレイアウト用ボックスを配置することがほとんどです。

▽CSSベースのHTML
レイアウトが固定の3カラム
------------------------------------------------------------
＜例＞

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

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

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


［スタイルシート］
【box1】…外側ボックス
width: 760px; //横幅760pxで固定

【r-1】…レイアウトに使用する左側ボックス
float: left; width: 160px; //左にフロート（横並び）・横幅180pxで固定

【r-2】…レイアウトに使用する真ん中のボックス
float: left; width: 400px; margin-left: 20px; //左にフロート（横並び）・横幅400pxで固定・左側に20pxの間隔を空ける

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

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


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



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

まずは、よく見られる
レイアウトの真ん中部分が伸縮自在な3カラムを
以下のように考えてみました。

今回は、positionよりは扱いやすい、
floatを使用してみました。



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

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

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

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


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

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

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

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

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

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


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

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


通常、マルチカラムをCSS、特にfloatで実現する場合は、
HTMLソース上での各レイアウトボックスの並びを
「左→中→右」や「右→中→左」と連続させるようにして
floatの、言うなればチームを作りますが、

上記例では変則的にソース順を「左→右→中」とし、
さらに「中」ボックスにfloatの記述をしていません。

しかも、「中」ボックスには左右の間隔を
「左」および「右」ボックス＋20px＝180px
空けています。

これは「中」ボックスが、
「左」「右」の、floatチームから独立している状態なので、
もし、「左」「右」のボックスがなくても、画面の同じ位置に表示されます。
反対に「中」ボックスがなくても「左」「右」のボックスは同じ位置に表示されます。



上記の真ん中のボックスは、分割も可能です。

▽CSSベースのHTML
レイアウトの真ん中部分が伸縮自在な3カラム
さらに真ん中部分を50％ずつで左右に分割
------------------------------------------------------------
＜例＞

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

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

<div id="s-2">
<div id="mini-1">真ん中のボックスを分割：左</div>
<div id="mini-2">真ん中のボックスを分割：右</div>
<br class="clear">
</div>

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


［スタイルシート（追加分のみ）］
【mini-1】…レイアウトに使用する、伸縮自在の真ん中のボックスを分割した左側ボックス
float: left; width: 50%; //横幅は親ボックス（真ん中のボックス）に対して50%（伸縮可能）

【mini-2】…レイアウトに使用する、伸縮自在の真ん中のボックスを分割した右側ボックス
float: left; width: 50%; //横幅は親ボックス（真ん中のボックス）に対して50%（伸縮可能）

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


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

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


あとは、罫線（border）や背景表示（background）を利用して、
全てのボックスが、同じ量だけ下に伸びているようにすれば、
リキッド3カラムのできあがり、です。

ただし、この方法だと、
真ん中のボックスは、HTMLソース上で、
floatさせる左右のボックスより、必ず下にしなければいけないので、
ソースの順序入替（レイアウトブロックの記述順序入替）を行って、
SEO効果を上げるCSS利用のメリットは封印、となります。

この方法以外にも、CSSリキッドマルチカラムを実現するのに、
ネガティブマージン（margin: -数値）を利用する方法なども、
使えそうなので、順次研究していきたいと思います。



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

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

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

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

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

最新版はまだみていませんが、
きっと方向性は保たれているだろう、と思います。

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




△　△　△　△　△　△　△　△　△　△　△　△　△　△　△　
タグ：CSS HTML リキッドレイアウト マルチカラム
【CSS実験室の最新記事】
posted by CSSベースでのHTML（XHTML）レイアウト入門講座＜polka＞ at 09:20 | CSS実験室 | このブログの読者になる | 更新情報をチェックする

人気ブログランキングへにほんブログ村 デザインブログ Webデザインへ

×

この広告は90日以上新しい記事の投稿がないブログに表示されております。