diff options
Diffstat (limited to 'files/ja/web/html/element/embed/index.html')
| -rw-r--r-- | files/ja/web/html/element/embed/index.html | 131 |
1 files changed, 131 insertions, 0 deletions
diff --git a/files/ja/web/html/element/embed/index.html b/files/ja/web/html/element/embed/index.html new file mode 100644 index 0000000000..f1eae81e90 --- /dev/null +++ b/files/ja/web/html/element/embed/index.html @@ -0,0 +1,131 @@ +--- +title: '<embed>: 埋め込み外部コンテンツ要素' +slug: Web/HTML/Element/embed +tags: + - Element + - Embedding Content + - External content + - HTML + - HTML embedded content + - HTML5 + - Plugins + - Reference + - Web + - embed +translation_of: Web/HTML/Element/embed +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML の <code><embed></code> 要素</strong>は、外部のコンテンツを文書中の指定された場所に埋め込みます。コンテンツは外部アプリケーションや、対話型コンテンツの他の出所 (ブラウザーのプラグインなど) によって提供されます。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/embed.html", "tabbed-standard")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<div class="blockIndicator note"> +<p><strong>注:</strong> 本文書は、 HTML5 の一部として定義された要素についてのみ記載します。以前の標準化されていない要素の実装については扱いません。</p> +</div> + +<p>最近のほとんどのブラウザーは、ブラウザーのプラグインの対応を非推奨にして削除しているため、サイトを平均的なユーザーのブラウザーで操作できるようにしたいのであれば、 <code><embed></code> に頼ることは賢明ではないということを意識しておいてください。</p> + +<table class="properties"> + <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#Palpable_content">知覚可能コンテンツ</a></td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td>なし。これは{{Glossary("empty element", "空要素")}}です。</td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>開始タグは必須。終了タグを記述してはならない。</td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td>埋め込みコンテンツを受け入れるすべての要素。</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("img")}}, {{ARIARole("none")}}, {{ARIARole("presentation")}}</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLEmbedElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素には<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>があります。</p> + +<dl> + <dt>{{htmlattrdef("height")}}</dt> + <dd>このリソースを表示する高さを <a href="https://drafts.csswg.org/css-values/#px">CSS ピクセル値</a>で示します。絶対的な値でなければなりません。パーセント値は使用<em>できません</em>。</dd> + <dt>{{htmlattrdef("src")}}</dt> + <dd>埋め込むリソースの URL を示します。</dd> + <dt>{{htmlattrdef("type")}}</dt> + <dd>インスタンス化するプラグインを選択するために使用する {{glossary("MIME type", "MIME タイプ")}}。</dd> + <dt>{{htmlattrdef("width")}}</dt> + <dd>このリソースを表示する幅を <a href="https://drafts.csswg.org/css-values/#px">CSS ピクセル値</a>で示します。絶対的な値でなければなりません。パーセント値は使用<em>できません</em>。</dd> +</dl> + +<h2 id="Usage_notes" name="Usage_notes">使用上のメモ</h2> + +<p>{{cssxref("object-position")}} プロパティを使用して、要素のフレーム内の埋め込みオブジェクトの位置を調整することができ、 {{cssxref("object-fit")}} プロパティを使用して、オブジェクトの寸法をフレーム内にどのように合わせるかを制御することができます。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<pre class="brush: html notranslate"><embed type="video/quicktime" src="movie.mov" width="640" height="480" title="私の動画の題名"> +</pre> + +<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮</h2> + +<p><code>embed</code> 要素に <a href="/ja/docs/Web/HTML/Global_attributes/title"><code>title</code> 属性</a>を使用してコンテンツにラベルを付けるようにしてください。そうすれば、読み上げソフトのような支援技術を使用して捜査している人々が内容を理解することができるようになります。題名がないと、埋め込みコンテンツが何であるかを特定することができません。このようにして文脈を見失うと、特に <code>embed</code> 要素が動画や音声のような対話的なコンテンツを含んでいたとに、混乱したり時間を浪費したりします。</p> + +<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-embed-element', '<embed>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'semantics-embedded-content.html#the-embed-element', '<embed>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="note"> +<p><strong>注:</strong> Firefox のバージョン45以前では HTML リソースの内容を表示せず、プラグインが必要である旨の汎用的なメッセージを表示します ({{Bug("730768")}} をご覧ください)。</p> +</div> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.embed")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>様々な種類のコンテンツの埋め込みのために使用されるその他の要素: {{HTMLElement("audio")}}, {{HTMLElement("canvas")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{MathMLElement("math")}}, {{HTMLElement("object")}}, {{SVGElement("svg")}}, {{HTMLElement("video")}}</li> + <li>フレーム内での埋め込みコンテンツの位置や寸法の設定: {{cssxref("object-position")}} および {{cssxref("object-fit")}}</li> +</ul> |