ようこそ ゲスト さん、新規登録（無料）して気になる疑問を解決しませんか？
はじめての方へ｜ヘルプ｜FAQ
スポンサーサイト（詳細）

質問
質問者：thamansa レイアウトのためにTableを使ってはいけない？
困り度：
  • 暇なときにでも
 「Tableはレイアウト目的で使うべきではなく、レイアウトはCSSで定義するべき」ということについて、
もっともだと思うものの、具体的なやり方がわかりません。
divかspanとclassを使うことは予想できるのですが・・・

次のようなレイアウトの場合、CSSでどのように置き換えるのでしょうか？

<table width="800">
<tr>
　<td colspan=2 width="800">
　ヘッダ領域
　</td>
</tr>
<tr>
　<td width="100">
　メニュー領域
　</td>
</tr>
<tr>
　<td width="700">
　コンテンツ領域
　</td>
</tr>
</table>
質問投稿日時：08/03/28 16:22
質問番号：3902288
この質問に対する回答は締め切られました。
最新から表示｜回答順に表示｜良回答のみ表示

回答

良回答20pt
回答者：exists >「Tableはレイアウト目的で使うべきではなく、レイアウトはCSSで定義するべき」

htmlドキュメントは、文書の構造（例えば、h1-6は、見出しに使うエレメントだし、pは段落をあらわすエレメントです。）が明確になるように記述しようということからこのようなことが言われているので、ドキュメントの内容にふさわしいタグを使うのが大事です。

divを使うとかspanを使わなければならないということはありません。

ただ、質問の内容からすると、ナビゲーション部分と本文を2カラムで人間が見て、見やすくなるように、分けるという趣旨だから、div エレメントを使うのが普通です。

指定の方法は、いろいろありますから、具体的なことを調べるときに覚えておいたほうがいいキーワードをお知らせしておきます。

スタイルの指定は、(float)フロートプロパティや(position)ポジションプロパティを使うことが多いです。

スタイルセレクタは、（class）クラスだけでなく、idも使います。

クラスは、ひとつのページで、同じようなデザインパターンが出現する場合に使います。
idは、そのページで、デザインパターンが1箇所しか発生しない場合に使います。

質問のようなレイアウトは、CSS　2カラムレイアウト　といったりします。
いろいろなサイトで、CSSの指定の仕方を解説しています。
例えば、
​http://www.geocities.jp/multi_column/​


実際にスタイルを適用したときに、必ず発生する問題があります。

ブラウザが、そのプロパティを理解できない事（実装していない）とか、ブラウザのバグです。

その辺の、代表的な問題は、例えば、
ボックスモデル　という言葉をキーワードにして調べてみるとどんな問題なのか把握しやすいはずです。

htmlに戻りますが、スタイルを指定すると、見た目をものすごく自由に変えることが出来ます。でも、スタイルを使用しない場合でも、ちゃんと文書の内容が把握できるような作り方をすると良いと思います。

大抵のブラウザは、スタイルを適用しない。という設定が出来ますので、スタイルはずしたら、みすぼらしいとちょっとはずかしいかも、、、
種類：アドバイス
どんな人：一般人
自信：参考意見
回答日時：08/03/28 19:28
回答番号：No.3
この回答へのお礼ご紹介いただいたサイトを読みました。
テーブルの置き換えにabsoluteを使うことについてはちょっと抵抗を感じていたのですが、フロートの解説でよくわかりました。IEでのバグがあり、意図しない表示になること。
レイアウトはCSSをつかうべきだけどもまだテーブルも多くつかわれるとどこかで読んだのですが、その理由も納得です。
勉強になりました。ありがとうございました。

回答

 
回答者：suzuko ＃１さんの補足。

<body>
<div id="table1">
<div id="boxR">
コンテンツ領域
</div>
<div id="header1">
　ヘッダ領域
</div>
<div id="boxL">
メニュー領域
</div>
</div>
</body>
</html>

の方が、アビリティが高いでしょう。

出しゃばりでした。^^;
種類：アドバイス
どんな人：一般人
自信：参考意見
回答日時：08/03/28 18:00
回答番号：No.2
この回答へのお礼この回答にお礼をつける(質問者のみ)

回答

良回答10pt
回答者：auty 簡単な１例を挙げてみます。

width="800"　(700,100)とあるのを考慮して

以下のコードを参考にしてみてください。
------------------------------------------------------------
<html>
<head>
<title>Webサイト</title>
<style type="text/css">
<!--
#table1 { /* 親ボックス */
width: 400px;
height: 200px;
background-color: #FFEAEF;
position: absolute;
top: 50px;
left: 100px;
}

#header1 {
width: 400px;
height: 100px;
top: 50 px;
left: 150 px;
background-color: #88EAEF
}

#boxL { /* ボックス左 */
width: 100px;
height: 100px;
background-color: #ffffff;
position: absolute;
top: 100px;
left: 1px;
}

#boxR { /* ボックス右 */
width: 300px;
height: 100px;
background-color: #ffffcc;
position: absolute;
top: 100px;
left: 100px;
}
-->
</style>
</head>
<body>
<div id="table1">
<div id="header1">
　ヘッダ領域
</div>
<div id="boxL">
メニュー領域
</div>
<div id="boxR">
コンテンツ領域
</div>
</div>
</body>
</html>
種類：アドバイス
どんな人：経験者
自信：参考意見
回答日時：08/03/28 16:48
回答番号：No.1
この回答へのお礼position: absolute; がポイントで絶対位置で指定する方法ですね。
ご回答ありがとうございました。
 
最新から表示｜回答順に表示｜良回答のみ表示
スポンサーサイト（詳細）
このページのトップへ