diff options
| -rw-r--r-- | files/ja/web/html/element/object/index.md | 243 |
1 files changed, 109 insertions, 134 deletions
diff --git a/files/ja/web/html/element/object/index.md b/files/ja/web/html/element/object/index.md index fd38b508e1..f4c9b5e8a1 100644 --- a/files/ja/web/html/element/object/index.md +++ b/files/ja/web/html/element/object/index.md @@ -1,147 +1,122 @@ --- -title: <object> +title: '<object>: 外部オブジェクト要素' slug: Web/HTML/Element/object tags: - - Element + - 要素 - HTML - - HTML embedded content - - Reference - - Web + - HTML 埋め込みコンテンツ + - リファレンス + - ウェブ +browser-compat: html.elements.object translation_of: Web/HTML/Element/object --- -<p>{{HTMLRef}}</p> -<p><strong>HTML の <code><object></code> 要素</strong>は、画像、内部の閲覧コンテキスト、プラグインによって扱われるリソースなどのように扱われる外部リソースを表現します。</p> +{{HTMLRef}} -<div>{{EmbedInteractiveExample("pages/tabbed/object.html", "tabbed-standard")}}</div> +**`<object>`** は [HTML](/en-US/docs/Web/HTML) の要素で、画像、内部の閲覧コンテキスト、プラグインによって扱われるリソースなどのように扱われる外部リソースを表します。 -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> +{{EmbedInteractiveExample("pages/tabbed/object.html", "tabbed-standard")}} <table class="properties"> - <tbody> - <tr> - <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th> - <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>, <a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>, <a href="/ja/docs/Web/HTML/Content_categories#Embedded_content">埋め込みコンテンツ</a>, 知覚可能コンテンツ、要素が {{htmlattrxref("usemap","object")}} 属性を持つ場合は <a href="/ja/docs/Web/HTML/Content_categories#Interactive_content">対話型コンテンツ</a>, <a href="/ja/docs/Web/HTML/Content_categories#Form_listed">リスト化</a>/<a href="/ja/docs/Web/HTML/Content_categories#Form_submittable">送信可能</a> な <a href="/ja/docs/Web/HTML/Content_categories#Form-associated_content">フォーム関連要素</a></td> - </tr> - <tr> - <th scope="row">許可されている内容</th> - <td>0個以上の {{HTMLElement("param")}} 要素とそれに続く <a href="/ja/docs/Web/HTML/Content_categories#Transparent_content_model">透過的コンテンツ</a></td> - </tr> - <tr> - <th scope="row">タグの省略</th> - <td>{{no_tag_omission}}</td> - </tr> - <tr> - <th scope="row">許可されている親要素</th> - <td><a href="/ja/docs/Web/HTML/Content_categories#Embedded_content">埋め込みコンテンツ</a>を受け入れるすべての要素</td> - </tr> - <tr> - <th scope="row">暗黙の ARIA ロール</th> - <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">対応するロールなし</a></td> - </tr> - <tr> - <th scope="row">許可されている ARIA ロール</th> - <td>{{ARIARole("application")}}, {{ARIARole("document")}}, {{ARIARole("image")}}</td> - </tr> - <tr> - <th scope="row">DOM インターフェイス</th> - <td>{{domxref("HTMLObjectElement")}}</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row"> + <a href="/ja/docs/Web/Guide/HTML/Content_categories">コンテンツカテゴリー</a> + </th> + <td> + <a href="/ja/docs/Web/Guide/HTML/Content_categories#flow_content">フローコンテンツ</a>、<a href="/ja/docs/Web/Guide/HTML/Content_categories#phrasing_content">記述コンテンツ</a>、<a href="/ja/docs/Web/Guide/HTML/Content_categories#embedded_content">埋め込みコンテンツ</a>、知覚可能コンテンツ、要素が {{htmlattrxref("usemap","object")}} 属性を持つ場合は <a href="/ja/docs/Web/Guide/HTML/Content_categories#interactive_content">対話型コンテンツ</a>、<a href="/ja/docs/Web/Guide/HTML/Content_categories#form_listed">リスト化</a>/<a href="/ja/docs/Web/Guide/HTML/Content_categories#form_submittable">送信可能</a> な <a href="/ja/docs/Web/Guide/HTML/Content_categories#form-associated_content">フォーム関連要素</a> + </td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td> + 0 個以上の {{HTMLElement("param")}} 要素とそれに続く <a href="/ja/docs/Web/Guide/HTML/Content_categories#transparent_content_model">透過的コンテンツ</a> + </td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td> + <a href="/ja/docs/Web/Guide/HTML/Content_categories#embedded_content">埋め込みコンテンツ</a>を受け入れるすべての要素 + </td> + </tr> + <tr> + <th scope="row">暗黙の ARIA ロール</th> + <td> + <a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">対応するロールなし</a></td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td>{{ARIARole("application")}}, {{ARIARole("document")}}, {{ARIARole("image")}}</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLObjectElement")}}</td> + </tr> + </tbody> </table> -<h2 id="Attributes" name="Attributes">属性</h2> - -<p>この要素は、すべての HTML 要素で共通の<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>と、以下に列挙する属性を持ちます。</p> - -<dl> - <dt>{{HTMLAttrDef("archive")}}{{HTMLVersionInline(4)}} のみ。 {{Obsolete_Inline("HTML5")}}</dt> - <dd>オブジェクトのリソースの URI 群を、半角スペースで区切って指定。</dd> - <dt>{{HTMLAttrDef("border")}}{{Deprecated_Inline("HTML4.01")}}{{Obsolete_Inline("HTML5")}}</dt> - <dd>コントロールの境界線のピクセル幅。※指定時に px などの単位は不要。</dd> - <dt>{{HTMLAttrDef("classid")}}{{HTMLVersionInline(4)}} のみ。 {{Obsolete_Inline("HTML5")}}</dt> - <dd>オブジェクトの実装の URI。 <strong>data</strong> 属性とともに、または <strong>data</strong> 属性の代替として用いることができます。</dd> - <dt>{{HTMLAttrDef("codebase")}}{{HTMLVersionInline(4)}} のみ。 {{Obsolete_Inline("HTML5")}}</dt> - <dd><strong>classid</strong> 属性、<strong>data</strong> 属性、<strong>archive</strong> 属性で指定された相対 URI を解決するための基準パス。指定しない場合、既定値は現在の文書のベース URI となります。</dd> - <dt>{{HTMLAttrDef("codetype")}}{{HTMLVersionInline(4)}} のみ。 {{Obsolete_Inline("HTML5")}}</dt> - <dd><strong>classid</strong> によって指定されたデータの、コンテンツ・タイプ。</dd> - <dt>{{HTMLAttrDef("data")}}</dt> - <dd>リソースのアドレスを有効な URL で指定。<strong>data</strong> 属性と <strong>type</strong> 属性のうち、少なくとも1つは定義しておく必要があります。</dd> - <dt>{{HTMLAttrDef("declare")}}{{HTMLVersionInline(4)}} のみ。 {{Obsolete_Inline("HTML5")}}</dt> - <dd>この論理属性は属性名を指定するだけで有効になります。オブジェクトは、後続する <code><object></code> 要素でインスタンス化しなければなりません。HTML5 ではリソースを再利用するごとに、完全な形の <object> 要素を繰り返し配置します。</dd> - <dt>{{HTMLAttrDef("form")}}{{HTMLVersionInline(5)}}</dt> - <dd>オブジェクトがフォームに関連付けられている場合、そのフォーム（※フォームオーナー）の id を指定。属性値は、同一文書内の {{HTMLElement("form")}} 要素の id でなければなりません。</dd> - <dt>{{HTMLAttrDef("height")}}</dt> - <dd>表示されるリソースの高さを <a href="https://drafts.csswg.org/css-values/#px">CSS ピクセル値</a> で指定。(絶対値に限ります。<a href="https://html.spec.whatwg.org/multipage/embedded-content.html#dimension-attributes">パーセント値は不可</a>)</dd> - <dt>{{HTMLAttrDef("name")}}</dt> - <dd>有効な閲覧コンテキストの名前 (HTML5) またはコントロールの名前 (HTML 4)。</dd> - <dt>{{HTMLAttrDef("standby")}}{{HTMLVersionInline(4)}} のみ。 {{Obsolete_Inline("HTML5")}}</dt> - <dd>オブジェクトの実装とデータの読み込み中にブラウザーに表示することができるメッセージ。</dd> - <dt>{{HTMLAttrDef("tabindex")}}{{HTMLVersionInline(4)}} のみ。 {{Obsolete_Inline("HTML5")}}</dt> - <dd>現在の文書のタブナビゲーション順序におけるこの要素の位置。</dd> - <dt>{{HTMLAttrDef("type")}}</dt> - <dd><strong>data</strong> 属性によって指定されたリソースの <a href="/ja/docs/Glossary/Content_type">content type</a>。<strong>data</strong> 属性と <strong>type</strong> 属性のうち、少なくとも 1 つは定義しておく必要があります。</dd> - <dt>{{HTMLAttrDef("typemustmatch")}}{{HTMLVersionInline(5)}}</dt> - <dd>この論理属性は、リソースを使用するためには <strong>type</strong> 属性の値とリソースの実際の <a href="/ja/docs/Glossary/Content_type">content type</a> が一致していなければならないかを示します。</dd> - <dt>{{HTMLAttrDef("usemap")}}</dt> - <dd>{{HTMLElement("map")}} 要素を参照するハッシュ名。 '#' の後に map 要素の {{htmlattrxref("name", "map")}} 属性を繋げた文字列を属性値として記述します。</dd> - <dt>{{HTMLAttrDef("width")}}</dt> - <dd>表示されるリソースの幅を <a href="https://drafts.csswg.org/css-values/#px">CSS ピクセル値</a> で指定。(絶対値に限ります。<a href="https://html.spec.whatwg.org/multipage/embedded-content.html#dimension-attributes">パーセンテージは不可</a>)</dd> -</dl> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Embed_a_flash_movie" name="Embed_a_flash_movie">Flash 動画を埋め込む</h3> - -<pre class="brush: html notranslate"><!-- 埋め込み Flash 動画 --> -<object data="movie.swf" - type="application/x-shockwave-flash"></object> - -<!-- 引数付き埋め込み Flash 動画 --> -<object data="movie.swf" type="application/x-shockwave-flash"> - <param name="foo" value="bar"> -</object> -</pre> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("HTML WHATWG", "embedded-content.html#the-object-element", "<object>")}}</td> - <td>{{Spec2("HTML WHATWG")}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName("HTML5 W3C", "semantics-embedded-content.html#the-object-element", "<object>")}}</td> - <td>{{Spec2("HTML5 W3C")}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName("HTML4.01", "struct/objects.html#h-13.3", "<object>")}}</td> - <td>{{Spec2("HTML4.01")}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>注: Google Chrome はテキストの検索 (<kbd>ctrl + F</kbd> のショートカットからアクセス) で <code><object></object></code> タグ内の検索に対応していません。</p> - -<p>{{Compat("html.elements.object")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{HTMLElement("applet")}} {{Obsolete_Inline}}</li> - <li>{{HTMLElement("embed")}}</li> - <li>{{HTMLElement("param")}}</li> -</ul> +## 属性 + +この要素は[グローバル属性](/ja/docs/Web/HTML/Global_attributes)を持っています。 + +- {{HTMLAttrDef("archive")}} {{deprecated_inline}} + - : オブジェクトのリソースの URI 群を、半角スペースで区切って指定。 +- {{HTMLAttrDef("border")}} {{deprecated_inline}} + - : コントロールの境界線のピクセル幅。※指定時に px などの単位は不要。 +- {{HTMLAttrDef("classid")}} {{deprecated_inline}} + - : オブジェクトの実装の URI。 **data** 属性とともに、または **data** 属性の代替として用いることができます。 +- {{HTMLAttrDef("codebase")}} {{deprecated_inline}} + - : **classid** 属性、**data** 属性、**archive** 属性で指定された相対 URI を解決するための基準パス。指定しない場合、既定値は現在の文書のベース URI となります。 +- {{HTMLAttrDef("codetype")}} {{deprecated_inline}} + - : **classid** によって指定されたデータのコンテンツ型。 +- {{HTMLAttrDef("data")}} + - : リソースのアドレスを有効な URL で指定。**data** 属性と **type** 属性のうち、少なくとも1つは定義しておく必要があります。 +- {{HTMLAttrDef("declare")}} {{deprecated_inline}} + - : この論理属性は属性名を指定するだけで有効になります。オブジェクトは、後続する `<object>` 要素でインスタンス化しなければなりません。HTML5 ではリソースを再利用するごとに、完全な形の \<object> 要素を繰り返し配置します。 +- {{HTMLAttrDef("form")}} + - : このオブジェクト要素がフォームに関連付けられていれば、そのフォーム要素 (_フォームオーナー_)。属性値は、同一文書内の {{HTMLElement("form")}} 要素の ID でなければなりません。 +- {{HTMLAttrDef("height")}} + - : 表示されるリソースの高さを [CSS ピクセル数](https://drafts.csswg.org/css-values/#px) で指定。(絶対値に限ります。[パーセント値は不可](https://html.spec.whatwg.org/multipage/embedded-content.html#dimension-attributes)) +- {{HTMLAttrDef("name")}} + - : 有効な閲覧コンテキストの名前 (HTML5) またはコントロールの名前 (HTML 4)。 +- {{HTMLAttrDef("standby")}} {{deprecated_inline}} + - : オブジェクトの実装とデータの読み込み中にブラウザーに表示することができるメッセージ。 +- {{HTMLAttrDef("type")}} + - : **data** 属性によって指定されたリソースの [content type](/ja/docs/Glossary/MIME_type)。**data** 属性と **type** 属性のうち、少なくとも 1 つは定義しておく必要があります。 +- {{HTMLAttrDef("usemap")}} + - : {{HTMLElement("map")}} 要素を参照するハッシュ名。 '#' の後に map 要素の {{htmlattrxref("name", "map")}} 属性を繋げた文字列を属性値として記述します。 +- {{HTMLAttrDef("width")}} + - : 表示されるリソースの幅を [CSS ピクセル数](https://drafts.csswg.org/css-values/#px) で指定。(絶対値に限ります。[パーセンテージは不可](https://html.spec.whatwg.org/multipage/embedded-content.html#dimension-attributes)) + +## 例 + +### Flash 動画を埋め込む + +```html +<!-- 埋め込み Flash 動画 --> +<object data="movie.swf" + type="application/x-shockwave-flash"></object> + +<!-- 引数付き埋め込み Flash 動画 --> +<object data="movie.swf" type="application/x-shockwave-flash"> + <param name="foo" value="bar"> +</object> +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{HTMLElement("applet")}} {{deprecated_inline}} +- {{HTMLElement("embed")}} +- {{HTMLElement("param")}} |