トップ > スキル : Web > HTML5

Web

各要素のリファレンス14

組み込みコンテンツ要素(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】