<object></object>
| 更新日 | |
|---|---|
| 仕様 | HTML Living Standard |
| 分類 | フロー・コンテンツ / フレージング・コンテンツ / エンベッディッド・コンテンツ / リスト化されるフォーム関連要素 / パルパブル・コンテンツ |
| 利用場所 | エンベッディッド・コンテンツが置ける場所 |
| 内容 | トランスペアレント（親要素のコンテンツモデルを継承） |
object要素は、様々な形式のコンテンツ（画像、HTML文書、プラグインデータ、等）を文書内に埋め込みます。
<object data="example.jpg" type="image/jpeg" width="300" height="150"></object>
| 属性 | 値 | ||
|---|---|---|---|
| 必須属性 | |||
data="" |
コンテンツの指定 | URL | 埋め込むコンテンツのURL |
| 任意属性 | |||
type="" |
コンテンツのMIMEタイプ | MIMEタイプ | 埋め込むコンテンツのMIMEタイプ |
width="" |
コンテンツの幅 | 数値 | ピクセル数 |
height="" |
コンテンツの高さ | 数値 | ピクセル数 |
name="" |
コンテンツの領域名 | アンダースコア（ _ ）で始まらない文字列 |
固有の領域名（ブラウジング・コンテキスト名） |
form="" |
フォームとの関連付け | ID名 | 対応するform要素に指定したID名 |
| 廃止属性（HTML Living Standardでは未定義） | |||
usemap="" |
 クライアントサイド・イメージマップ |
#マップ名 |
イメージマップの名前 |
typemustmatch |
MIMEタイプの一致を必要とする |
（typemustmatch） |
値は省略可能 |
- form属性は、object要素とform要素とを関連付ける際に使用します。
name属性の詳細については、下記のページを参考にしてください。
コンテンツの埋め込み方法
コンテンツのURLを、data属性で指定します。例えば次のように記述した場合は、example.mpg がその場所に埋め込まれることになります。
<p><object data="example.mpg" type="video/mpeg"></object></p>
パラメータの指定について
パラメータを指定する場合は、object要素内の最初の部分（代替コンテンツよりも前）にparam要素を配置します。
<object data="example.swf" type="application/x-shockwave-flash" width="300" height="150"> <param name="movie" value="example.swf"> <param name="quality" value="high"> <param name="bgcolor" value="#ffffff"> 代替コンテンツはparam要素の後に配置します。 </object>
★param要素が廃止されたため、上記は過去の情報となります。（参考情報としてしばらく残しておきます）
代替コンテンツについて
指定したコンテンツが利用できない場合は、object要素の内容が利用されることになります。
次の例では、object要素に対応していない、または動画（MPEG）を利用できない環境の場合に、静止画像（JPEG）が表示されるように指定しています。
<object data="example.mpg" type="video/mpeg" width="300" height="200">
<p>動画を再生できません。</p>
<p><img src="example.jpg" alt="サンプル" width="300" height="200"></p>
</object>
次の例では、object要素で埋め込めない場合に、embed要素で埋め込まれるように指定しています。
<object data="example.mpg" type="video/mpeg" width="300" height="200">
<embed src="example.mpg" type="video/mpeg" width="300" height="200">
</object>
次の例では、object要素で埋め込めない場合に、動画ファイルへのリンクが表示されるようにしています。
<object data="example.mpg" type="video/mpeg" width="300" height="200">
<p><a href="example.mpg">動画を見る</a></p>
</object>
object要素の内容について
object要素は、親要素のコンテンツ・モデルを継承します（トランスペアレント）。そのため、親要素の種類によっては、代替コンテンツとして配置できない要素もあるので注意が必要です。
<figure>
<object data="example.mpg" type="video/mpeg" width="300" height="200">
<p>動画を再生できません。</p>
</object>
</figure>
例えば、上記の場合は問題ありませんが、次の例では文法違反となります。（p要素内にはフレージング・コンテンツしか配置できないため）
<p>
<object data="example.mpg" type="video/mpeg" width="300" height="200">
<p>動画を再生できません。</p>
</object>
</p>
他の埋め込み要素との比較
- 旧HTMLからの変更点
-
- HTML5：classid属性、codetype属性、archive属性、codebase属性、standby属性、declare属性、align属性、border属性、hspace属性、vspace属性が廃止されました。
- HTML5：usemap属性、typemustmatch属性、form属性が追加されました。
- HTML5：name属性の定義が変わりました。（フォーム部品としての名前 → 埋め込む領域の名前（ブラウジング・コンテキスト名））
- HTML5：width属性とheight属性の値にパーセント値を指定できなくなりました。
- HTML5：head要素内に配置できなくなりました。
- HTML5.1：usemap属性が廃止されました。
- HTML LS：typemustmatch属性が廃止されました。また、usemap属性がいったん復活したらしいのですが、現在は未定義となっています。
- HTML LS：param要素が廃止されたことに伴い、object要素のコンテンツ・モデルが変更されました。（param要素を0個以上、その後にトランスペアレント → トランスペアレント）
- HTML LS：data属性の指定が必須となりました。
使用例
<object data="clock.swf" type="application/x-shockwave-flash" width="130" height="130">
<param name="movie" value="clock.swf">
<param name="quality" value="high">
<p>Flashを埋め込むことができませんでした。</p>
<p><img src="clock.gif" alt="" width="130" height="130"></p>
</object>
<object data="graph.gif" type="image/gif" width="172" height="85">
<table>
<tr>
<th scope="col">年</th><th scope="col">売上</th>
</tr>
<tr>
<td>2009年</td><td>5000万円</td>
</tr>
<tr>
<td>2010年</td><td>5600万円</td>
</tr>
<tr>
<td>2011年</td><td>3000万円</td>
</tr>
</table>
</object>
- 表示例
<object data="oexample_a.html" type="text/html" width="270" height="150" name="example">
<p><a href="oexample_a.html">サンプル1へ</a></p>
</object>
- 表示例