この内容は古いバージョンです。最新バージョンを表示するには、戻るボタンを押してください。
バージョン:4
ページ更新者:atom
更新日時:2026-05-13 07:30:24

タイトル: オブジェクト

オブジェクトに関連する要素です。HTMLでドキュメント内に外部リソース（画像、PDF、Flash、その他のオブジェクト）や別のHTMLを埋め込むための要素を扱います。

子ページから選択して下さい。

本ページの子ページ

  • object要素 — 外部リソースを埋め込む汎用要素
  • param要素 — object要素にパラメータを渡す

オブジェクト系要素の全体像

要素用途
<object>汎用的な外部リソース埋め込み（画像、動画、PDF、Flash等）
<param>object要素に渡すパラメータ
<embed>プラグイン用埋め込み（Flash等で歴史的に利用）
<iframe>別のHTML文書を埋め込み
<img>画像専用埋め込み
<video> / <audio>動画・音声専用（HTML5）
<canvas>JavaScriptで描画
<svg>インラインSVG

object要素の基本

<object data="document.pdf" type="application/pdf" width="600" height="800">
    <p>PDFを表示できません。<a href="document.pdf">ダウンロード</a></p>
</object>

用途別の推奨要素

埋め込みたいもの推奨要素
画像<img> または <picture>
動画<video>
音声<audio>
PDF<object> / <iframe>
外部HTML<iframe>
SVGインライン <svg> または <img src="...svg">
YouTube / Vimeoサービス提供の <iframe>
JS描画<canvas>

歴史的な経緯

  • Flash時代（〜2020）: <object> + <param> が広く使われた
  • Flash終了後: HTML5の <video> / <audio> / <canvas> が主流
  • 現在: <object> はPDF埋め込み程度で残っている

注意点

  • iframeのセキュリティ: sandbox属性で挙動制限、X-Frame-Optionsでクリックジャッキング対策
  • レスポンシブ対応: 固定の width/height ではなくCSSで比率維持
  • アクセシビリティ: <object> 内に代替コンテンツを入れる
  • SEO: 検索エンジンは <img> や <video> の方が認識しやすい

関連