<object> - オブジェクトの張りつけ

• トップ
• HTMLリファレンス
• <object>

• 概要
• 説明
• 属性
  • 重要属性
  • 固有属性
  • 位置・大きさ属性
  • データバインド関連
  • 廃止属性
• サンプル
  • 画像を張りつける
  • RealMedia のコントロールを張りつける
  • サポートしているものを張りつける
  • ブラウザ内蔵の機能を呼び出す
• 詳細
  • classid のいろいろ
• 関連項目
• リンク

概要

形式

<object>～</object>

サポート

https://caniuse.com/mdn-html_elements_object

カテゴリ

フローコンテンツ

フレージングコンテンツ

エンベデッドコンテンツ

インタラクティブコンテンツ(usemap属性を持つ場合) (HTML Living Standard)

リステッド, サブミッタブル, リアソシエイタブル(HTML 5.1のみ), フォーム関連

パルパブルコンテンツ

親要素

エンベデッドコンテンツ を子要素に持てるもの

子要素

param要素, トランスペアレント

タグの省略

開始タグ:必須 / 終了タグ:必須

属性

グローバル属性

data

type

name

form

width

height

説明

<object> は、<applet>、<embed>、<bgsound> などに代わり、Java アプレットやマルチメディアリソースなどをページ上に貼り付けるための汎用的な要素タグです。

<object> の動作は、ブラウザやそのバージョン、インストールされているプラグインの種類などによって動作が大きく異なるので注意してください。

オブジェクトに対する詳細パラメータは <param> で指定していましたが、現在の HTML 標準である HTML Living Standard から <param> 要素が削除されました(2022年6月追記)。

属性

重要属性

グローバル属性

詳細は グローバル属性 を参照してください。

data=url

LS/H4/e3/Ch/Fx/Sa/Op/N4/i3。埋め込むデータファイルの URL を指定します。

type=type

LS/H4/e3/Ch/Fx/Sa/Op/N4。data 属性で指定したデータの MIMEタイプを指定します。i-modeでは application/x-jam(iアプリ/i3)、audio/3gpp(iモーション/i4)、video/3gpp(iモーション/i4)、application/x-shockwave-flash(Flash/i5)、application/x-ir(タグ指定送信/i5)などを指定することができます。

name=name

LS/H4/e3/Ch/Fx/Sa/Op。名前を指定します。

form=id

LS/H5。関連付けたい form要素のidを指定します。

固有属性

alt=alt

[非推奨] e6。テキストブラウザなどでオブジェクトの代わりに表示される文字列を指定します。

archive=archive

[非推奨] H4-4/e6。オブジェクトに関連するリソースがアーカイブされている時に、そのアーカイブファイルの URL リストをスペースで区切って指定します。

border=n

[非推奨] H4T-4T。<a href="...">～</a> で囲まれている時の枠線の太さをピクセルで指定します。

classid=classid

[非推奨] H4-4/e3/N4。実行ファイルの URL を指定します。データの形式に応じて data 属性と併用したり代用されたりします。IE で Active X コントロールを貼り付ける場合は、clsid:class-identifierを指定します。codebase を基準とします。

code=url

[非推奨] e4。コードの URL を指定します。

codebase=url

[非推奨] H4-4/e3/N4。classid、data、archive 属性の URL を探す際の基準となる URL を指定します。

codetype=codetype

[非推奨] H4-4/e3。classid で指定したプログラムの MIMEタイプを指定します。

declare

[非推奨] H4-4/i3。この属性があると、オブジェクトはダウンロードされてもすぐには実行されず、他の方法で起動されるまで待機状態になります。

standby=standby

[非推奨] H4-4。オブジェクトをダウンロード中に表示しておくテキストを指定します。

位置・大きさ属性

width=n

LS/H4/e3/N4/i5。横幅をピクセルかパーセンテージで指定します。

height=n

LS/H4/e3/N4/i5。高さをピクセルかパーセンテージで指定します。

hspace=n

[非推奨] H4T-4T/e3。オブジェクトの周りの横方向の余白をピクセル単位で指定します。

vspace=n

[非推奨] H4T-4T/e3。オブジェクトの周りの縦方向の余白をピクセル単位で指定します。

align=align

[非推奨] H4T-4T/e3/N4。周りのテキストとの位置関係を、abcbottom、absmiddle、baseline、bottom、center、left、middle、right、texttopのいずれかで指定します。HTML4.0ではbottom, middle, topのみが定義されています。

データバインド関連

datasrc=datasrc

[非推奨] e4。データバインド機能を用いる際の、データソースの ID を指定します。

廃止属性

typemustmatch

[非推奨] LS/H5。type属性と Content-Type の値が使用されるリソースの種別と一致している必要がある場合に指定します。HTML Living Standard でも定義されていましたが、廃止されました。

usemap=usemap

[非推奨] LS/H4-H5。クライアントサイドクリッカブルマップを使用する際の <map> タグの ID を指定します。HTML5 では定義されていましたが、HTML5.1 で廃止されました。HTML Living Standard でも当初はサポートされていましたが、後に廃止されました。

サンプル

画像を張りつける

下記のようにして画像オブジェクトを張りつけることができます。

<object data="example.gif" type="image/gif" width=100 height=100>
</object>

サポートしている画像を張りつける

次の例では、PNG 画像をサポートしていれば PNG 画像を、サポートしていなければ GIF 画像を貼り付けます。

<object data="example.png" type="image/png" height=100 width=100>
  <object data="example.gif" type="image/gif" height=100 width=100>
  </object>
</object>

動画(MP4)を張りつける

動画(MP4)を張り付けます。

<object data="example.mp4" type="video/mp4" width=100 height=100>
</object>

PDFを張り付ける

PDF を張り付けます。

<object data="example.pdf#page=10" type="application/pdf" style="width:100%; height:25rem;">
</object>

Flashを張りつける

今ではほとんど使用されておらず、ブラウザのサポートの終了してしまいましたが、Flash を張り付けるには次のようにしていました。

<object data="example.swf" type="application/x-shockwave-flash">
  <param name="foo" value="var">
</object>

RealMedia のコントロールを張りつける

これも現在では利用されていませんが、RealNetworks 社の RealMedia を再生するコントロールを張りつけるには次の様にしていました。<object> 未サポートのブラウザのために、内部で <embed> による呼び出しも記述しています。

<object classid="CLSID:CFCDAA03-8BE4-11CF-B84B-0020AFBBCCFA"
  width="260" height="30">
  <param name="SRC" value="example.rm">
  <param name="AUTOSTART" value="false">
  <param name="CONTROLS" value="ControlPanel">
  <param name="CONSOLE" value="cons">
  <param name="NOLOGO" value="true">
  <embed type="audio/x-pn-realaudio-plugin" src="xxx.rm"
    autostart="false" width="260" height="30" controls="ControlPanel"
    console="cons" name="player" nologo="true">
  </embed>
</object>

ブラウザ内蔵の機能を呼び出す

これも現在では利用されていませんが、Internet Explorer でサポートされていた ActiveX コントロールのひとつを使用して、動く画像を実現するサンプルです。

<img id="img1" src="example.gif" style="position:absolute">
<object classid="clsid:D7A7D7C3-D47F-11D0-89D3-00A0C90833E6">
  <param name="AutoStart" value="-1">
  <param name="Direction" value="1">
  <param name="Repeat" value="-1">
  <param name="Bounce" value="0">
  <param name="Duration" value="5">
  <param name="Shape" value="Rect(0,0,100,100)">
  <param name="Target" value="img1">
  <param name="TimerInterval" value="0.02">
</object>

詳細

classid のいろいろ

よく使用される classid には次のようなものがあります。

関連項目

• <applet>
• <bgsound>
• <embed>
• <param>

リンク

• https://html.spec.whatwg.org/multipage/iframe-embed-object.html#the-object-element
• https://www.w3.org/TR/2014/REC-html5-20141028/embedded-content-0.html#the-object-element
• https://www.w3.org/TR/html401/struct/objects.html#edef-OBJECT
• https://developer.mozilla.org/ja/docs/Web/HTML/Element/object
• https://caniuse.com/mdn-html_elements_object