Nov.3rd, 2020
＃
要素について
| カテゴリー | フロー・コンテンツ、フレージング・コンテンツ、エンベッディッド・コンテンツ、フォーム関連要素(リスト化要素)、パルパブル・コンテンツ |
| 利用場所 | エンベッディッド・コンテンツが置ける場所 |
| 内容 | トランスペアレント・コンテンツ・モデル |
| タグの省略 | 不可 |
“object”要素はあらゆる種類の外部リソースを文書に埋め込む要素です。
画像、動画、音声、HTML文書、PDF形式などの文書ファイルといったあらゆる外部リソースを埋め込むために使用することができます。埋め込まれる外部リソースはその種類によって画像、入れ子されたブラウジング・コンテキストもしくはプラグインを使用して表示されるリソースのいずれかとして扱われます。ユーザーのブラウザが対応していない種類のファイルは表示できません。
埋め込まれる外部リソースによって“img”要素や“iframe”要素、“embed”要素と同じように機能します。
“object”要素の中には埋め込まれた外部リソースに対応していないブラウザーへ向けた代替コンテンツを配置することができます。
サンプルコード
画像として表示
<object data="sample.svg">
画像を表示できません
</object>
入れ子されたブラウジング・コンテキストとして表示
<object data="sample.html">
<a href="sample.html">サンプルの文書</a>
</object>
プラグインデータとして表示
<object data="sample.swf" type="application/x-shockwave-flash">
<video src="sample.mp4">
<a href="sample.mp4">サンプルの動画</a>
</video>
</object>
代替コンテンツとして“video”要素を配置しています。さらに“video”要素の中にも“video”要素に対応していないブラウザ向けに代替コンテンツを配置しています。
＃
属性と値
| 属性 | 値 | ||
|---|---|---|---|
| 属性 | 説明 | 値 | 説明 |
| 必須属性(少なくとも一つ) | |||
| data="" | 埋め込む外部リソースの指定 | URL | 埋め込む外部リソースのURL |
| type="" | 外部リソースの種類 | MIMEタイプ | 外部リソースの種類 |
| 任意属性 | |||
| グローバル属性 | |||
| name="" | ブラウジング・コンテキストの名前 | 文字列 | ブラウジング・コンテキストの名前 |
form="" |
関連付けるフォーム | ID名 | 関連づける“form”要素の“id”属性の値 |
| width="" | 外部リソースを表示する領域の横幅 | 正の整数 | 外部リソースを表示する領域の横幅のピクセル数 |
| height="" | 外部リソースを表示する領域の高さ | 正の整数 | 外部リソースを表示する領域の高さのピクセル数 |
マイクロデータ属性の“itemprop”属性を指定した場合は“data”属性は必須です。
過去に定義されていた属性
| 属性 | 値 | ||
|---|---|---|---|
| 属性 | 説明 | 値 | 説明 |
| usemap="" | クライアントサイドイメージマップ | #マップ名 | イメージマップの名前(“map”要素の“name”属性の値) |
declare="" |
外部リソースを実行せず宣言のみとする | declare | 外部リソースを実行せず宣言のみとする |
| classid="" |
外部リソースの実装の指定 | URL | 外部リソースの実装のURL |
| codebase="" |
相対リンクの基準とするURL | URL | 相対リンクの基準とするURL |
| archive="" |
外部リソースと関連するリソースのアーカイブの指定 | URL | 外部リソースと関連するリソースのアーカイブのURL |
| codetype="" |
“classid”属性で読み込まれるデータの種類 | MIMEタイプ | “classid”属性で読み込まれるデータの種類 |
| standby="" |
外部リソースのロード中に表示するメッセージ | テキスト | 外部リソースのロード中に表示するメッセージ |
| tabindex="" | フォーカスの可否とフォーカスの移動順序を指定する | 正の整数 | 順次ナビゲーションに加わり、フォーカスの順番を指定(“tabindex”属性の値が小さい順番にフォーカスする) |
| 0 | 順次ナビゲーションに加わるがフォーカスの順番は指定しない(文書内に記述された順番でフォーカスする) | ||
| 負の整数 | フォーカス可能だが順次ナビゲーションには加わらない | ||
| align="" |
垂直方向の位置 | bottom | 上端揃え |
| middle | 中央揃え | ||
| top | 下端揃え | ||
| 水平方向の位置 | left | 左寄せ | |
| right | 右寄せ | ||
| border="" |
境界線の太さ | 正の整数 | 境界線の太さのピクセル数 |
| hspace="" |
画像の上下の余白 | ピクセル数 | 画像の上下の余白のピクセル数 |
| vspace="" |
画像の左右の余白 | ピクセル数 | 画像の左右の余白のピクセル数 |
| typemustmatch="" |
埋め込まれた外部リソースの種類が“type”属性の値と一致しない場合は利用しない | typemustmatch | 埋め込まれた外部リソースの種類が“type”属性の値と一致しない場合は利用しない |
＃
仕様書
“object”要素はHTML5から定義されている要素です。現行の仕様であるHTML Living Standardでも定義されています。
定義されている仕様書
 |
 |
 |
 |
  |
|
|---|---|---|---|---|---|
| <object> |   |
|
|
|
|
DOMインターフェース
[Exposed=Window]
interface HTMLObjectElement : HTMLElement {
[HTMLConstructor] constructor();
[CEReactions] attribute USVString data;
[CEReactions] attribute DOMString type;
[CEReactions] attribute DOMString name;
readonly attribute HTMLFormElement? form;
[CEReactions] attribute DOMString width;
[CEReactions] attribute DOMString height;
readonly attribute Document? contentDocument;
readonly attribute WindowProxy? contentWindow;
Document? getSVGDocument();
readonly attribute boolean willValidate;
readonly attribute ValidityState validity;
readonly attribute DOMString validationMessage;
boolean checkValidity();
boolean reportValidity();
undefined setCustomValidity(DOMString error);
// also has obsolete members
};
UAスタイルシート
@namespace url(http://www.w3.org/1999/xhtml);
/* なし */
