p要素の中にブロック要素を書くとCSSが適用されない対処法

実現したいこと＆問題点・気になること

HTML、CSSの勉強中です。
親要素(p)に子要素(div)を入れて、親要素のidプロパティ指定で要素全体(子要素まで)に
CSSを適用しようとしたのですが期待通りになりません。

期待：親要素(p)の中の文は、すべてフォントサイズが30pxになる
実際：親要素(p)の指定が子要素(div)に適用されない
※下記のソースコードで
「これはp要素の中のclass要素です。」、2個目の「これはp要素です。」のフォントサイズがデフォルト

調べてみると下記の記事が出てきて、↑のようになってしまう理由については理解できたのですが
どのように指定すればいいのか対処法が分かりません。
pでdivが囲めない件

p要素は、1つの段落を表し、p要素自体を含め、ブロックレベル要素を内容とすることはできない。

p要素は終了タグが省略できるため、p要素にブロック要素を入れ子にしようとすると、

ブロック要素の開始タグの前にp要素の終了タグが省略されていると解釈され、
ブロック要素はp要素の後続の兄弟とみなされます。

また、親要素をp要素でなくdiv要素にすると期待通りに表示されます。
なぜ同じブロック要素であるdiv要素だと許されるのでしょうか？
div要素は終了タグを省略できないからでしょうか？
(なぜ省略できないのか気になります…となると、なぜp要素は省略できるのかも気になりますが…)

###質問をまとめると
★質問1
p要素を親とした場合、その子要素にもid/class要素を持たせてCSSを適用する方法は？
ただのテキストには、どのインライン要素が適しているのか？

★質問2
なぜdiv要素(ブロック要素)では、中にブロック要素を入れることができるのか？

拙い質問で申し訳ありませんが、ご回答をよろしくお願いいたします。

該当のソースコード

html
1<!DOCTYPE html>
2<html>
3<head>
4	<meta charset="utf-8">
5	<title>sample</title>
6	<link rel="stylesheet" href="style.css">
7</head>
8<body>
9	<p id="p-check">
10	    これはp要素です。
11	    <div class="hoge">これはp要素の中のclass要素です。</div>
12	    これはp要素です。
13	</p>
14</body>
15</html>

css
1#p-check {
2    font-size: 30px;
3}
4.hoge {
5    color: red;
6}

行動規範の内容に同意します

回答3件

https://developer.mozilla.org/ja/docs/Web/HTML/Element/p
によればフレージングコンテンツであればp要素配下に記述できるとされているので, div要素の代わりにspan要素を配置すればよかろうと.

NOTE:
HTMLは(厳密かつ歴史的経緯から非常にややこしい)ルールの元でDOMツリー構造に変換されます. そのため, 動作をおかしく感じた場合は, 開発者ツールからどのようなツリー構造として展開されたかについて確認し, おかしな挙動を示した部分についてのHTML仕様を確認することをおすすめします.

例えばご提示のHTMLはDOMツリーとしては下記のようにパースされます.

HTML
1<body>
2    <p id="p-check">
3        これはp要素です。
4        </p><div class="hoge">これはp要素の中のclass要素です。</div>
5        これはp要素です。
6    <p></p>
7</body>

NOTE:
因みにHTMLの文法仕様は下記で確認できます.
https://html.spec.whatwg.org/#syntax
数多くの記述ミスに対する対処が定義されており, このルール（ほぼ理解は不可能）に則って構造が勝手に改変されてしまうのです.

投稿2018/01/31 14:49

編集2018/01/31 15:01

defghi1977

総合スコア4756

aimin

2018/01/31 15:30

迅速にご回答いただきありがとうございました。疑問解決できました！私のソースコードが内部的にどのように展開されているかよく分かりました。また何かありましたら質問させていただくかと思いますが、どうぞよろしくお願いいたします。

行動規範の内容に同意します

HTML4.01 から HTML5 へ

p要素は、1つの段落を表し、p要素自体を含め、ブロックレベル要素を内容とすることはできない。

参照している資料が古いようです。
ブロックレベル要素とはHTML4.01に存在した用語であり、HTML5 ではありません。

p要素

p要素のコンテンツモデルはフレージングコンテンツです。

div要素は「フレージングコンテンツ」ではない為、子に持つことが出来ない事になります。

div要素

div要素のコンテンツモデルは、dl要素の子の例外規定を除けば、フローコンテンツです。

Re: aimin さん

投稿2018/01/31 15:04

think49

総合スコア18162

aimin

2018/01/31 15:25

ご回答ありがとうございます。疑問解決できました！「フレージングコンテンツ」「フローコンテンツ」という単語自体を初めて聞いたためリンクも貼っていただいてとても分かりやすかったです！ HTMLのバージョンの差も気にして勉強していかなければなりませんね…。また何かありましたら質問させていただくかと思いますが、どうぞよろしくお願いいたします。本当にありがとうございました。

行動規範の内容に同意します

ベストアンサー