ページのレイアウト

最近デザインとかレイアウトの問題が目立つので、ちょっと書いてみます。ホームページのデザインにTABLEを多用するのは邪道とか言う意見が多いので、DIVで作成しようとした。ところが、これが難しいのだ。

DIVはTABLEのように区画を区切れないので、デザイン要素を様々なサイズの四角形を作成し配置するのだが、マージンやパディングを使用すると、表示サイズがずれたり、回り込み等上手くいかない、中央表示が困難で、結局TABLEの様に入れ子にするケースが多くなりました。

ただ、DIVで作成する場合、縦横サイズをしっかり指定すれば、かなり上手く配置できることがわかりました。問題は、CSSスタイルシートを使う場合、縦サイズが異なるページでは、別クラスや別IDを作成したりするので、かえって煩雑になります。

そこで、全てのページの縦サイズを固定し、超える場合は、次ページを作成する形にするのがベターかもしれません。DIVによるレイアウトに関する情報を集めていたら、こんどは、DIVでデザインしても入れ子が多いならTABLEと変わらないと言った意見が多く出てきた。

つまりどちらでもいいんじゃないの？でも、同じなら、TABLEは本来の表として使用してレイアウトはDIVで作成する方が良いような気がします。

左の図は、一番外枠はブラウザーを意味するテーブルの枠です。

中の破線のエリアはDIV要素で、レイアウトを作成したイメージです。

<div style="border: 1px dotted #008000">
ヘッダー</div>
<div style="border: 1px dotted #008000;
width:53px; height:112px; float:left">
メニュー</div>
<div style="border: 1px dotted #FF0000;
 width:210px; height:114px">
ドキュメント</div>
<div style="border: 1px dotted #0000FF; ">
フッター</div>

この場合では、ブラウザーのサイズが指定した横サイズより大きいと、後の要素が、全て右上に回り込んで嶋します。そこで、全体のサイズを指定する枠を最初に指定すると、ブラウザのサイズによってレイアウトは崩れることはありません。

<div style="border: 3px dotted #000080;padding:6;
width:287px;height:176px">
レイアウト外枠<div style="border: 1px dotted #008000;
background-color:#E7FF9B">
ヘッダー</div>
<div style="border: 1px dotted #008000; width:53px; height:112px;
float:left; background-color:#80A0FF">
メニュー</div>
<div style="border: 1px dotted #FF0000; ; width:210px; height:114px;
background-color:#E8E8FF">
ドキュメント</div>
<div style="border: 1px dotted #0000FF; background-color:#E3C700">
フッター</div>
</div>

テーブルのサイズを大きくしても、一番外枠のDIVで指定したサイズに変更が無いために、レイアウトは維持されています。結局DIVでレイアウトすると、DIVだらけで、これをDIV病と呼ぶそうです。

HOMEHTMLWebサイトを持とうページレイアウト

Webサイトを持とう

SEOアクセス向上

雑学

広告