HTML：区画のレイアウトについて

質問

HTMLで区画のレイアウトをするとき、通常基本的なものから複雑なものまで、<table>や<div>を使うのが一般的なんでしょうか？
下の図は、■が境界線で、□が画像や文章を配置する区画です。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
■□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□■
■□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□■
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
■□□□□■□□□□□□□□□□□□□□□□□□□■□□□□□■
■□□□□■□□□□□□□□□□□□□□□□□□□■□□□□□■
■□□□□■□□□□□□□□□□□□□□□□□□□■□□□□□■
■□□□□■□□□□□□□□□□□□□□□□□□□■□□□□□■
■□□□□■□□□□□□□□□□□□□□□□□□□■□□□□□■
■□□□□■□□□□□□□□□□□□□□□□□□□■□□□□□■
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
■□□□□□□□□□□□□□□□□■□□□□□□□□□□□□□■
■□□□□□□□□□□□□□□□□■□□□□□□□□□□□□□■
■□□□□□□□□□□□□□□□□■□□□□□□□□□□□□□■
■□□□□□□□□□□□□□□□□■□□□□□□□□□□□□□■
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

回答よろしくお願いします。

回答No.1

leap_day · ベストアンサー

こんにちは

<table>は表内を読み込んでから表示されるのであまりレイアウト用には使わないほうがいいと思います

<style type="text/css"><!--
.float { float:left; }
#main { width:806px; }
#head { width:804px; height:50px; }
#midleft { width:200px; height:200px; }
#midcenter { width:400px; height:200px; }
#midright { width:200px; height:200px; }
#btmleft { width:502px; height: 100px; }
#btmright { width:300px; height:100px; }
div { border:1px solid; }
--></style>
<div id="main">
<div id="head">上部</div>
<div id="midleft" class="float">中部左</div>
<div id="midcenter" class="float">中部中</div>
<div id="midright" class="float">中部右</div>
<div style="clear:both;"></div>
<div id="btmleft" class="float">下部左</div>
<div id="btmright" class="float">下部右</div>
<div style="clear:both;"></div>
</div>

※width
必要です。全体、上部、中部、下部のwidth合計は一致させてください
『全体』
#main 806px
『上部』
#head 804px
#head border 1px*2
合計　806px
『中部』
#midleft 200px
#midcenter 400px
#midright 200px
それぞれのborder　(1px*2) *3
合計　806px
『下部』
#btmleft 502px
#btmright 300px
それぞれのborder　(1px*2) *2
合計　806px
という風に（それぞれのdiv内でそのdivのwidthを超えるwidthを設定すると幅が広がりレイアウトが崩れますので注意して下さい）

※height
便宜上つけてます。必要なければ省略してください

※div { border:1px solid; }
コンテンツ内に別に<div>があるときにはそちらにもborderがつくので

#***それぞれのCSSに付け加える

もしくは

<div id="head">にもclass="float"をつけて .float{ }内に付け加えてください
この際には上部と中部左の間に<div style="clear:both"></div>も付け加えるか
<div style="clear:both"></div>（中部右と下部左の間）を削除して#midleft、#btmleftを　class="float2"　などのようにして
.float2 { clear:both; float:left; border:1px solid; }
にする手もあります

お礼

なるほど。<div>がいいんですね。<table>は、読み込むのに時間がかかるということでしょうか。
スタイルシートの例を書いていただきありがとうございます。
参考にさせていただきます。

ありがとうございました。

回答No.2

kazumero

tableは表作成用のタグなので、レイアウトはdivを用います。
参考URLを参考にしてみてください。

参考URL：

http://desperadoes.biz/style/dan/index.php

お礼

やはり<table>ではなく、<div>を使うんですね。
参考にさせていただきます。

ありがとうございました。