HTML辞書ホームへ
HTML要素 辞書 by Sentaro
<object>
埋め込み（Embedded）要素。外部リソース（画像、PDF、HTML、Javaアプレットなど）を埋め込むために使用されます。
info
概要
<object> 要素は、外部のマルチメディア（画像、PDF、SWFなど）や別のHTMLドキュメントなどのリソースを、現在のドキュメント内に埋め込むために使用されます。
かつてはFlashなどのプラグインを埋め込むために広く使われていましたが、現代では <audio>, <video>, <embed>, <iframe>, <img> などのより特化した要素に置き換えられることが多くなっています。ただし、特定のオブジェクトやPDF埋め込みなどで依然として利用されます。
play_circle
デモ (静的表示)
HTML (Source)
<object data="example.html" type="text/html" width="100%" height="150">
<!-- フォールバックコンテンツ -->
<p>埋め込みコンテンツを表示できませんでした。</p>
</object>
<br>
Preview (Result)
list
属性 (Attributes)
| 属性名 | 説明 |
|---|---|
| data | 埋め込むリソースのURLを指定します。必須属性です。 |
| type | 埋め込むリソースのMIMEタイプ（例: text/html, application/pdf, image/svg+xml）を指定します。 |
| width | 埋め込まれたオブジェクトの幅を指定します。ピクセルまたはパーセントで指定可能です。 |
| height | 埋め込まれたオブジェクトの高さを指定します。ピクセルまたはパーセントで指定可能です。 |
| name | フォーム送信時に要素を参照するための名前を指定します。 |
| usemap | オブジェクトがサーバー側イメージマップである場合、使用する <map> 要素の名前を指定します。 |
code
実用例
1. PDFファイルを埋め込む
<object data="document.pdf" type="application/pdf" width="500" height="300">
<p>PDFビューアが利用できません。<a href="document.pdf">ファイルをダウンロード</a>してください。</p>
</object>
2. SVGファイルを埋め込む
<object data="logo.svg" type="image/svg+xml" width="100" height="100">
<img src="logo.png" alt="ロゴ"> <!-- フォールバック画像 -->
</object>
3. 別のHTMLページを埋め込む（`