組み込みコンテンツ要素(2/4)
embed要素(プラグイン)
カテゴリ | フロー・コンテンツ、フレージング・コンテンツ、エンベッディッド・コンテンツ、インタラクティブ・コンテンツ |
---|---|
コンテンツモデル | 空 |
利用可能な場所 | エンベッディッド・コンテンツが期待される場所 |
開始タグ | 必須 |
終了タグ | 禁止(ただし<embed />は表記可) |
要素固有のコンテンツ属性 | src(組み込むコンテンツのアドレス指定) type(プラグインのMIMEタイプを指定) width(組み込むコンテンツの横幅を指定) height(組み込むコンテンツの縦幅を指定) |
デフォルトスタイル | - |
embed要素は以前からプラグインの組み込みに使われてきた要素ですが、HTML4やXHTML1では規定されていない要素でしたが、HTML5から正式に仕様が規定されています。
embed要素は空要素なので、canvas要素、video要素のような開始タグと終了タグの中にフォールバック・コンテンツをマークアップすることはできません。実際の利用は、embed要素そのものが、object要素などのフォールバック・コンテンツとして使われます。
object要素(一般的な外部コンテンツ)
カテゴリ | フロー・コンテンツ、フレージング・コンテンツ、エンベッディッド・コンテンツ、usemapコンテンツ属性が存在する場合はインタラクティブ・コンテンツ |
---|---|
コンテンツモデル | 0個以上のparam要素に続き、トランスペアレント |
利用可能な場所 | エンベッディッド・コンテンツが期待される場所 |
開始タグ | 必須 |
終了タグ | 必須 |
要素固有のコンテンツ属性 | data(組み込むコンテンツのアドレス指定) type(組み込むコンテンツのMIMEタイプを指定) name(ブラウジング・コンテキスト名を指定) usemap(クライアント・サイド・イメージマップを目的に、そのオブジェクトと結びつけるmap要素へのハッシュ名参照を指定) form(関連付けたいform要素のid属性値を指定) width(組み込むコンテンツの横幅を指定) height(組み込むコンテンツの縦幅を指定) |
デフォルトスタイル | - |
object要素は、主にプラグインを組み込む時に利用されますが、プラグインだけではなく、画像を組み込んだり、iframe要素のような別のページのコンテンツを組み込んで表示させることもできます。開始タグと終了タグの中に入れたコンテンツは、フォールバック・コンテンツとして機能します。
object要素にもいくつかの要素固有のコンテンツ属性があります。
★ dataコンテンツ属性とtypeコンテンツ属性
dataコンテンツ属性にコンテンツのURLを、typeコンテンツ属性にそのコンテンツのMIMEタイプを指定すれば、ブラウザが対応していれば、それを表示することができます。
■利用例
<object data="mark.svg" type="image/svg+xml"> <img src="mark.png" alt="マーク矢印" /> </object>
利用例は、object要素を使ってSVGのイメージを組み込もうとしています。もし、ブラウザがSVGをサポートしていない時は、object要素の中のPNGイメージがフォールバックされて表示されます。
★ nameコンテンツ属性
object要素では、iframe要素のようにHTMLを組み込むことができます。nameコンテンツ属性を指定することで、object要素で新たに生成されるブラウジング・コンテキストに名前を与えることができます。
■利用例
<object data="other.html" type="text/html" name="fig"></object> <p><a href="other2.html" target="fig">更新情報</a></p>
利用例では、object要素にnameコンテンツ属性をセットして、ブラウジング・コンテキスト名を指定しています。a要素のtargetコンテンツ属性に、そのブラウジング・コンテキスト名を指定することで、そのa要素のハイパーリンクをたどると、object要素のコンテンツとして表示されます。IEではまだ非対応ですが、その他のブラウザではサポートしています。
★ usemapコンテンツ属性
このコンテンツ属性を指定すると、該当のobject要素がイメージマップに関連付けられていることを表すことができます。このコンテンツ属性には、map要素のname属性値の前に#を加えた値をセットします。
★ formコンテンツ属性
object要素は、フォーム関連要素になることができます。formコンテンツ属性にform要素のidコンテンツ属性の値を指定すると、form要素の中になくても、そのform要素が構成するフォームのコントロールとして機能します。
■利用例
<form id="form" action="post.cgi" method="post"> <p><input type="submit" value="送信" /></p> </form> <p> <object form="form" data="cal.swf" type="application/x-shockwave-flash" width="150" height="200" id="cal"> <param name="movie" value="cal.swf" /> </object> </p>
利用例では、プラグインを使って、カレンダーのインターフェイスを提供しています。object要素はform要素の中にマークアップされていませんが、formコンテンツ属性によって、前にマークアップされたform要素と関連付けられることになります。
★ width、heightコンテンツ属性
widthコンテンツ属性とheightコンテンツ属性には、object要素によってレンダリングされる領域の横幅と縦幅を指定します。
■利用例
<object data="mark.svg" type="image/svg+xml" width="100" height="200"> <img src="mark.png" alt="マーク矢印" width="100" height="200" /> </object>
param要素(プラグインの初期パラメータ)
カテゴリ | なし |
---|---|
コンテンツモデル | 空 |
利用可能な場所 | object要素の子として、ただし、object要素にフロー・コンテンツがあれば、それより前に入れなければいけない |
開始タグ | 必須 |
終了タグ | 禁止(ただし、<param />は表記可) |
要素固有のコンテンツ属性 | name(パラメータの名前を指定) value(パラメータの値を指定) |
デフォルトスタイル | param{ display:none; } |
param要素は、object要素で組み込むプラグインが呼び出される際に、そのプラグインが初期値として採用するパラメータを定義します。nameコンテンツ属性にパラメータの名前を、valueコンテンツ属性にパラメータの値を指定します。どちらのコンテンツ属性も必須です。また、param要素はobject要素の中でしか利用できません。
■利用例
<object form="form" data="cal.swf" type="application/x-shockwave-flash" width="150" height="200" id="cal"> <param name="allowScriptAccess" value="idDomain" /> <param name="allowFullScreen" value="false" /> <param name="movie" value="cal.swf" /> <param name="quality" value="high" /> <param name="bgcolor" value="#ffffff" /> <p>このコンテンツのご利用にはFlash Playerが必要です。</p> </object>
利用例では、プラグインにFlashを組み込んでいますが、このプラグインに引き渡すパラメータをparam要素でマークアップしています。object要素のフォールバック・コンテンツとなるp要素はparam要素の後ろにマークアップする必要があることに注意してください。
【各要素のリファレンス14】