- ベストアンサー
レイアウトのために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>
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
>「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に戻りますが、スタイルを指定すると、見た目をものすごく自由に変えることが出来ます。でも、スタイルを使用しない場合でも、ちゃんと文書の内容が把握できるような作り方をすると良いと思います。 大抵のブラウザは、スタイルを適用しない。という設定が出来ますので、スタイルはずしたら、みすぼらしいとちょっとはずかしいかも、、、
その他の回答 (2)
- suzuko
- ベストアンサー率38% (1112/2922)
＃１さんの補足。 <body> <div id="table1"> <div id="boxR"> コンテンツ領域 </div> <div id="header1"> ヘッダ領域 </div> <div id="boxL"> メニュー領域 </div> </div> </body> </html> の方が、アビリティが高いでしょう。 出しゃばりでした。^^;
- auty
- ベストアンサー率58% (284/486)
簡単な１例を挙げてみます。 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>
お礼
position: absolute; がポイントで絶対位置で指定する方法ですね。 ご回答ありがとうございました。
お礼
ご紹介いただいたサイトを読みました。 テーブルの置き換えにabsoluteを使うことについてはちょっと抵抗を感じていたのですが、フロートの解説でよくわかりました。IEでのバグがあり、意図しない表示になること。 レイアウトはCSSをつかうべきだけどもまだテーブルも多くつかわれるとどこかで読んだのですが、その理由も納得です。 勉強になりました。ありがとうございました。