- ベストアンサー
掲示板のレイアウトはtableを使うべきか？
- 掲示板のソースを覗くとたいていはtableでレイアウトされているように思えますが、今のwebデザインの常識の中ではどうなっているのでしょうか？
- CSSを使って掲示板のレイアウトを作成することもできますが、tableを使って作ることが多いです。
- 掲示板では名前やメールアドレスなどの項目を横並びにし、本文を下に配置することが一般的です。
- CSS
- 回答数5
- ありがとう数11
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
掲示板の文書構造が表でもおかしくは無いと思います。 横軸が各項目（投稿時間・投稿者・メルアド・発言内容）で、縦軸が時系列とすれば、立派な表ですね。一発言が表の１行として表現される形です。 個人的には、どちらかというと、構造化された（入れ子の）リストと考えた方が、すっきりするように思います。 特に、発言へのレスを元発言に対して、インデントして表現するとなると、ますますリストっぽくなります。 どちらにしても、レイアウトは完全にＣＳＳでコントロールできます。 リスト構造の一部を横に並べる方法がよく見られるのは、ページトップのメニューです。 このＯＫＷＥＢサイトの上部にあるカテゴリのメニュー表示が、一番近くにある実例。（スクリプトが絡んでいますが、スクリプトの部分は、マウスを置いた時に子メニューがでるようにするためです。これを無視すればたんなる単純なリストです。） classをきちんと分けていけば、あまりdivに頼る必要も無いはずです。
その他の回答 (4)
- t_ohta
- ベストアンサー率38% (5292/13827)
＞ ブロック要素だと改行されちゃいますよね。 ＞ 検索してみると横並びにする使い方もあるようですが、ブラウザによってできたりできなかったり。 ＞ divとかじゃなくて、spanで囲って枠をつけて並べるというぐらいしか思いつきませんが、これだと文章的には続いてるのでおかしいですよね(^_^; divをfloatとかinline, inline-blockで並べればいいのです。 HTMLとして独立した要素であることを指定し、CSSでデザインするので最近の考え方に準拠した方法です。 ガラケーのブラウザやサポート期限の切れた古いブラウザ以外なら問題なく表示できます。
お礼
ご回答ありがとうございます。 今、ちょっとfloatで試しているんですが、なかなか思うようにいかないですね。 もう少し勉強を続けてみます。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞HTMLは10年以上前にかじった程度でして、tableを駆使してレイアウトするのが格好良いとされていた時代の人間です。 それはないでしょう。HTML4.01が長い検討のうえ、やっとこさ勧告になったのは1999年12月ですから15年前ですよ。 「構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )」 「単に文書内容を整形する目的だけで表を用いるべきでない。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/tables.html#h-11.1 )」 「ページレイアウトの目的で表を用いる。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )」 と随所で、強く否定されてきました。もう15年も前の話・・ ＞そもそも、名前、年齢、メールアドレス、都道府県、本文…といろいろな項目をひとまとめにしたレイアウトをCSSでできるんでしょうか？ ここは、違います。 tableは文字通り、表ですから、それが表であればtableで良いです。 ┌──┬──────┐ │項目│内 容│ ├──┼──────┤ │氏名│山田太郎＊＊│ ├──┼──────┤ │住所│東京都杉並区│ └──┴──────┘ これは表で問題ないです。しかし、記事に関しては表に入れるのはおかしいと思います。 ＞掲示板のソースを覗くとたいていはtableでレイアウトされているように思えます。 そんなに一般的ではないと思いますが、結構tableを使用したものが多い理由として、いくつか原因が考えられます。 ・後方互換 CSS2.1を解釈できないIE6以前の古いブラウザ対策---もう必要はないでしょう。 ・PHP 元々のデータがテーブル(データベース)であるために変換が楽（というより手抜き） ・とても古い手法を引き継いだままになっている。 ＞よくある掲示板のように名前やメールアドレス等は横並びで本文を下に、というよなレイアウトがです。 それだと、わざわざ表にする必要はありません。 ＞掲示板は表と言えるのか？ 一般的には表ではないと思いますが・・。 実は、HTML4.01の勧告以来、強く言われてきた事はHTMLは文書構造、スタイルシートはそのデザインを担うという役割分担です。（素のHTMLでさえ、それなりに見出しは大きく、引用部分が字下げされるのはブラウザが持つスタイルシートによるものです。） そのため<h1>ここは見出し</h1><p>ここから一つの段落</p>とマークアップし、HTMLで用意されていない構造はDIVやSPANとidやclassを使うよう言われてきました。 ★DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 ) （残念ながら） これは理解されたとは言いがたく、その反省からHTML5では文書構造を明確化する新しい要素が追加されます。--- http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements あなたが掲示板を作成されるなら、まず率直にデザインは考えずに!!!HTMLを出力し、デザインは100%スタイルシートで行なうという、HTML4.01strict以来の手法でよいでしょう。 【注意】 『strict DTD に適合する文書を作るよう推奨する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )』 strictには、デザイン的な要素はありません。 具体的には <body> <div class="header"> この文書のヘッダ タイトルや要約とかナビゲーション </div> <div class="section"> この文書の本文 <div class="article"> <div class="header"> 掲示板記事のヘッダ <dl>定義リスト <dt>投稿者</dt> <dd class="register">氏名<dd> <dd class="age">年齢</dd> <dd class="mail">メールアドレス</dd> <dd class="address">都道府県</dd> </dl> </div> <div class="section"> <p>記事</p> <p>記事</p> </div> </div> <div class="article"> ・・・【中略】・・・ </div> <div class="article"> ・・・【中略】・・・ </div> </div> <div class="footer"> このページのフッタ </div> </body> とかにしておくとよいでしょう。将来HTML5にするときはそのまま <body> <header> この文書のヘッダ タイトルや要約とかナビゲーション </header> <section> この文書の本文 <article> <header> 掲示板記事のヘッダ <dl>定義リスト <dt>投稿者</dt> <dd class="register">氏名<dd> <dd class="age">年齢</dd> <dd class="mail">メールアドレス</dd> <dd class="address">都道府県</dd> </dl> </header> <section> <p>記事</p> <p>記事</p> </section> </article> <article> ・・・【中略】・・・ </article> <article> ・・・【中略】・・・ </darticle> </section> <footer> このページのフッタ </footer> </body> とするだけになりますから・・ HTML／PHPのメンテナンスもとっても楽になりますし、スタイルシートを書き換えるだけで好きにデザインできます。 [例] div.section div.article{ border:red 2px solid; } div.article div.header dl, div.article div.header dl dt, div.article div.header dl dd{ list-style.none; margin:0;padding:0; } div.article div.header dl{ border:1px gray solid; } div.article div.header dl dt, div.article div.header dl dd{ display:inline-block; padding:0 1em; } div.article div.header dl dd{ border-left:1px soid gray+ } とすれば、『名前、年齢、メールアドレス、都道府県、本文…といろいろな項目をひとまとめにしたレイアウト』が可能ですね。
お礼
ご回答ありがとうございました。
- めとろいと（@naktak）
- ベストアンサー率36% (785/2139)
考えようによってはテーブルだと言えなくもないですが、1つ1つは何ら関係性のあるものでもないし、 ul -> li -> divなどの構造で、リスト化していった方がレイアウトは作り易いと思います。 twitterやfacebookのコメント欄、MSDN フォーラムなどはそのような作りです。 (olだったりulだったりはするでしょうが、基本的に、ということで) 大したコメント量が書き込めず、ものすごく単調な作りなら大枠はtable、tdは1つ、中身を divやspanで構成という形でもいいでしょうけど、そういうサイトは最近は見かけませんね。 tableを使うかどうかはともかく、常識というか、htmlは構造を定義するもので、レイアウト定義はcssですよ。 htmlで無理矢理レイアウトを構成させると、最近なら様々なデバイスでページを閲覧した時に問題が生じると思います。
お礼
ご回答ありがとうございます。 そうなんですよね。 自分としてもレイアウトはきっちりCSSでしたいんですが、CSSでレイアウトしてる掲示板が見当たらなくて・・・。 「掲示板を作る CSS」などで検索しても、CSSの質問をするための掲示板がヒットしたり(^_^; 具体例があれば分かりやすいんですけど・・・。 Twitterとかにヒントがありそうですね。
- t_ohta
- ベストアンサー率38% (5292/13827)
どんなレイアウトも基本的にはCSSで出来ます。 HTMLのタグは、タグが持つ本来の意味で使いましょうというのが今の流れなので、tableは何かの比較一覧のようなモノだったり、実験等の計測結果のようなデータを表す際に使用すると考えるといいと思います。 掲示板は一つ一つの投稿は独立した記事であり、縦や横に並んだものを比較して見るようなモノでは無いのでtableでは無くブロック要素でレイアウトしていく方がいいと思います。
お礼
ご回答ありがとうございます。 ブロック要素だと改行されちゃいますよね。 検索してみると横並びにする使い方もあるようですが、ブラウザによってできたりできなかったり。 divとかじゃなくて、spanで囲って枠をつけて並べるというぐらいしか思いつきませんが、これだと文章的には続いてるのでおかしいですよね(^_^; ブラウザ上では 名前 年齢 メルアド と分かれていても、 文章としては 名前年齢メルアド ですもんね(^_^;
お礼
ご回答ありがとうございます。 OKWaveのメニュー！ 目の前に良い例があったんですね。 XHTMLがよく分からないもので、ソースの宣言を見て閉じてしまいました(^_^; これを参考に調べてみたいと思います。