No.2
- 回答日時:
そんなに難しくないので, 一度 DTD を読んでみてはいかがでしょうか?
結論:
・p, table, form は全てブロック要素である
・p の中に入れることができるのはインライン要素なので table や form (や p) を入れることはできない
・form には「form 以外のブロック要素」を入れることができるので, 当然 p や table を入れることができる
・table の中に直接入れることができる要素は限られているが, 究極的に出てくる td や th にはブロック要素もインライン要素も入れることができる. つまり p も table も form も (td や th の中に入れれば) table の中に入れることができる
早速回答をいただき、ありがとうございます。
感覚的な概念(例えば、あるパラグラフ中に表を使う)と、正しいコーディングの概念(例えば、1個のセルの中に段落がある)にずれがありまして苦労しています。
DTDというのはW3Cが出しているものでしょうか。もしかして英語でしょうか。時間がある限り挑戦してみたいと思います。
No.3
- 回答日時:
えっと, (HTML の) DTD というのは W3C が出しています. 原本は英語だけど, 日本語もあったような... あ, あったあった. W3C サイトからちょっと探すといくつか出てますね. JIS にもなってるし (JIS TR X 0080:2003). ちなみに「そんなに難しくない」と書きましたが, 書き方に癖があるのでそこは注意.
で, p 要素の中に table を入れるのは今の HTML ではやってはいけないことになっています. まあ W3C でもこの辺の制約 (p の中にブロック要素が入らないので, 段落中に列挙ができないなど) がおかしいことに気付いているようで, 次に出るはずの XHTML 2 では直るはずのようです.
W3C のサイトには HTML チェッカもあるので使ってみてはどうでしょうか?
No.4
- 回答日時:
どこか使えるかと・・・・・。
http://openlab.ring.gr.jp/k16/htmllint/tagslist. …
尚、正しくと考えるならば、
文法という規則もですが、
その意味(書き手の意図)も重視される事を、お勧めします。
参考URL:http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401 …
No.5
- 回答日時:
> どの要素が上位(または同位)になるのでしょうか。
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 …
No.6
- 回答日時:
#5です。
少し気になったので、再び失礼します。
> 感覚的な概念(例えば、あるパラグラフ中に表を使う)と、正しいコーディングの概念(例えば、1個のセルの中に段落がある)にずれがありまして苦労しています。
「p要素 = 段落」「table要素 = 表」
これは解りますよね?
大辞林によれば、段落とは「長い文章の中の、一つの主題をもってまとまった部分。また、その切れ目。段。節。」とあります。
http://dic.yahoo.co.jp/dsearch?stype=1&dtype=0&d …
表は文章ではなく論理構造ですから、「段落の中に表が存在するのはおかしい」となります。
反対に、表の中(セル)に文章があれば、表の中に段落が存在してもおかしくはありません。
この回答への補足
W3Cの段落というのは、形式段落のことなんですね。段落には『形式的な段落』と、『意味的な段落(いくつかの形式段落で構成され、文中で一つの大きなまとまりになる。)』がありますが、上記の『意味的な段落』を表すタグがないから、色々な問題が出ているような気がします。見出しには階層構造があるのに、段落には階層構造がないので残念です。
例えば、「東京都とニューヨークの年間気温変化の比較」というページを作るとします。
そのときは、h1を「東京都とニューヨークの年間気温変化の比較」とします。
次に、h2を「東京の年間気温」とします。続く段落(『意味的な段落』)で、東京の年間気温についての解説を入れます。その解説の中に東京の年間気温についての「概要」「年間気温表」「年間気温表から読み取れる特徴」などを入れたいと思うのですが(つまり、意味的な段落の中に「表」を入れたいのですが)、これをそのままコーディングすれば間違いということですね。
この場合は、h3に「概要」とし、その内容をpに入れる。次のh3に「年間気温表」としてpは無しで、tableを入れる。次のh3に「年間気温表から読み取れる特徴」とし、その内容をpに入れる。・・・というようになるのでしょうか。
No.7
- 回答日時:
> W3Cの段落というのは、形式段落のことなんですね。
「p要素が形式段落か意味段落か」は議論になるぐらい結論の出ていない主題ですが、
私としては最小の節という性質から、「形式段落に近い段落」と解釈しています。
(p要素は内部に改行を持つことを許しているので、厳密には形式段落ではないのですけどね。)
Google検索: 形式段落 p要素
http://www.google.co.jp/search?ie=euc-jp&lr=lang …
> 段落には階層構造がないので残念です。
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要素に識別子を当てても良いですが、この辺は好みですね。
参考URL:http://fab51.com/info/css_design1.html
わざわざ見本まで記述していただき、ありがとうございました。Google検索してみますと、p要素については色々な意見があることがわかりました。
ところで、私はdivをスタイルをつけるために使っていました。しかしdivの本当の役割は意味的な区分をマークアップすること・・・と解釈すればよいのですね。
No.8
- 回答日時:
#7です。
h3の下の意味段落をインデントするのを忘れていました。
<h3>概要</h3>
<div id="h3_1">
<p>...東京の年間気温の概要1...</p>
<p>...東京の年間気温の概要2...</p>
</div>
私の場合、段落はインデントを付けて把握する事が身についています。
連続した空白文字は1つの空白と解釈されるので、インデント文字が複数あっても描画上は問題なく、都合がよいので。
No.9ベストアンサー
- 回答日時:
> しかしdivの本当の役割は意味的な区分をマークアップすること・・・と解釈すればよいのですね。
そうですね。
div要素は「スタイルを指定する」よりも、「ID, クラスによる意味付け」の役割を果たす機会が多いと思います。
#7では、意味づけを分かり易くするためにあえてIDのみを用いましたが、クラスを指定しても良いでしょう。
該当htmlソースの下に同じ段落構成があるのならば、クラスに変更してみて下さい。
一意な意味は持たなくなりますが、意味付けという点においては同じです。
#7では、div要素のIDであえて「"h3_1"~"h3_3"」に分類しましたが、場合によっては同じクラスを指定しても良いと思います。
「3つめの段落」という意味においては、同じ意味合いを持たせた方が統一性があって良いかもしれません。
このように、広義な意味合いを持たせる場合には、IDではなくクラスを用います。
どこまで広義にするかは、クリエイターの考え方次第。
意味付けを適切に定義しておくと、後々の保守が容易になるので、よく考えて決める事をお勧めします。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・歩いた自慢大会
- ・許せない心理テスト
- ・字面がカッコいい英単語
- ・これ何て呼びますか Part2
- ・人生で一番思い出に残ってる靴
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・初めて自分の家と他人の家が違う、と意識した時
- ・単二電池
- ・チョコミントアイス
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
その要素がjQueryでremove()済...
-
現行の日本国憲法の古い所を教...
-
【ヒトの神秘】美男美女から何...
-
含む含まないという概念自体の...
-
HTMLでTextareaを横に2つ並べ...
-
CSS:overflow要素の印刷について
-
初歩的な質問です。<div>のwidt...
-
input type="hidden"で取得した...
-
テキストボックスの中にリンク...
-
smallにtext-allignが効かない
-
imgタグをそのまま使うことは正...
-
ドラッグ&ドロップ(D&D)を制限...
-
質問1.
-
「諸要素」とはどういう意味で...
-
改行ほどは行かないけど、若干...
-
figcaption要素の中にul要素
-
aの中にspan
-
brタグ、pタグやtableタグが非...
-
tdに対してmin-heightの定義、...
-
C言語線形リストの問題です
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
【ヒトの神秘】美男美女から何...
-
含む含まないという概念自体の...
-
smallにtext-allignが効かない
-
質問1.
-
「諸要素」とはどういう意味で...
-
input type="hidden"で取得した...
-
角丸画像の背景色を透明にした...
-
改行ほどは行かないけど、若干...
-
CSS:overflow要素の印刷について
-
タグは大文字と小文字どちらが...
-
NからZへの全単射を具体的に構...
-
HTMLでTextareaを横に2つ並べ...
-
H1タグを画像にしたい
-
figcaption要素の中にul要素
-
imgタグをそのまま使うことは正...
-
textareaの幅を画面と合わせたい
-
ある要素の中身を全部グレーア...
-
テキストボックスの中にリンク...
-
スタイルシートで文字色を指定...
-
HTMLページ上でiframeを最前面...
おすすめ情報