現在、HTMLとCSSを勉強中です。
後々はPHPを勉強して掲示板を作ろうと思っております。
HTMLは10年以上前にかじった程度でして、tableを駆使してレイアウトするのが格好良いとされていた時代の人間です。
今はそんなことをすると、CSSを使えよと、表はあくまで表だよと、鼻で笑われてしまうそうで(^_^;
勉強していてふと思ったんですが、掲示板のソースを覗くとたいていはtableでレイアウトされているように思えます。
これってどうなんでしょう?
掲示板は表と言えるのか?
今までの人生で何気なく使っていた「表」という言葉ですが、いまいち定義が分からなくなってきました(^_^;
そもそも、名前、年齢、メールアドレス、都道府県、本文…といろいろな項目をひとまとめにしたレイアウトをCSSでできるんでしょうか?
全部を縦に並べるなら、ラベルを使って何とかなりそうですが、よくある掲示板のように名前やメールアドレス等は横並びで本文を下に、というよなレイアウトがです。
今のwebデザインの常識の中で、掲示板の扱いはどうなってるんでしょう?
やはり、多くの掲示板で使われているようにtableを使って作るもの?
それともCSSで作るのが常識?
No.5ベストアンサー
- 回答日時:
掲示板の文書構造が表でもおかしくは無いと思います。
横軸が各項目(投稿時間・投稿者・メルアド・発言内容)で、縦軸が時系列とすれば、立派な表ですね。一発言が表の1行として表現される形です。
個人的には、どちらかというと、構造化された(入れ子の)リストと考えた方が、すっきりするように思います。
特に、発言へのレスを元発言に対して、インデントして表現するとなると、ますますリストっぽくなります。
どちらにしても、レイアウトは完全にCSSでコントロールできます。
リスト構造の一部を横に並べる方法がよく見られるのは、ページトップのメニューです。
このOKWEBサイトの上部にあるカテゴリのメニュー表示が、一番近くにある実例。(スクリプトが絡んでいますが、スクリプトの部分は、マウスを置いた時に子メニューがでるようにするためです。これを無視すればたんなる単純なリストです。)
classをきちんと分けていけば、あまりdivに頼る必要も無いはずです。
ご回答ありがとうございます。
OKWaveのメニュー!
目の前に良い例があったんですね。
XHTMLがよく分からないもので、ソースの宣言を見て閉じてしまいました(^_^;
これを参考に調べてみたいと思います。
No.4
- 回答日時:
> ブロック要素だと改行されちゃいますよね。
> 検索してみると横並びにする使い方もあるようですが、ブラウザによってできたりできなかったり。
> divとかじゃなくて、spanで囲って枠をつけて並べるというぐらいしか思いつきませんが、これだと文章的には続いてるのでおかしいですよね(^_^;
divをfloatとかinline, inline-blockで並べればいいのです。
HTMLとして独立した要素であることを指定し、CSSでデザインするので最近の考え方に準拠した方法です。
ガラケーのブラウザやサポート期限の切れた古いブラウザ以外なら問題なく表示できます。
ご回答ありがとうございます。
今、ちょっとfloatで試しているんですが、なかなか思うようにいかないですね。
もう少し勉強を続けてみます。
No.3
- 回答日時:
>HTMLは10年以上前にかじった程度でして、tableを駆使してレイアウトするのが格好良いとされていた時代の人間です。
それはないでしょう。HTML4.01が長い検討のうえ、やっとこさ勧告になったのは1999年12月ですから15年前ですよ。
「構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」
「単に文書内容を整形する目的だけで表を用いるべきでない。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」
「ページレイアウトの目的で表を用いる。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」
と随所で、強く否定されてきました。もう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-html4 … )
(残念ながら)
これは理解されたとは言いがたく、その反省からHTML5では文書構造を明確化する新しい要素が追加されます。--- http://standards.mitsue.co.jp/resources/w3c/TR/h …
あなたが掲示板を作成されるなら、まず率直にデザインは考えずに!!!HTMLを出力し、デザインは100%スタイルシートで行なうという、HTML4.01strict以来の手法でよいでしょう。
【注意】
『strict DTD に適合する文書を作るよう推奨する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』
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+
}
とすれば、『名前、年齢、メールアドレス、都道府県、本文…といろいろな項目をひとまとめにしたレイアウト』が可能ですね。
No.2
- 回答日時:
考えようによってはテーブルだと言えなくもないですが、1つ1つは何ら関係性のあるものでもないし、
ul -> li -> divなどの構造で、リスト化していった方がレイアウトは作り易いと思います。
twitterやfacebookのコメント欄、MSDN フォーラムなどはそのような作りです。
(olだったりulだったりはするでしょうが、基本的に、ということで)
大したコメント量が書き込めず、ものすごく単調な作りなら大枠はtable、tdは1つ、中身を
divやspanで構成という形でもいいでしょうけど、そういうサイトは最近は見かけませんね。
tableを使うかどうかはともかく、常識というか、htmlは構造を定義するもので、レイアウト定義はcssですよ。
htmlで無理矢理レイアウトを構成させると、最近なら様々なデバイスでページを閲覧した時に問題が生じると思います。
ご回答ありがとうございます。
そうなんですよね。
自分としてもレイアウトはきっちりCSSでしたいんですが、CSSでレイアウトしてる掲示板が見当たらなくて・・・。
「掲示板を作る CSS」などで検索しても、CSSの質問をするための掲示板がヒットしたり(^_^;
具体例があれば分かりやすいんですけど・・・。
Twitterとかにヒントがありそうですね。
No.1
- 回答日時:
どんなレイアウトも基本的にはCSSで出来ます。
HTMLのタグは、タグが持つ本来の意味で使いましょうというのが今の流れなので、tableは何かの比較一覧のようなモノだったり、実験等の計測結果のようなデータを表す際に使用すると考えるといいと思います。
掲示板は一つ一つの投稿は独立した記事であり、縦や横に並んだものを比較して見るようなモノでは無いのでtableでは無くブロック要素でレイアウトしていく方がいいと思います。
ご回答ありがとうございます。
ブロック要素だと改行されちゃいますよね。
検索してみると横並びにする使い方もあるようですが、ブラウザによってできたりできなかったり。
divとかじゃなくて、spanで囲って枠をつけて並べるというぐらいしか思いつきませんが、これだと文章的には続いてるのでおかしいですよね(^_^;
ブラウザ上では
名前 年齢 メルアド
と分かれていても、
文章としては
名前年齢メルアド
ですもんね(^_^;
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS WEB上で文書のアイコンを配置する方法 2 2022/09/03 13:01
- その他(プログラミング・Web制作) WEBアプリ開発に必要な言語 5 2023/06/28 16:57
- SSL・HTTPS 掲示板サイトへの書き込みができない件(ブラウザソフトを変えてもできない) 2 2022/11/20 10:48
- MySQL PHPとMySQLを使った掲示板の作り方 1 2022/06/02 13:00
- CGI (フリーの)ツリー掲示版CGI、昔は多用させてもらいましたが・・今セキュリティ上どうでしょう? 2 2023/06/25 07:18
- MySQL `picture` varchar(255) のコマンドで間違いないでしょうか? 1 2022/11/21 04:08
- ハッキング・フィッシング詐欺 ハッキングについて 2 2022/07/19 00:24
- 教えて!goo なぜこのQA掲示板って回答者は金に糸目をつけない回答をするのか? 7 2023/07/10 17:15
- PHP アップロードファイルの数に応じてCSSを動的に変更したいのですが、方法がわかりません 3 2023/07/23 21:59
- Windows 8 QTTabBarが無反応になる 2 2023/04/07 14:17
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
HTML属性での「""」 「''」違い
-
<div id="container">の使いか...
-
htmlのolやulなどlistにtitleや...
-
インラインフレームのページ内...
-
スペースを使わず文字位置を揃...
-
複数のボタンを等間隔に、かつ...
-
HTML5 iframe の代わり
-
横並びdivで一部の初期高さがず...
-
<!-- #BeginLibraryItemとは
-
div要素が重なってします
-
HEADタグとheaderタグ
-
divとpの使いわけ
-
標題<h1>に、網掛けはできますか?
-
htmlの見出しタグ(<h1>)の次...
-
画面を縮小するとカラムが落ち...
-
フッターがウインドウの一番下...
-
CSSで、contentsがfooterに重な...
-
特定範囲内のCSSの継承を断ち切...
-
セクションをdivで囲むと見出し...
-
背景画像に全体または部分的に...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlのolやulなどlistにtitleや...
-
HTML属性での「""」 「''」違い
-
div要素が重なってします
-
<div id="container">の使いか...
-
複数のボタンを等間隔に、かつ...
-
html の divとtable の役割
-
divとpの使いわけ
-
ヘッダーとフッターだけ背景を...
-
min-heightとheightの違いについて
-
セクションをdivで囲むと見出し...
-
画面を縮小するとカラムが落ち...
-
ヘッダーを左右に二分割する方...
-
1時間30分を簡単に表したいで...
-
スペースを使わず文字位置を揃...
-
CSSで、contentsがfooterに重な...
-
h1に自分自身へのリンクを張...
-
divの中に外部のHTMLを埋め込む
-
divを横に並べる方法
-
hタグの右横に画像を表示
-
h1のテキストサイズよりh2の方...
おすすめ情報