<object> 外部リソースをページに埋め込む

取り扱い 現行の標準
カテゴリ フロー・コンテンツ
フレージング・コンテンツ
エンベッデッド・コンテンツ
パルパブル・コンテンツ
usemap属性が与えられた場合、インタラクティブ・コンテンツ
親にできる要素 エンベッデッド・コンテンツを受け入れる要素
子にできる要素 <param>とそれに続くトランスパレント・コンテンツ
対応ブラウザ caniuseで確認

<object>タグの説明

<object>は、ドキュメントの中に外部リソースを読み込み、オブジェクトとして埋め込む際に使用します。この要素は、<img><embed>と違って終了タグを持っているため、その間に代替コンテンツやパラメーターを持たせておくことができます。

外部リソースとして想定されるのは、画像や動画、音声といったメディアファイル、PDFやHTML以外の文章ファイルなどです。埋め込みに必要なコンテンツは、基本的にURLで読み込みます。プラグインを介して操作するようなコンテンツの場合、この要素の範囲内に<param>を配置し、適切なパラメーターの設定を行います。

<object>タグの特徴

  • レイアウトの初期値はインラインです。文章の改行には影響を与えません。
  • 視覚的な効果は特に与えられませんが、範囲を指定すると内部にコンテンツが埋め込まれます。
  • 同一のページ内に複数使うことができます。ただし、この要素自体を入れ子にすることはできません。

<object>に指定できる主な属性

data
リソースのURLを指定します。data属性とtype属性は、どちらか一つが必須となります。
type
data属性によって読み込まれるリソースの種別をcontent typeで指定します。data属性とtype属性は、どちらか一つが必須となります。
width
オブジェクトの幅を指定します。
height
オブジェクトの高さを指定します。
form
オブジェクトが<form>と関連付けられる場合に、対象のidと一致する値を指定します。
name
有効な閲覧コンテキストの値を設定します。
usemap
<map>と関連付ける場合に、参照するname属性の値と一致させます。
グローバル属性
全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。
イベントハンドラ
全てのHTML要素に指定できるコンテンツ属性です。

<object>の使い方とサンプル

このタグを使ったマークアップのサンプルです。

HTML
<object type="application/x-shockwave-flash" data="images/flash/flash-sample.swf" width="100" height="100" id="flash-sample">
	<param name="movie" value="flash/flash-sample.swf">
</object>
表示確認

<object>に関連するHTMLタグ

オブジェクトやスクリプトを埋め込む要素
<img> 画像を表示する
<picture> 特定の画像に対して複数のメディアソースを提供するコンテナを設置する
<figure> 写真や図表などの自己完結した要素を表す
<figcaption> 参照される写真や図表にキャプションを追加する
<canvas> スクリプトで定義したグラフィックスを描画するための領域を配置する
<audio> ドキュメント内に音声コンテンツを埋め込む
<video> ページ内に動画コンテンツを表示する
<source> 再生候補となる動画や音源などのメディアソースを指定する
<track> 動画や音声ファイルに字幕やキャプションを追加する
<embed> 外部コンテンツを埋め込む
<object> 外部リソースのオブジェクトを埋め込む
<param> パラメーターを指定する
<script> HTMLで実行可能なスクリプトを埋め込む
<noscript> スクリプトが動作しない環境での表示内容を指定する
<meter> 規定範囲内の数量や測定値を表す
<progress> 作業の進捗状況を示すプログレスバーを表示する
<output> 計算結果やユーザーアクションの出力欄を作成する
<dialog> 任意のタイミングで開くダイアログボックスを作成する
<template> ページ読み込み後にスクリプトの実行によって挿入可能な要素を定義する
<slot> ウェブコンポーネントで独自に扱える枠を提供する