No.9ベストアンサー
- 回答日時:
> しかしdivの本当の役割は意味的な区分をマークアップすること・・・と解釈すればよいのですね。
そうですね。
div要素は「スタイルを指定する」よりも、「ID, クラスによる意味付け」の役割を果たす機会が多いと思います。
#7では、意味づけを分かり易くするためにあえてIDのみを用いましたが、クラスを指定しても良いでしょう。
該当htmlソースの下に同じ段落構成があるのならば、クラスに変更してみて下さい。
一意な意味は持たなくなりますが、意味付けという点においては同じです。
#7では、div要素のIDであえて「"h3_1"~"h3_3"」に分類しましたが、場合によっては同じクラスを指定しても良いと思います。
「3つめの段落」という意味においては、同じ意味合いを持たせた方が統一性があって良いかもしれません。
このように、広義な意味合いを持たせる場合には、IDではなくクラスを用います。
どこまで広義にするかは、クリエイターの考え方次第。
意味付けを適切に定義しておくと、後々の保守が容易になるので、よく考えて決める事をお勧めします。
No.8
- 回答日時:
#7です。
h3の下の意味段落をインデントするのを忘れていました。
<h3>概要</h3>
<div id="h3_1">
<p>...東京の年間気温の概要1...</p>
<p>...東京の年間気温の概要2...</p>
</div>
私の場合、段落はインデントを付けて把握する事が身についています。
連続した空白文字は1つの空白と解釈されるので、インデント文字が複数あっても描画上は問題なく、都合がよいので。
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.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.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.4
- 回答日時:
どこか使えるかと・・・・・。
http://openlab.ring.gr.jp/k16/htmllint/tagslist. …
尚、正しくと考えるならば、
文法という規則もですが、
その意味(書き手の意図)も重視される事を、お勧めします。
参考URL:http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401 …
No.3
- 回答日時:
えっと, (HTML の) DTD というのは W3C が出しています. 原本は英語だけど, 日本語もあったような... あ, あったあった. W3C サイトからちょっと探すといくつか出てますね. JIS にもなってるし (JIS TR X 0080:2003). ちなみに「そんなに難しくない」と書きましたが, 書き方に癖があるのでそこは注意.
で, p 要素の中に table を入れるのは今の HTML ではやってはいけないことになっています. まあ W3C でもこの辺の制約 (p の中にブロック要素が入らないので, 段落中に列挙ができないなど) がおかしいことに気付いているようで, 次に出るはずの XHTML 2 では直るはずのようです.
W3C のサイトには HTML チェッカもあるので使ってみてはどうでしょうか?
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が出しているものでしょうか。もしかして英語でしょうか。時間がある限り挑戦してみたいと思います。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- HTML・CSS テーブルタグのセルの幅の一部だけを指定 1 2023/03/12 12:02
- Visual Basic(VBA) Selenium.ChromeDriverの使い方について 7 2022/09/22 06:43
- IT・エンジニアリング ドメイン駆動設計の値オブジェクトについて質問 1 2023/05/13 02:50
- HTML・CSS 自身のHPにYouTube動画を貼り付けるのが出来なくなり困ってます 1 2022/11/11 10:44
- JavaScript switch文のswitch(n)の部分を複数の値にするか、if文に変えてほしいです。 1 2022/07/27 17:18
- HTML・CSS 私の能力からして間違っていないような気がします。 4 2022/09/30 13:24
- JavaScript セレクトボックスを2つ設けて選択して初めてメッセを表示 1 2022/07/27 12:15
- PHP PHPでCookieを使った訪問回数について 1 2023/05/28 14:10
- JavaScript EasyUIのSubGrid(jquery)におけるObjectに入れた連想配列について 1 2022/05/02 11:21
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
【ヒトの神秘】美男美女から何...
-
質問1.
-
submit buttonの違い
-
input type="hidden"で取得した...
-
smallにtext-allignが効かない
-
<textarea>に<pre>を使うと・・・
-
配列の要素をまとめて比較したい
-
取消し線に色を付ける
-
textareaの幅を画面と合わせたい
-
HTMLページ上でiframeを最前面...
-
CSS:overflow要素の印刷について
-
超音波で洗脳。
-
角丸画像の背景色を透明にした...
-
<br /><hr />どっちを使ったら...
-
下線と文字の間を調整するには...
-
【CSS】imgタグを、親要素の幅...
-
VBA でIE 操作 ボタンをクリッ...
-
「にはとって代わることのでき...
-
1から100までの自然数のうち、2...
-
HTMLで <p>~</p>内で2回以...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
【ヒトの神秘】美男美女から何...
-
超音波で洗脳。
-
質問1.
-
smallにtext-allignが効かない
-
含む含まないという概念自体の...
-
NからZへの全単射を具体的に構...
-
角丸画像の背景色を透明にした...
-
タグは大文字と小文字どちらが...
-
改行ほどは行かないけど、若干...
-
2個のFormを横並びにしたい
-
「諸要素」とはどういう意味で...
-
input type="hidden"で取得した...
-
CSS:overflow要素の印刷について
-
textareaの幅を画面と合わせたい
-
親要素・子要素
-
テキストボックスの中にリンク...
-
emとstrongの反対
-
cssのdisplay:block
-
border: noneでボタンの境界線...
-
tdに対してmin-heightの定義、...
おすすめ情報