- ベストアンサー
p、form、tableの階層構造
- みんなの回答 （9）
- 専門家の回答
質問者が選んだベストアンサー
> しかしdivの本当の役割は意味的な区分をマークアップすること・・・と解釈すればよいのですね。 そうですね。 div要素は「スタイルを指定する」よりも、「ID, クラスによる意味付け」の役割を果たす機会が多いと思います。 #7では、意味づけを分かり易くするためにあえてIDのみを用いましたが、クラスを指定しても良いでしょう。 該当htmlソースの下に同じ段落構成があるのならば、クラスに変更してみて下さい。 一意な意味は持たなくなりますが、意味付けという点においては同じです。 #7では、div要素のIDであえて「"h3_1"～"h3_3"」に分類しましたが、場合によっては同じクラスを指定しても良いと思います。 「3つめの段落」という意味においては、同じ意味合いを持たせた方が統一性があって良いかもしれません。 このように、広義な意味合いを持たせる場合には、IDではなくクラスを用います。 どこまで広義にするかは、クリエイターの考え方次第。 意味付けを適切に定義しておくと、後々の保守が容易になるので、よく考えて決める事をお勧めします。
その他の回答 (8)
- aqucent
- ベストアンサー率39% (78/200)
#7です。 h3の下の意味段落をインデントするのを忘れていました。 <h3>概要</h3> <div id="h3_1"> <p>...東京の年間気温の概要1...</p> <p>...東京の年間気温の概要2...</p> </div> 私の場合、段落はインデントを付けて把握する事が身についています。 連続した空白文字は1つの空白と解釈されるので、インデント文字が複数あっても描画上は問題なく、都合がよいので。
- aqucent
- ベストアンサー率39% (78/200)
> W3Cの段落というのは、形式段落のことなんですね。 「p要素が形式段落か意味段落か」は議論になるぐらい結論の出ていない主題ですが、 私としては最小の節という性質から、「形式段落に近い段落」と解釈しています。 (p要素は内部に改行を持つことを許しているので、厳密には形式段落ではないのですけどね。) Google検索: 形式段落 p要素 http://www.google.co.jp/search?ie=euc-jp&lr=lang_ja&num=30&q=%b7%c1%bc%b0%c3%ca%cd%ee+p%cd%d7%c1%c7 > 段落には階層構造がないので残念です。 HTMLには意味段落として定義されたものはないので、意味段落を求める方はブロックレベル要素にフラグメント識別子(id)を付けることによって定義する事が多いようです。 > 例えば、「東京都とニューヨークの年間気温変化の比較」というページを作るとします。 この状況で意味段落を定義するとして、私なら以下のようなhtmlソースを書きます。 <h1>東京都とニューヨークの年間気温変化の比較</h1> <div id="h1"> <h2>東京の年間気温</h2> <div id="h2"> <h3>概要</h3> <div id="h3_1"> <p>...東京の年間気温の概要1...</p> <p>...東京の年間気温の概要2...</p> </div> <h3>年間気温表</h3> <div id="h3_2"> <table> ...年間気温表... </table> </div> <h3>年間気温表から読み取れる特徴</h3> <div id="h3_3"> <p>...年間気温表から読み取れる特徴1...</p> <p>...年間気温表から読み取れる特徴2...</p> </div> </div> </div> 分かり易いように見出し(h1)に合わせて識別子を定義しましたが、実際にはもっと意味のある名前付けをすると思います。 <div id="h3_2"> はtable要素に識別子を当てても良いですが、この辺は好みですね。
お礼
わざわざ見本まで記述していただき、ありがとうございました。Google検索してみますと、p要素については色々な意見があることがわかりました。 ところで、私はdivをスタイルをつけるために使っていました。しかしdivの本当の役割は意味的な区分をマークアップすること・・・と解釈すればよいのですね。
- aqucent
- ベストアンサー率39% (78/200)
#5です。 少し気になったので、再び失礼します。 > 感覚的な概念(例えば、あるパラグラフ中に表を使う)と、正しいコーディングの概念(例えば、1個のセルの中に段落がある)にずれがありまして苦労しています。 「p要素 = 段落」「table要素 = 表」 これは解りますよね？ 大辞林によれば、段落とは「長い文章の中の、一つの主題をもってまとまった部分。また、その切れ目。段。節。」とあります。 http://dic.yahoo.co.jp/dsearch?stype=1&dtype=0&dname=0ss&p=%c3%ca%cd%ee 表は文章ではなく論理構造ですから、「段落の中に表が存在するのはおかしい」となります。 反対に、表の中(セル)に文章があれば、表の中に段落が存在してもおかしくはありません。
補足
W3Cの段落というのは、形式段落のことなんですね。段落には『形式的な段落』と、『意味的な段落（いくつかの形式段落で構成され、文中で一つの大きなまとまりになる。）』がありますが、上記の『意味的な段落』を表すタグがないから、色々な問題が出ているような気がします。見出しには階層構造があるのに、段落には階層構造がないので残念です。 例えば、「東京都とニューヨークの年間気温変化の比較」というページを作るとします。 そのときは、h1を「東京都とニューヨークの年間気温変化の比較」とします。 次に、h2を「東京の年間気温」とします。続く段落（『意味的な段落』）で、東京の年間気温についての解説を入れます。その解説の中に東京の年間気温についての「概要」「年間気温表」「年間気温表から読み取れる特徴」などを入れたいと思うのですが（つまり、意味的な段落の中に「表」を入れたいのですが）、これをそのままコーディングすれば間違いということですね。 この場合は、h3に「概要」とし、その内容をpに入れる。次のh3に「年間気温表」としてpは無しで、tableを入れる。次のh3に「年間気温表から読み取れる特徴」とし、その内容をpに入れる。・・・というようになるのでしょうか。
- aqucent
- ベストアンサー率39% (78/200)
> どの要素が上位(または同位)になるのでしょうか。 p, form, table の中では、p要素が最も下位の要素となりますね。 form, table はどちらが上位にあっても問題のない要素です。 (form要素が下位の場合、td要素の下位に置く必要があります) > これらに関して詳しいサイトがあれば教えてください。 以下が参考になるでしょうか。 INDEX of BLOCK-level Elements http://www.nextindex.net/web/tips/block.html Google検索: HTML 内容モデル http://www.google.co.jp/search?ie=euc-jp&lr=lang_ja&num=30&q=HTML+%c6%e2%cd%c6%a5%e2%a5%c7%a5%eb
- koutarou504
- ベストアンサー率44% (182/407)
どこか使えるかと・・・・・。 http://openlab.ring.gr.jp/k16/htmllint/tagslist.cgi?HTMLVersion=HTML401-Strict 尚、正しくと考えるならば、 文法という規則もですが、 その意味（書き手の意図）も重視される事を、お勧めします。
- Tacosan
- ベストアンサー率23% (3656/15482)
えっと, (HTML の) DTD というのは W3C が出しています. 原本は英語だけど, 日本語もあったような... あ, あったあった. W3C サイトからちょっと探すといくつか出てますね. JIS にもなってるし (JIS TR X 0080:2003). ちなみに「そんなに難しくない」と書きましたが, 書き方に癖があるのでそこは注意. で, p 要素の中に table を入れるのは今の HTML ではやってはいけないことになっています. まあ W3C でもこの辺の制約 (p の中にブロック要素が入らないので, 段落中に列挙ができないなど) がおかしいことに気付いているようで, 次に出るはずの XHTML 2 では直るはずのようです. W3C のサイトには HTML チェッカもあるので使ってみてはどうでしょうか?
- Tacosan
- ベストアンサー率23% (3656/15482)
そんなに難しくないので, 一度 DTD を読んでみてはいかがでしょうか? 結論: ・p, table, form は全てブロック要素である ・p の中に入れることができるのはインライン要素なので table や form (や p) を入れることはできない ・form には「form 以外のブロック要素」を入れることができるので, 当然 p や table を入れることができる ・table の中に直接入れることができる要素は限られているが, 究極的に出てくる td や th にはブロック要素もインライン要素も入れることができる. つまり p も table も form も (td や th の中に入れれば) table の中に入れることができる
お礼
早速回答をいただき、ありがとうございます。 感覚的な概念（例えば、あるパラグラフ中に表を使う）と、正しいコーディングの概念（例えば、１個のセルの中に段落がある）にずれがありまして苦労しています。 DTDというのはW3Cが出しているものでしょうか。もしかして英語でしょうか。時間がある限り挑戦してみたいと思います。
- oryaaaaa
- ベストアンサー率35% (75/211)
tableは使わないでXHTML+CSSで書くようにすれば、悩まずに済みますよ。
補足
formをtableで整形するケースがありまして（私の場合）、このような質問をいたしました。 しかし、できるだけXHTML+CSSで書かなければなりませんね。
関連するQ&A
- tableタグとformタグの組み合わせ
tableタグとformタグの組み合わせでどのように記述すれば、構文上正しいのでしょうか？ 私は下のパターンで書いておりますが、間違いでしたら早めに改めたいので お聞きしました。 ＜table＞ ＜form＞ ＜input type="hidden" name="a" value="1"> ＜tr＞ ＜td＞ ＜input type="text" name="b" value=""＞ ＜/td＞ ＜/tr＞ ＜tr＞ ＜td＞ ＜input type="submit" value="OK" value=""＞ ＜/td＞ ＜/tr＞ ＜/fomr> ＜/table＞
- ベストアンサー
- HTML
- form要素とtable要素
元はこちらです。 http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1483846324 <table> <tr><td><input form="form1" type="text" value="text1"></td></tr> <tr><td><input form="form1" type="submit" value="submit1"></td></tr> <tr><td><input form="form2" type="text" value="text2"></td></tr> <tr><td><input form="form2" type="submit" value="submit2"></td></tr> </table> <form id="form1" action="cgi1.cgi" method="POST"></form> <form id="form2" action="cgi2.cgi" method="POST"></form> 上記はHTML5の仕様に従って書いていますが、これを、HTML4.01の仕様に反さないように書くと、どの様にすればいいのでしょうか。 添付画像は、実際のテーブルの様子です。
- ベストアンサー
- HTML
- formで出来る微妙な空間を消したい
<form>をtableの中に入れたとき、たとえば ************************ <table><tr><td bgcolor=#0000ff><form><input type=submit class=a value="RES"></form></td></tr></table> ************************ とした時に、RESと書かれたボタンの下にかなり空間が残ります。（その空間が分かりやすいようにbgcolorをつけました。）だいたい１行分くらいの空間でしょうか・・・ これの空間を消し去る方法はありますか？？ こちらはIE６です。
- ベストアンサー
- HTML
- Submitを違うテーブルに設置
submitボタンについての質問です。 原則 <form> <INPUT TYPE="TEXT"> <INPUT TYPE="SUBMIT"> <\form> のような形にしなければいけないと思うのですが。 テーブルを使って、このようにしたいのです. <table><tr><td> <input type="submit"> <!-- このボタンでデータを次に送りたい--> <\td> <td> <H2>Welcome to My HP<\h2> <form> <!--ここにもすでにちがう<form>があります.--> <\form> <form action="aaa.cgi" mothod="post"> <input type="text"><!-- ここの内容を送りたい--> <\form> <\td><\tr> <\table> Javascriptを使えばどうにかできるのではないかと思っているのですが、ぜひやり方を教えてください。宜しくお願いします。
- ベストアンサー
- JavaScript
- テーブルの中のフォームについて
テーブルの中にフォームを入れて使いたいのですが、次のようにフォームを入れると、勝手に改行されてしまいます。 <table> <tr> <td><form>.....</form></td> </tr> </table> または <form> <table> <tr> <td>.....</td> </tr> </table> </form> これが嫌で、次のようにしているのですが、何か問題や他に良い方法があるでしょうか？ <table> <form> <tr> <td>.....</td> </tr> </form> </table> ちなみに、Dreamweaverのバリデータでは警告が出ます。 よろしくお願いします。
- ベストアンサー
- HTML
- テーブルのテーブルの間に間ができるのでしょうか？
はじめまして、超html初心者のものです。 なぜ同じようテーブルを３つ書いているのに一番上のテーブルと真ん中のテーブルの間が開いてしまっているのかがわかりません。 あと、一番上のテーブルの-から先をもう少し左に寄せることもうまくいきません。 なにかアドバイスをよろしくお願いします。 ↓これがソースです。 <html> <head><title>test</title> </head> <form> <table border=1 cellspacing=0 cellpadding=2 width=760> <tr> <th width=95 height=30 align="right">日付け：</th> <td width=284> <input type="text"><input type="button"> </td> <td> - </td> <td><input type="text"><input type="button"></td> </tr> </table> <table border=1 cellspacing=0 cellpadding=2 width=760> <tr> <th width=95 height=30 align="right">部署：</th> <td width=100> <select name="busyo"></select> </td> <th width=80 align="right">営業所：</th> <td width=100> <select name="eigyousyo"></select> </td> <th width= 80 align="right">担当コード:</th> <td width=450> <select name="tantocode"></select> </td> </tr> </table> <table border=1cellspacing=0cellpadding=2width=760> <tr> <th width=80 align="right">権限:</th> <td width=700> <select name="kengen"></select> </td> </tr> </table> </form> </html>
- 締切済み
- HTML
- テーブルをテーブルで囲う意味はありますか？
<table border=1> <tr><td> <table border=1> <tr><td> a </td><td> b </td></tr> </table> </td> </tr> </table> このようにテーブルをテーブルで囲う意味はありますか？ ｈｔｍｌの勉強をしていて、 ネット上でテーブルのサンプルを拾ったのですが、 上記のようにテーブルをテーブルで囲んでました。 この方法でサイト上に１００個くらいテーブルを作ってしまったのですが 今更ながらこういう書き方に意味はあるのかな？ と思い始めてきました。 意味はあるのでしょうか？
- ベストアンサー
- HTML
- <FORM ACTION= をつけると「宣言されていません」と
<script language="javascript"> function change(tr,n) { tr.bgColor=CheckBox[n].checked?"#ff0000":"#ffffff"; } </script> 上記のコードで下記のように<form・・ を付けると「宣言されていません」とエラー表示になります。 <FORM ACTION="sample.cgi" METHOD="POST"> <TABLE BORDER="1"> <TR id="tr1"> <TD> <INPUT TYPE="CHECKBOX" NAME="CheckBox" VALUE="CheckBox" onclick="change(tr1,0)"></TD> </TR> <TR id="tr2"> <TD> <INPUT TYPE="CHECKBOX" NAME="CheckBox" VALUE="CheckBox" onclick="change(tr2,1)"></TR> </TABLE> </form> 下記だと正常です。 <TABLE BORDER="1"> <TR id="tr1"> <TD> <INPUT TYPE="CHECKBOX" NAME="CheckBox" VALUE="CheckBox" onclick="change(tr1,0)"></TD> </TR> <TR id="tr2"> <TD> <INPUT TYPE="CHECKBOX" NAME="CheckBox" VALUE="CheckBox" onclick="change(tr2,1)"></TR> </TABLE> ちんぷんかんぷんになってきました。
- ベストアンサー
- JavaScript
- HTMLでテーブルを作成した際、テーブル間にスペースが空いてしまいます
HTMLでテーブルを作成した際、テーブル間にスペースが空いてしまいます。 スタイルシートを使用/使用せず、いずれの場合も変わりません。 会社のPCで表示した時になり、家ですると自動的に詰めて表示されるみたいです。 コードはいたってシンプルで・・・ <html><head><title>aaa</title> </head> <body> aaa <hr> <table border=1> <tr><td>名前</td><td><input type="text" name="name"></td></tr> </table> <table border=1> <tr><td>名前</td><td><input type="text" name="name"></td></tr> <tr><td>名前</td><td><input type="text" name="name"></td></tr></table> <table border=1> <tr><td>名前</td><td><input type="text" name="name"></td></tr> <tr><td>名前</td><td><input type="text" name="name"></td></tr> <tr><td>名前</td><td><input type="text" name="name"></td></tr> <tr><td>名前</td><td><input type="text" name="name"></td></tr> </table> </body> </html> 守秘義務があるので、今は中身を適当に書いてますが、書き方はこんな感じです。 スタイルシートやHTMLコードなど色々調べましたが、テーブルの中の文字などを 詰めたりする方法は載ってましたが、今の私の知識ではテーブル自体は左右にしか動けません。 宜しくお願いします。
- ベストアンサー
- HTML
- IEとFirefoxで表示が違う
現在WEBサイトを制作しています。 フォームを挿入したのですが、IE(8)で表示すると<form>要素の上部に大きなスペースが空いてしまいます。Firefoxで表示すると問題ないです。 HTMLのフォーム付近は以下のような構成にしています。 <p>フォーム上部の文章</p> <form method="#" action="#"> <table> <tr><td>テキスト</td> <td><input type="text" name="#"></td></tr> ・ ・ </table> </form> IEでは<p>の文章と<form>テーブルとの間に大きなスペース(約200px)ができてしまいます。 Firefoxではたまたまうまく処理されていて、間違った記述をしていると考えるべきでしょうか。 それとも、IEブラウザの不具合なのでしょうか。 このような症状についてご存知の方がいらっしゃいまいしたらごご教授いただけますようお願い申し上げます。
- ベストアンサー
- その他([技術者向] コンピューター)
お礼
ありがとうございました。理解が一つ先に進んだ気がします。