過去バージョン

この本文には実行可能なタグ等が含まれるため、安全のためHTMLソースとして表示しています。本文データは変更していません。

<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;background:#fffbea;border:1px solid #f4c430;margin:1em 0;width:100%"><tr><td style="background:#f4c430;color:#000;font-weight:bold;padding:8px">この記事の要点</td></tr><tr><td style="padding:10px"><ul><li><strong>embed 要素</strong>（<code><embed></code>）は外部リソース（PDF / Flash / 各種プラグインコンテンツ）を<strong>埋め込む</strong>ための HTML 要素</li><li><code>src</code>（URL）と <code>type</code>（MIME タイプ）、<code>width</code> / <code>height</code> を指定する<strong>void 要素</strong></li><li><code><object></code> と機能が似ているが、<code>embed</code> は<strong>パラメータを属性</strong>で渡し、<code>object</code> は <code><param></code> で渡す</li><li>現代では Flash 廃止に伴い<strong>PDF 埋め込み</strong>が主用途。動画は <code><video></code>、外部ページは <code><iframe></code> が標準</li><li>セキュリティ上、<strong>信頼できない外部リソース</strong>を埋め込むと XSS / クリックジャッキングのリスク</li></ul></td></tr></table>
<h2>embed 要素とは</h2>

<p><strong>embed 要素</strong>（<code><embed></code>）は、外部リソース（PDF、Flash、各種プラグインコンテンツなど）を HTML ページに<strong>埋め込み</strong>表示するための要素です。<strong>void 要素</strong>のため終了タグはなく、属性で URL や種別を指定します。</p>

<h2>基本構文</h2>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-html"><!-- PDF の埋め込み -->
<embed src="/files/manual.pdf" type="application/pdf" width="800" height="600">

<!-- SVG の埋め込み -->
<embed src="/img/diagram.svg" type="image/svg+xml" width="400" height="300"></code></pre>
<h2>属性</h2>

<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;width:100%">
<thead><tr style="background:#e3f2fd"><th>属性</th><th>意味</th></tr></thead>
<tbody>
<tr><td><code>src</code></td><td>埋め込むリソースの URL</td></tr>
<tr><td><code>type</code></td><td>リソースの MIME タイプ（<code>application/pdf</code> など）</td></tr>
<tr><td><code>width</code></td><td>幅（px）</td></tr>
<tr><td><code>height</code></td><td>高さ（px）</td></tr>
</tbody>
</table>

<h2>object / iframe / video との使い分け</h2>

<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;width:100%">
<thead><tr style="background:#e3f2fd"><th>要素</th><th>主用途</th><th>特徴</th></tr></thead>
<tbody>
<tr><td><code><embed></code></td><td>PDF / SVG / プラグインコンテンツ</td><td>属性のみで簡潔。代替コンテンツを持てない</td></tr>
<tr><td><code><object></code></td><td>同上 + フォールバック表示</td><td><code><param></code> で詳細パラメータ。要素内に代替コンテンツを書ける</td></tr>
<tr><td><code><iframe></code></td><td>別 HTML ページの埋め込み</td><td>YouTube 埋め込みや外部サイトの表示に標準的</td></tr>
<tr><td><code><video></code></td><td>動画</td><td>MP4 / WebM を制御 API 付きで再生</td></tr>
<tr><td><code><audio></code></td><td>音声</td><td>MP3 / Ogg / WAV</td></tr>
<tr><td><code><img></code></td><td>画像</td><td>静的画像 / SVG</td></tr>
</tbody>
</table>

<h2>典型用途：PDF プレビュー</h2>

<p>現代の <code><embed></code> の主用途は<strong>PDF のインライン表示</strong>です。ブラウザ内蔵の PDF ビューアが表示されます。</p>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-html"><embed
  src="/docs/spec.pdf"
  type="application/pdf"
  width="100%"
  height="600"></code></pre>
<p>同じ用途を <code><iframe></code> や <code><object></code> でも実現できます。</p>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-html"><!-- iframe での代替 -->
<iframe src="/docs/spec.pdf" width="100%" height="600" title="仕様書"></iframe>

<!-- object での代替（フォールバック付き） -->
<object data="/docs/spec.pdf" type="application/pdf" width="100%" height="600">
  <p>PDF を表示できません。<a href="/docs/spec.pdf">こちらからダウンロード</a>してください。</p>
</object></code></pre>
<h2>レスポンシブ対応</h2>

<p><code><embed></code> 自体に <code>aspect-ratio</code> はありませんが、ラッパー要素 + CSS で対応できます。</p>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-html"><div style="position:relative;width:100%;aspect-ratio:4/3">
  <embed src="/docs/spec.pdf" type="application/pdf"
         style="position:absolute;inset:0;width:100%;height:100%">
</div></code></pre>
<h2>セキュリティ上の注意</h2>

<ul>
<li><strong>信頼できないドメイン</strong>のリソースを埋め込むと XSS / クリックジャッキングのリスク</li>
<li>埋め込んだ外部コンテンツは <code>X-Frame-Options</code> / <code>Content-Security-Policy</code> の影響を受ける</li>
<li>外部 PDF をホストする場合は <strong>HTTPS</strong> 必須。HTTP 混在は<strong>Mixed Content</strong> でブロック</li>
<li><strong>Flash / Java Applet</strong> はもうサポートされない。レガシーコードは置き換える</li>
</ul>

<h2>非推奨ではないが避けるべきケース</h2>

<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;width:100%">
<thead><tr style="background:#e3f2fd"><th>用途</th><th>推奨</th></tr></thead>
<tbody>
<tr><td>動画</td><td><code><video></code></td></tr>
<tr><td>音声</td><td><code><audio></code></td></tr>
<tr><td>YouTube 埋め込み</td><td><code><iframe></code></td></tr>
<tr><td>SVG</td><td><code><img></code> または <code><svg></code> 直接</td></tr>
<tr><td>別 HTML ページ</td><td><code><iframe></code></td></tr>
<tr><td>PDF</td><td><code><embed></code> / <code><iframe></code> / <code><object></code></td></tr>
</tbody>
</table>

<h2>まとめ</h2>

<ol>
<li><code><embed></code> は外部リソースを埋め込む void 要素</li>
<li>属性は <code>src</code> / <code>type</code> / <code>width</code> / <code>height</code> がほぼ全て</li>
<li>現代の主用途は <strong>PDF プレビュー</strong></li>
<li>動画 → <code><video></code>、外部ページ → <code><iframe></code> を優先</li>
<li>フォールバックが必要なら <code><object></code> を選ぶ</li>
</ol>

<h2>サイズと表示位置の指定</h2>

<p><code><embed></code> は <code>width</code> / <code>height</code> 属性で px 値を直接指定できますが、現代のレスポンシブデザインではラッパー要素 + CSS で<strong>アスペクト比固定</strong>にしたほうが扱いやすくなります。<code>aspect-ratio</code> プロパティが使えるブラウザではラッパーに <code>aspect-ratio: 16 / 9</code> を指定するだけで OK です。<code><object></code> や <code><iframe></code> も同様にラッパーで包むのが定石で、レイアウトシフト（CLS）の改善にも効きます。古いブラウザを切り捨てたくない場合は<strong>パディングハック</strong>（<code>padding-top: 56.25%</code>）で同等の挙動を再現できます。</p>

<h2>サンドボックスと CSP</h2>

<p><code><embed></code> は <code><iframe sandbox></code> のような細粒度のサンドボックス属性を持ちません。信頼できないリソースを埋め込みたいときは、可能なら <code><iframe sandbox="allow-scripts"></code> に置き換えるほうが安全です。サーバ側で <code>Content-Security-Policy</code> ヘッダに <code>object-src 'self'</code> を指定すると、<code><embed></code> / <code><object></code> の読み込み元を制限でき、サードパーティの予期しないリソース埋め込みを防げます。HTTPS ページからは <code>http://</code> リソースを埋め込めない（Mixed Content）ため、リンク先のホスト側も TLS 化されている必要があります。</p>

<h2>ブラウザでの PDF 表示挙動の差</h2>

<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;width:100%">
<thead><tr style="background:#e3f2fd"><th>ブラウザ</th><th>挙動</th></tr></thead>
<tbody>
<tr><td>Chrome / Edge</td><td>内蔵ビューアで表示</td></tr>
<tr><td>Firefox</td><td>PDF.js で表示</td></tr>
<tr><td>Safari</td><td>内蔵プレビューで表示</td></tr>
<tr><td>iOS Safari / Android Chrome</td><td>新規タブに移動するケースあり。インライン表示が不安定</td></tr>
</tbody>
</table>

<p>モバイルでの確実なインライン表示は難しいため、<strong>「PDF を開く」リンク</strong>を併設するのが堅実です。</p>

<h2>関連</h2>

<ul>
<li><a href="/article/10650">param要素</a> — object のパラメータ要素</li>
<li>object要素 — フォールバック付き埋め込み</li>
<li>iframe要素 — 別 HTML 文書の埋め込み</li>
<li>video要素 — 動画再生</li>
<li>audio要素 — 音声再生</li>
</ul>