How to multi column design with Style Sheet

HOME > Articles > スタイルシートでマルチカラム・デザインを実現する方法

スタイルシートでマルチカラム・デザインを実現する方法

TABLE要素の弊害

Webページで、左に見出しがあってその横に本文があるようなデザイン(ここでは「マルチカラム・デザイン」と呼ぶことにします。下図参照)を実現しようとすると、現在最も一般的に行われている方法はTABLE要素を用いることです。数あるWebページやHTMLエディタの中には、すべてのデザインをTABLE要素を用いて行うものもあります。

図: マルチカラム・デザインの例

しかし、TABLE要素は本来「表」のためのもので、レイアウトのための要素ではありません。また、レイアウトにTABLE要素を用いると以下のような弊害が生まれます:

ページが表示されるまでに時間がかかる
TABLEに対応していないブラウザでは何も表示されない
複雑なレイアウトを実現できず、画像を用いてその点を補完することになり、制作とメンテナンスにかかる手間と時間が増大する

TABLE要素を用いることによる不具合のより詳細な説明は、水無月ばけらさんによる鳩丸ご意見番 - TABLE でレイアウト調整は？をご覧ください。

ここでは、スタイルシートによってTABLE要素に依らずに容易にマルチカラム・デザインを行う方法をご紹介し、また複雑なレイアウトへの応用のためのヒントも同時にご紹介します。

使い方

以下の例をみてください(以下の例は、CSS1またはCSS2に対応したブラウザでのみ説明通りに表示されます)。

テスト段落1

テスト段落2

テスト段落3

テスト段落4

これは、以下のHTML、CSSによって書かれています:


<div style="width : 30%; float : left; border-style : inset;">
<p>テスト段落1</p>
</div>

<div style="width : 30%; float : left; border-style : inset;">
<p>テスト段落2</p>
</div>

<div style="width : 30%; float : left; border-style : inset;">
<p>テスト段落3</p>
</div>

<div style="clear : left; border-style : solid;">
<p>テスト段落4</p>
</div>

まず、3つの段落が横に並んでいます。それぞれの段落(P要素)は、その段落の親要素(DIV要素)のスタイル指定によって幅がBODY要素の30%になるよう指定されています。これは、それぞれのDIV要素のwidth : 30%;という指定によって実現されています。この、widthの指定だけの場合、それぞれの3つの段落は縦に並ぶことになります。

ここからが重要です。それぞれのDIV要素には、float : left;という宣言が指定されています。これは、その要素を左端に移動させ、その要素の右側に、その次の要素の回りこみを許可するという指定になります。例えばテスト段落1の場合は、マークアップ上の次の段落であるテスト段落2に対して、テスト段落1の右に回りこむことを許可しています。テスト段落3も、同様の指定によってテスト段落2の右に回りこみます。

これで、3つの段落を横に並べることは成功しました。しかし、これ以降は普通に1段組に戻したい場合には、このテスト段落3以降にそのまま要素を続けてもテスト段落4は、やはりテスト段落3の右に回りこんでしまいます。そこで、テスト段落4には、clear : left;という指定をします。そうすると、さっきまで許可されていた右への回りこみ許可が解除され、テスト段落4は通常どおりの位置から表示されます。

問題点

この方法を用いると、TABLE要素を用いる方法より、柔軟なスタイルの指定が可能です。しかもTABLE要素をレイアウトに用いる時のような本来の用途以外の使い方でもありません。

しかし、この方法にも欠点があります。それは、プラウザによって見え方が異なる点です。例えば上の例では、Netscape Communicator4.xでは意図したとおりには表示されません。

ここから先は、HTMLを作成する方針の問題になります。TABLE要素を用いると、確かにInternet ExplorerでもNetscape Navigatorでも同じように表示されます。しかし、TABLE要素をサポートしていないブラウザでは、どう表示されるかまったく不明です。

一方、TABLE要素を用いない場合、今回のような表示上の問題は起こり得ます。しかし、HTMLは見栄えではなく構造を定義する、という原則には則っています。また、DIV要素はHTML3.2でも定義されています。最悪の場合、P要素ならHTML2.0でも定義されているので、上の例のDIV要素をP要素で置き換えることが可能です。その場合、全体の構造とP要素の内容には配慮する必要があります。

このページの内容は、完全に無保証です。全ての環境において、この記事の内容が正しいことを保証するものでもありません。また、この記事の内容について、みなさまがどのような損害／不利益を被られても、私はそれらに対して何らの賠償などを行うものでもありません。しかし、これらの記事についての訂正、質問、苦情、その他ご意見は歓迎いたします。それらに対しては、ぼくのできる範囲で対応させていただきたいと思います。

[Home] [Search] [Site Map]