タイトル: オブジェクト

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

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

本ページの子ページ

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

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

要素	用途
	汎用的な外部リソース埋め込み（画像、動画、PDF、Flash等）
	object要素に渡すパラメータ
	プラグイン用埋め込み（Flash等で歴史的に利用）
</strong></td><td>別のHTML文書を埋め込み</td></tr> <tr><td><strong><img></strong></td><td>画像専用埋め込み</td></tr> <tr><td><strong><video> / <audio></strong></td><td>動画・音声専用（HTML5）</td></tr> <tr><td><strong><canvas></strong></td><td>JavaScriptで描画</td></tr> <tr><td><strong><svg></strong></td><td>インラインSVG</td></tr> </tbody> </table> <h2>object要素の基本</h2> <table border="1" cellpadding="1" cellspacing="1" style="width:1000px"> <tbody> <tr> <td style="background-color:#000000"> <p><span style="color:#ffffff"><object data="document.pdf" type="application/pdf" width="600" height="800"><br />     <p>PDFを表示できません。<a href="document.pdf">ダウンロード</a></p><br /> </object></span></p> </td> </tr> </tbody> </table> <h2>用途別の推奨要素</h2> <table border="1" cellpadding="1" cellspacing="1" style="width:1000px"> <thead> <tr><th>埋め込みたいもの</th><th>推奨要素</th></tr> </thead> <tbody> <tr><td>画像</td><td><code><img></code> または <code><picture></code></td></tr> <tr><td>動画</td><td><code><video></code></td></tr> <tr><td>音声</td><td><code><audio></code></td></tr> <tr><td>PDF</td><td><code><object></code> / <code><iframe></code></td></tr> <tr><td>外部HTML</td><td><code><iframe></code></td></tr> <tr><td>SVG</td><td>インライン <code><svg></code> または <code><img src="...svg"></code></td></tr> <tr><td>YouTube / Vimeo</td><td>サービス提供の <code><iframe></code></td></tr> <tr><td>JS描画</td><td><code><canvas></code></td></tr> </tbody> </table> <h2>歴史的な経緯</h2> <ul> <li><strong>Flash時代（〜2020）</strong>: <code><object></code> + <code><param></code> が広く使われた</li> <li><strong>Flash終了後</strong>: HTML5の <code><video></code> / <code><audio></code> / <code><canvas></code> が主流</li> <li><strong>現在</strong>: <code><object></code> は<strong>PDF埋め込み</strong>程度で残っている</li> </ul> <h2>注意点</h2> <ul> <li><strong>iframeのセキュリティ</strong>: <code>sandbox</code>属性で挙動制限、<code>X-Frame-Options</code>でクリックジャッキング対策</li> <li><strong>レスポンシブ対応</strong>: 固定の <code>width/height</code> ではなくCSSで比率維持</li> <li><strong>アクセシビリティ</strong>: <code><object></code> 内に代替コンテンツを入れる</li> <li><strong>SEO</strong>: 検索エンジンは <code><img></code> や <code><video></code> の方が認識しやすい</li> </ul> <h2>関連</h2> <ul> <li>親カテゴリ: <a href="/article/10083">要素一覧</a></li> <li>類似: <a href="/article/10644">画像</a> / <a href="/article/10634">動画・音声</a></li> </ul> </div> </div> </div> </div> </div> <div id="footer"><div class="move-top"></div> <div class="move-bottom"></div> <!-- フッタ開始 --> <footer id="footer"> <div class="footer-inner"> <div class="footer-grid"> <div class="footer-col"> <h4 class="footer-heading">CWiki</h4> <a href="https://jpn.itlibra.com">CWiki</a> <a href="https://jpn.itlibra.com/help">ヘルプ</a> <a href="https://jpn.itlibra.com/inquiry/post/form">問い合わせ</a> </div> <div class="footer-col"> <h4 class="footer-heading">Legal</h4> <a href="https://jpn.itlibra.com/termsOfService">利用規約</a> <a href="https://jpn.itlibra.com/privacyPolicy">プライバシーポリシー</a> </div> <div class="footer-col"> <h4 class="footer-heading">Feed</h4> <a href="https://jpn.itlibra.com/sitemap/sitemap-index.xml">サイトマップ</a> <a href="https://jpn.itlibra.com/feed/articles">ページのフィード</a> <a href="https://jpn.itlibra.com/feed/boards">掲示板のフィード</a> </div> <div class="footer-col"> <h4 class="footer-heading">Account</h4> <a href="https://jpn.itlibra.com/login">ログイン</a> </div> </div> <div class="footer-bottom"> <span>© 2017 Libra</span> </div> </div> </footer> <span id="page-bottom"></span> </div> </div> <!-- Scripts --> <!-- 表示速度とSEOの観点からbodyタグの一番下に記載する --> <!--<script src="https://jpn.itlibra.com/js/app.js" async></script>--> <script src="https://jpn.itlibra.com/js/common.js" async></script> <script src="https://jpn.itlibra.com/js/scroll.js" async></script> <script src="https://jpn.itlibra.com/js/jquery.sidebar.min.js"></script> <span></span> <!-- ローディング --> <div id="loading"> <div class="cv-spinner"> <span class="spinner"></span> </div> </div> </body> </html>

IT総合Wiki

過去バージョン

タイトル: オブジェクト

本ページの子ページ

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