スマート プレゼンター®でセミナー撮影

HTML5 トランスペアレント?

最近、HTML5についての教材を制作しているのですが、ところどころで従来のHTMLおよびXHTMLに無かった用語が飛び出してくるので、今回はその中から「トランスペアレント」について解説しようと思います。

でも、その前に、コンテンツモデルとカテゴリーという話もしないといけません。

コンテンツモデルとカテゴリーについては、また別のトピックでお話しようと思いますので、ここではざっくりと。

HTML5の要素では、その種類によって入るものが具体的に定義されています。

例えば、article要素だったら、a要素やh1要素は入れられるけど、title要素はダメよとか、h1要素だったら、img要素はOKだけど、div要素やp要素はダメよとか、そんな風に要素ごとに中に入れられるものが定義されています。

W3Cのサイトで要素ごとの内容を確認すると、わかります。

http://www.w3.org/TR/2012/CR-html5-20121217/

そんな風に、要素に応じて中に入れられるものを定義するという概念というか決まりごとを「コンテンツモデル」と言います。

基本的には要素ごとにコンテンツモデルがありますので、それぞれの要素に応じて中に含められる要素が決まっています。

今までのHTMLやXHTMLでは曖昧と言うか暗黙的というかそんな状態だったのですが、HTML5において、それが明示されたわけです。

なので、あまり硬く考えることなく、”ほぼ”普通に今までどおりの感覚でマークアップしても問題は無いでしょう。

実務的には、文法チェックをして、記述間違いを確認したいときの根拠などとして用いれば言いと思います。

ただし、一部、変わった名称のコンテンツモデルがあります。

「トランスペアレント」と言います。

トランスペアレントについては、よくこんな説明を目にします。

「トランスペアレントとは、その要素のコンテンツを、その要素のコンテンツに置き換えたとしても、HTML5で準拠していなければならない。」

これは、おそらく、W3Cのトランスペアレントコンテンツモデルについての解説の以下の文章

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.

の訳から派生して、こんな風になったのだと思いますが、ちょっと良くわかりません。

トランスペアレントとは、いわゆる「透明・透き通る」という意味がありますね。

コンテンツモデルがトランスペアレントとなっている要素は、親の言いなりのポリシーや主張の無い息子みたいなものです。

「僕、特に何でもいいので、パパのチョイスに任せます~」的な、少し残念な息子的な感じです。

コンテンツモデルがトランスペアレントな要素の代表例は、a要素です。

例えば、次の場合。a要素内にb要素があります。これはOKでしょうか?

<p>

<a>

<b>トランスペアレントとは?</b>

</a>

</p>

この場合は、a要素はノンポリなので、パパであるp要素のポリシー(コンテンツモデル)に従います。

p要素は「フレージング・コンテンツ」と言うコンテンツモデルを持っています。そのため、a要素にはフレージング・コンテンツというコンテンツモデルが引き継がれます。

パパのポリシーを息子が鵜呑みにするわけです。

で、b要素というのは、フレージング・コンテンツに含まれる要素に当たります。

なので、文法的にOKということになります。

次に、こちら。

<p>

<a>

<h1>トランスペアレントとは?</h1>

</a>

</p>

a要素内に、h1要素があります。これは、OKでしょうか?

これは、NGです。なぜなら、h1要素はフレージングコンテンツではなく、ヘディングコンテンツの要素であるからです。

「パパがダメっていうから、ダメなんです~」と言うように、a要素の中には、ヘディングコンテンツである、h1は入れることができません。

まあ、でも、p要素内にh1要素は入れないって言うのは、暗黙的に誰でも知っているんじゃないかとも思います。

でも、理屈としてはこんな風にトランスペアレントというコンテンツモデルがあるということを知ってても良いでしょう。

では、こちらはどうでしょうか?

<div>

<a>

<h1>トランスペアレントとは?</h1>

</a>

</div>

これは、OKなんですね。パパが違うと教育方針が違って、OKになるんです。

理屈としては、パパ要素である、divのコンテンツモデルがフローコンテンツであるからということになります。

フローコンテンツって言うのは、とても、ゆる~い、コンテンツモデルで、本文内で用いる大抵の要素は、フローコンテンツに含まれます。

なので、h1もフローコンテンツに含まれるので、OKなのです。

こんな風に、HTML5にはトランスペアレントっていうコンテンツモデルがありますよっていうお話でした。

でも、そもそも今回の話は、やっぱりカテゴリーについて知らないと分からないですよね~

今度は、いつか、カテゴリーについてお話します。
——————————————–

■略歴

石田 知志(いしだ さとし)

(株)A-flat代表取締役

http://a-flat.biz

03-5779-7694

IT系を中心とした各種の教材制作、テクニカルライティング、映像制作、セミナー撮影、技術資料の翻訳などを行っています。

主要なサービスとしては、画面録画付きセミナー撮影サービス「スマート☆プレゼンター」を提供しています。

http://a-flat.biz/archives/service-category/video

スクリーンも同時に精細に収録し、すぐにコンテンツ化します。セミナーDVDの制作、eラーニング、Webセミナー、Ustream中継などでご利用いただけます。