CSSレイアウト

CSSレイアウトについて解説します。

HTMLタグ(要素)はブロック要素とインライン要素に大別できる

CSSレイアウトをする時に意識する必要があるのが、ブロック要素とインライン要素の違いについてです。ブロック要素とはタグを内包できるタグで、具体的にはh1タグやpタグなどです。インライン要素はタグを内包できないタグで、具体的にはspanタグなどです。

基本的にブロック要素を横に並べることはできない

下のHTMLではpタグ(ブロック要素)とspanタグ(インライン要素)を使っています。これをブラウザで表示させると、<p>1</p>と<p>2</p>の間で改行されます。一方<span>1</span>と<span>2</span>並んで表示されます。これはブロック要素を横に並べることができないということを示しています。

<html>
<head>
<style type="text/css">
* {margin:0;padding:0}
</style>
</head>
<body>
<p style="background:red">1</p><p style="background:yellow">2</p>
<hr>
<span style="background:red">1</span><span style="background:yellow">2</span>
</body>
</html>

なぜインライン要素だけでレイアウトしないのか

多くのウェブページでは要素を箱に見立ててレイアウトします。画面上、左の箱をメニュー部分にして、右の箱を本文部分にする、といったような。箱を横に並べるというのは、レイアウトを考える際には重要です。横に並べられないと論文のようなウェブページしか作れません。

ブロック要素を横に並べることができないので、普通に考えればインライン要素を箱に見立てることになります。しかし、インライン要素を箱とするには重大な欠点があります。それはインライン要素は幅(と高さ)を指定できないことです。

<html>
<head>
<style type="text/css">
* {margin:0;padding:0}
</style>
</head>
<body>
<p style="background:red;width:100px">1</p><p style="background:yellow;width:100px">2</p>
<hr>
<span style="background:red;width:100px">1</span><span style="background:yellow;width:100px">2</span>
</body>
</html>

幅(と高さ)を指定できないということは、左の箱はメニューなので場所を取らないように150px、右の箱は本文なので情報量を多く取りたいので700px、といったようなレイアウト指定ができないということです。これではまともなウェブページは作れません。

ブロック要素をどうしても横に並べたければfloatかpositionを使う

では、ブロック要素を横に並べる方法が全くないかといえば、実はあって、floatかpositionを使います。 float:leftを使って左寄せのレイアウトをした例が以下です。

<html>
<style type="text/css">
* {margin:0;padding:0}
</style>
<body>
<p style="background:red;width:100px;float:left">1</p><p style="background:yellow;width:100px;float:left">2</p>
</body>
</html>

しかし、これはこれでいろいろと問題があります。一例を上げると以下です。

<html>
<body>
<ul style="background:red">
<li style="float:left;width:50px">1</li>
<li style="float:left;width:50px">2</li>
<li style="float:left;width:50px">3</li>
</ul>
<br style="clear:both">
<hr>
<ul style="background:red">
<li style="width:50px">1</li>
<li style="width:50px">2</li>
<li style="width:50px">3</li>
</ul>
</body>
</html>

上のulタグでは背景色の赤が表示されていません。下のulタグでは赤が表示されます。これは上びulタグの中にはfloatしたliタグしかなく、結果的にulタグの要素に高さが発生しないからです。下のulタグの中にはfloatしてないliタグが入っており、高さが発生しています。

この他にも込み入ったレイアウトだとfloatの設定と解除の指定が煩雑であるとか、widthを指定したくないのに指定しなければいけないであるとか、ブラウザに互換性がないなどの問題があります。positionについても結局は同様です。

TABLEレイアウトを適時使う

こうして見てみるとCSSで複雑なレイアウトを実現するよりTABLEレイアウトの方がいいという場面もあります。よくあるのが、左にラベル、右にinputタグを置くようなフォーム画面です。以下がその例です。

 お名前: [    ]
  年齢: [    ]
都道府県: [    ]

特にラベル内の文字を右寄せにしたい場合は、これをCSSで実現するとかなり面倒な記述になります。TABLEでレイアウトすれば簡単な記述で済みます。最近のウェブサイトですとCSSを使うのが当たり前になってきてますが、そのようなサイトでもこういうフォーム画面では例外的にTABLEレイアウトを採用している場合が多いです。

以上でCSSレイアウトを解説しました。現状のCSSでは基本的にマルチカラムレイアウトはサポートされていません。現状のCSSでマルチカラムを実現しようとすると、無理をせざるをえません。あまり無理をするくらいなら、TABLEレイアウトを使った方がいいのではないか思います。個人的に言うと、ブロック要素を4個以上並べる場合はまよわずTABLEレイアウトを選択します。


トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS

Last-modified: 2007-09-24 (月) 21:47:26 (4096d)