ページの作成
親となるページを選択してください。
親ページに紐づくページを子ページといいます。
例: 親=スポーツ, 子1=サッカー, 子2=野球
子ページを親ページとして更に子ページを作成することも可能です。
例: 親=サッカー, 子=サッカーのルール
親ページはいつでも変更することが可能なのでとりあえず作ってみましょう!
| この記事の要点 |
|
は 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 エミュレータ)。
ページの作成
親となるページを選択してください。
親ページに紐づくページを子ページといいます。
例: 親=スポーツ, 子1=サッカー, 子2=野球
子ページを親ページとして更に子ページを作成することも可能です。
例: 親=サッカー, 子=サッカーのルール
親ページはいつでも変更することが可能なのでとりあえず作ってみましょう!
人気ページ
- 1 Eclipseで「サーバーに追加または除去できるリソースがありません。」の原因と対処法
- 2 tomcat の起動 / 停止ログと catalina.log・catalina.out の違い
- 3 JavaScript base URL 取得方法|window.location.origin と SSR/Node.js 対応
- 4 YouTube Data API v3 エラー一覧|403/400/404 の主要原因と切り分け
- 5 Spring Frameworkのアノテーション一覧
- 6 Laravel エラー一覧|500/Blade/DB 接続/ルーティングの代表エラー
- 7 3Dグラフィックスとは|モデリング/レンダリング/主要ソフトウェア (Blender / Maya)
- 8 【Spring】@Valueアノテーションとは
- 9 CATALINA_HOME の確認方法 (Linux / Mac)
- 10 【Spring】@Autowiredアノテーションとは
最近更新/作成されたページ
- HTML q要素(インライン引用 / blockquote との違い / cite属性の使い方) 2026-06-11 05:44:46
- SQL 制約(NOT NULL / UNIQUE / PRIMARY KEY / FOREIGN KEY / CHECK / DEFAULT 完全ガイド) 2026-06-11 05:44:46
- Mac Safari でユーザーエージェントを切り替える方法(開発メニュー / Chrome や IE のフリ) 2026-06-11 05:44:46
- Laravel ルート一覧確認|php artisan route:list の使い方・フィルタオプション・JSON 出力・キャッシュ 2026-06-11 05:44:46
- Java static変数(クラス変数 / インスタンス変数との違い / 使い所と落とし穴) 2026-06-11 05:44:46
- HTML bdo要素(双方向テキストの方向を強制 / dir 属性の使い方 / bdi との違い) 2026-06-11 05:44:46
- Webスクレイピングとは|Python で始めるサンプルコード・robots.txt・利用規約・法的注意点まとめ 2026-06-11 05:44:46
- Canvas API 図形描画|四角形 fillRect / 円 arc / 線 lineTo / 多角形 と塗りつぶし・輪郭の使い分け 2026-06-11 05:44:46
- jQuery 値の取得|.text() / .html() / .val() / .attr() / .data() の違いと使い分け 2026-06-11 05:44:46
- UE5 ThirdPersonテンプレート キャラクターを歩かせる方法(Max Walk Speed / Shift で走る切替) 2026-06-11 05:44:46
- HTML figure要素(figcaption と一緒に図表・画像・コードを意味付け) 2026-06-11 05:44:46
- SQL DELETE 文 完全ガイド|WHERE 句必須、ROLLBACK、TRUNCATE との違い、Oracle/MySQL/PostgreSQL の違い 2026-06-11 05:44:46
- jQuery クリックイベント完全ガイド|.click() と .on("click") の違い・イベント委譲・ダブルクリック対策 2026-06-11 05:44:46
- jQuery .ready()(DOM 構築完了で実行 / 4 つの書き方 / 現代の代替) 2026-06-11 05:44:46
- Java Calendar.getInstance() 使い方|タイムゾーン/ロケール指定・年月日曜日の取得・LocalDate との比較 2026-06-11 05:44:46
コメントを削除してもよろしいでしょうか?