Flash ファイルの埋め込みに <object> 要素を使用する方法:
<object width="400" height="400" data="helloworld.swf"></object>
Try it Yourself ❯
<object> タグは、HTML 文書内に埋め込むオブジェクトを定義します。 この要素を使用して、Web ページ内にマルチメディア(オーディオ、ビデオ、Java アプレット、ActiveX、PDFファイル、Flash など)を埋め込みます。
<object> を使用して、HTML 文書に他の Web ページを埋め込むこともできます。
<object> タグで埋め込んだプラグインに、<param> タグを使用してパラメータを渡すことができます。
| 要素 | |||||
|---|---|---|---|---|---|
| <object> | Yes | Yes | Yes | Yes | Yes |
注: <object> 要素は、<body> 要素内に記述する必要があります。 <object> と </object> の間のテキストは、 このタグをサポートしていないブラウザのための代替テキストです。
チップ: 画像には、<object> タグではなく <img> タグを使用してください。
チップ: "data" か "type" 属性の何れか一つを定義する必要があります。
一部のHTML 4.01 の属性は、HTML5 ではサポート対象外です。
"form" 属性は、HTML5 で新しく追加されました。
HTML5 では、フォーム内で object を使用し、送信することができます。
HTML5 では、object を文書の <head> 要素内に記述することはできません。
= HTML5 で新規追加。
| 属性 | 値 | 説明 |
|---|---|---|
| align | top bottom middle left right |
HTML5 ではサポート対象外。 周囲の要素に応じて、 <object> 要素の配置を指定する |
| archive | URL | HTML5 ではサポート対象外。 URL アーカイブのスペース区切りリスト。 アーカイブには、オブジェクトに関連したリソースが含まれる |
| border | pixels | HTML5 ではサポート対象外。 <object> 周りのボーダーの幅を指定する |
| classid | class_ID | HTML5 ではサポート対象外。 Windows レジストリか、URL に設定するクラス ID の値を定義する |
| codebase | URL | HTML5 ではサポート対象外。 オブジェクトのコードを検索する場所を定義する |
| codetype | media_type | HTML5 ではサポート対象外。 classid 属性によって参照されるコードのメディアタイプ |
| data | URL | オブジェクトで使用するリソースの URL を指定する |
| declare | declare | HTML5 ではサポート対象外。 オブジェクトは宣言するだけで、必要になるまで作成されないか、 インスタンス化されないことを定義する |
| form | form_id | オブジェクトが属する 1 つ以上のフォームを指定する |
| height | pixels | オブジェクトの高さを指定する |
| hspace | pixels | HTML5 ではサポート対象外。 オブジェクトの左右に空白を指定する |
| name | name | オブジェクトの名前を指定する |
| standby | text | HTML5 ではサポート対象外。 オブジェクトのロード中に表示するテキストを定義する |
| type | media_type | data 属性で指定されたデータのメディアEタイプを指定する |
| usemap | #mapname | オブジェクトで使用するクライアント・サイド・イメージ·マップの名前を指定する |
| vspace | pixels | HTML5 ではサポート対象外。 オブジェクトの上下に空白を指定する |
| width | pixels | オブジェクトの幅を指定する |
<object> タグは、HTML のグローバル属性もサポートします。
<object> タグは、HTML のイベント属性もサポートします。
HTML チュートリアル:HTML Object Element
HTML DOM リファレンス:Object オブジェクト
ほとんどのブラウザは、次のデフォルト値を使用して <object> 要素を表示しています:
object:focus {
outline: none;
}