タイトル: オブジェクト
SEOタイトル: HTML object 要素完全ガイド|PDF/SVG/動画/外部 HTML 埋め込みと iframe/embed との違い
| この記事の要点 |
|
は HTML で「外部リソース」を埋め込むための汎用要素です。PDF / SVG / 画像 / 動画 / 別 HTML / Flash(歴史的)など、多様なメディアを 1 つのタグで扱えるように設計されました。現代では用途別に専用要素( / / / )が出揃ったため出番は減っていますが、PDF / SVG 埋め込みでは今も使われます。
基本構文
| 属性 | 意味 |
|---|---|
data | 埋め込むリソースの URL(必須に近い) |
type | MIME タイプ。指定すると読み込み前判定に使われる |
width / height | 表示サイズ。CSS でも可 |
name | フォーム送信時の名前(ほぼ使わない) |
form | 所属フォーム ID |
usemap | 画像マップ参照 |
主な用途別の書き方
PDF 埋め込み
SVG 埋め込み(外部ファイル)
動画埋め込み(歴史的)
外部 HTML 埋め込み
Flash(歴史的・現在は動作しない)
要素
内でプラグインに渡すパラメータを指定。Flash 時代の遺物で、現代の用途ではほぼ不要です:
| 要素 | 得意 | フォールバック | 現代度 |
|---|---|---|---|
| 汎用、PDF / SVG | 子要素として書ける | ★★ |
| PDF / プラグイン | 無し | ★★(PDF で広く使う) |
| HTML 埋め込み、YouTube | 無し(src 内へ) | ★★★ 標準 |
| 静的画像 | alt のみ | ★★★ 標準 |
| 解像度別画像、WebP/AVIF | ★★★ 標準 | |
| 動画 / 音声 | 子要素 | ★★★ 標準 |
レスポンシブ対応
/* aspect-ratio で縦横比固定 */
object.pdf-viewer {
width: 100%;
aspect-ratio: 16 / 9;
height: auto;
border: 1px solid #ccc;
}
/* 古典的パディングハック */
.embed-wrapper {
position: relative;
padding-top: 56.25%; /* 16:9 */
}
.embed-wrapper > object,
.embed-wrapper > iframe {
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
}
セキュリティ上の注意
Same-Origin Policy
埋め込み元と data の URL が同一オリジンでないと、JavaScript からの操作(contentDocument 等)はブロックされます。
CSP (Content Security Policy)
# 何を object/embed/applet で読み込ませるかを制限
Content-Security-Policy: object-src 'self' https://cdn.example.com;
# iframe で埋め込まれることを制限
Content-Security-Policy: frame-ancestors 'self';
X-Frame-Options(古い、frame-ancestors 推奨)
X-Frame-Options: SAMEORIGIN
X-Frame-Options: DENY
SVG ファイルの XSS
SVG はJavaScript を含めることができるため、ユーザ投稿 SVG をそのまま object で読み込むと XSS の温床になります。サニタイズが必須:
- サーバ側で SVG Sanitizer(PHP: enshrined/svg-sanitize)を通す
- ユーザ投稿はラスタライズ(PNG 化)して保存
で読み込むと JS は実行されない(こちらが安全)
JavaScript からの操作
// オブジェクトの中身 (同一オリジンのみ)
const obj = document.querySelector('object');
obj.addEventListener('load', () => {
const doc = obj.contentDocument;
// doc.querySelector('h1').textContent
});
// 表示切替
obj.data = 'other.pdf';
// width 変更
obj.style.width = '800px';
アクセシビリティ
- フォールバックテキストを必ず提供(読み上げソフト対策)
- PDF 埋め込みのときは「ダウンロード」リンクを必ず別途置く
- 装飾用 SVG は
aria-hidden="true"を付与 - 意味のある SVG には
role="img"+aria-label
FAQ
Q: PDF 埋め込みなら object と embed どちらが良い?
A: 実用ではembed の方が広く使われることが多いです。Chrome / Edge の挙動が安定。古い IE 互換が必要なら object。両方を組み合わせる手法もあります。
Q: モバイルで PDF が表示されない
A: iOS Safari は 内 PDF を新規タブで開く挙動。「ダウンロード」リンク + サムネ画像を提示するのが UX 的に確実です。
Q: SVG は object と img どちらが良い?
A: JS を動かしたいなら object(インタラクティブな図表)、単なるロゴ・アイコンなら img(軽量で安全)、CSS で色を変えたいならインライン
Q: 外部サイトの HTML を埋め込みたい
A: を使ってください。 でも可能ですが、現代のセキュリティ機能(sandbox / CSP)は iframe に最適化されています。
Q: Flash の代替は?
A: 用途別に Canvas / WebGL / Web Animations / CSS Animations / Lottie / WebAssembly 等。古い Flash コンテンツの再生には Ruffle(オープンソース Flash エミュレータ)。