Help us understand the problem. What is going on with this article?

そもそも親要素・子要素ってなんだ ~トランスペアレントがわからない~

More than 3 years have passed since last update.

HTML5の勉強を進めながら、コンテンツ・モデルまでたどり着いたは良いものの、トランスペアレントが分からぬ……と躓きました。
そういえば、親要素・子要素の継承と言われてもなんとなくで使ってしまっていたので、ここで定義をはっきりしておこうと思いました。

入れ子構造の関係性

要素同士は、コンテンツ・モデルに従って、入れ子構造になっていきます。
HTML4.01以前までのインライン要素、ブロックレベル要素の関係ですね。
コンテンツモデルに関してはこちらもどうぞ。
そもそもコンテンツ・モデルってどんな種類があるの?
そもそもブロックレベル要素とインライン要素ってなんだったんだ? ~コンテンツ・モデルに繋がる道~

シンプルな例から。

<article>
<p>きいろは<em>安心</em>の色。</p>
</article>

HTML5では、コンテンツモデルに従って要素を組み込む必要があります。
フローコンテンツ(一般コンテンツ)の<p>の中に、フレージングコンテンツ(文章内コンテンツ)の<em>が入っています。
また、<p>はセクションコンテンツの<article>の中に入っています。

<p>を基準にしたときは?

この場合の<em>は、<p>の子になり、
<article>は、<p>の親になります。

親子要素 p基準.png

<article>を基準にしたときは?

<article>の下に<p>が含まれるため、
<p>は、<article>の子になります。

親子要素 article基準.png

どの要素を基準にして見るかによって、親子関係が変わります。

CSSで親子の関係にスタイルを設定できる

そしてこの親子関係に対して、CSSでスタイルを設定することが出来ます。
例えば、こんなhtmlの親子関係があったとします。

<article>
<p>きいろは<em>安心</em>の色。</p>
</article>

以下のように書くことで、<p>要素の子である<em>にスタイルを設定出来ます。
親要素の後に半角スペースを挟んで記述します。

p em{
  color:#FFFF00;}

トランスペアレントって?

コンテンツ・モデルに沿った構造で記述することが基本ですが、一部例外のトランスペアレントと呼ばれるものがあります。

トランスペアレント Transparent

トランスペアレントの要素は、親要素と同じコンテンツ・モデルになります。
元の文書構造がコンテンツ・モデルとして問題が無ければ、トランスペアレントの要素のタグで囲うことができることになります。

3.2.4.3. Transparent content models
Some elements are described as transparent; they have "transparent" in the description of their content model. The content model of a transparent element is derived from the content model of its parent element: the elements required in the part of the content model that is "transparent" are the same elements as required in the part of the content model of the parent of the transparent element in which the transparent element finds itself.
W3C勧告 HTML5.1 Transparent content models より

a audio canvas del ins map object video

HTML4.01までを見慣れているともやっとするけど……

例えば、こんな構文があったとします。

<div>
  <a href="sample.html">
    <p>どうぶつのりカラー</p>
  </a>
</div>

HTML4.01以前までのインライン・ブロックレベル要素が適用されていた時は、こういった構文はNGでした。
<a>はインライン要素、<p>はブロックレベル要素だったからです。
<div>はブロックレベル要素なので、<p>や<a>を含むことが出来ます。
ブロックレベル要素である<p>は、文書を囲うものなので、<a>に囲まれることはNGだったわけですね。

しかし、HTML5になりコンテンツ・モデルという概念へ変化し、さらに<a>はトランスペアレントでもあるため、この構文はOKになります。
この構文では、<a>がトランスペアレントであるため、<a>の親であるdivのコンテンツ・モデルはフローコンテンツになります。

では、こうなった場合は?

<p>
  <a href="sample.html">
    <h1>どうぶつのりカラー</h1>
  </a>
</p>

こちらはNGになります。
トランスペアレント1.png

<p>要素のコンテンツ・モデルにおけるカテゴリはフローコンテンツですが、コンテンツ・モデルはフレージングコンテンツ(文章内コンテンツ)です。
そのため、<h1>はヘッディングコンテンツ(見出しコンテンツ)のため、フレージングコンテンツ内に入れることが出来ません。

トランスペアレントの<a>が親要素<p>のコンテンツ・モデルにおけるカテゴリを継承し、<a>もフレージングコンテンツとして扱われるからです。

では、こちらの構文ではどうなるのでしょうか。

<article>
  <a href="sample.html">
    <h1>どうぶつのりカラー</h1>
  </a>
</article>

こちらはOKです。
トランスペアレント2.png

<article>がセクションコンテンツなので、ヘッディングコンテンツである<h1>を入れることが出来ます。
トランスペアレントの<a>が親要素<article>のコンテンツ・モデルにおけるカテゴリを継承し、<a>もセクションコンテンツとして扱われるからです。

所感とか

<div>も<p>も同じフローコンテンツなのに、なぜpの中にdivを入れられないのか?と考えた時に、どうやらコンテンツ・モデルという単語とコンテンツ・モデルにおけるカテゴリと言うと、また別の意味合いになってくるということが判明しました。
二つともコンテンツ・モデルはフローコンテンツだけど、<div>のカテゴリはフローコンテンツで、<p>のカテゴリはフレージングコンテンツなので、<div>を<p>で囲えないことになる、でいいのかな。
単語だらけになってしまうのでもっとスマートにまとめたい。

参考記事

http://webcre8.jp/investigate/html5-content-model.html
http://a-flat.biz/archives/4011
W3C勧告 HTML5.1 Transparent content models

NoxGit
得意料理 あんかけしょうがうどん
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした