objectタグ -外部コンテンツを埋め込む｜HTML辞典
<object>タグとは？
<object> タグは、PDF、動画、Flash、SVG などの外部コンテンツを埋め込むためのタグです。<embed> タグと似ていますが、より多機能で param タグを使用して詳細な設定ができます。
基本情報
コンテンツモデル
フローコンテンツ（Flow Content）、フレージングコンテンツ（Phrasing Content）、エンベッダブルコンテンツ（Embedded Content）。
閉じタグの有無
<object> は 開始タグ（<object>）と閉じタグ（</object>）の両方が必要 です。
基本的な記述方法
<object data="sample.pdf" type="application/pdf" width="600" height="400">
<p>PDF を表示できません。<a href="sample.pdf">こちらからダウンロード</a> してください。</p>
</object>
使用できる主な属性
<object> タグにはいくつかの重要な属性があります。
| 属性名 | 説明 | 例 |
|---|---|---|
data | 埋め込むコンテンツの URL | <object data="file.pdf"> |
type | コンテンツの MIME タイプ | <object type="application/pdf"> |
width | 幅（px） | <object width="600"> |
height | 高さ（px） | <object height="400"> |
form | フォームの id を指定 | <object form="uploadForm"> |
CSSを使ったデザイン変更
<object> 自体のスタイルを変更することはできませんが、ラップする div にスタイルを適用できます。
.object-container {
border: 1px solid #ccc;
padding: 5px;
width: 100%;
max-width: 800px;
}
適切な使用例
✅ PDF を埋め込む
<object data="document.pdf" type="application/pdf" width="800" height="600">
<p>PDF を表示できません。<a href="document.pdf">ダウンロード</a> してください。</p>
</object>
✅ Flash コンテンツを埋め込む（現在は非推奨）
<object data="animation.swf" type="application/x-shockwave-flash" width="400" height="300">
<param name="movie" value="animation.swf">
</object>
✅ SVG ファイルを埋め込む
<object data="image.svg" type="image/svg+xml" width="500" height="500"></object>
適切でない使用例（誤った使い方）
❌ data を指定しないとコンテンツが表示されない
<!-- NG: data属性なし -->
<object type="application/pdf" width="800" height="600"></object>
✅ 正しい書き方（data を指定）
<object data="document.pdf" type="application/pdf" width="800" height="600"></object>
❌ type を指定しないと一部のブラウザで動作しない
<!-- NG: type属性なし -->
<object data="video.mp4" width="640" height="360"></object>
✅ 正しい書き方（type を指定）
<object data="video.mp4" type="video/mp4" width="640" height="360"></object>
<object>タグと他のタグの違い
| タグ | 役割 | 特徴 | 適切な用途 |
|---|---|---|---|
<object> | 外部コンテンツを埋め込む | param で設定可能 | PDF、SVG、Flash の埋め込み |
<embed> | 外部コンテンツを埋め込む | 自己終了タグ、簡潔な構造 | 音声、動画、PDF の埋め込み |
<iframe> | 他の HTML ページを埋め込む | src に外部 URL を指定 | YouTube、Google マップ |
使用上の注意点
✅ data 属性を必ず指定する
dataがないと、埋め込まれるコンテンツが表示されない。
✅ type を指定してコンテンツの種類を明示する
- ブラウザが正しく処理できるように
typeを設定する。
✅ <iframe> や <embed> との使い分けを考慮する
<object>は Flash や PDF、SVG などの埋め込みに適している。
関連タグ
まとめ
<object> タグは、HTML文書内で PDF、SVG、Flash などの外部コンテンツを埋め込むためのタグ です。data と type を適切に設定し、必要に応じて <iframe> や <embed> との使い分けを検討することが重要です。
