ページの作成
親となるページを選択してください。
親ページに紐づくページを子ページといいます。
例: 親=スポーツ, 子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アノテーションとは
最近更新/作成されたページ
- UE5 で鏡を作る方法 (Planar Reflection / Scene Capture / SSR / マテリアル) 2026-06-11 04:04:53
- Oracle CKPT (Checkpoint Process) の役割とパラメータ (リカバリ時間短縮) 2026-06-11 04:04:53
- Java プログラムの全体構造 (package / import / class / main / module / Maven) 2026-06-11 04:04:53
- UE5 Data Asset と Data Table の違い (使い分け / Asset Manager / CSV 連携) 2026-06-11 04:04:53
- Java 比較演算子の使い方 (== / equals / compareTo / Objects.equals) 2026-06-11 04:04:53
- Linux への scikit-learn インストール (pip / venv / Conda / 依存パッケージ) 2026-06-11 04:04:53
- Scratch でスプライトを追加する 5 つの方法 (ライブラリ / 自分で描く / アップロード / カメラ / サプライズ) 2026-06-11 04:04:53
- JavaScript の "" と '' の違い (仕様上は等価 / テンプレートリテラル / JSON / Lint) 2026-06-11 04:04:53
- Laravel マイグレーションファイルの作成 (make:migration / Schema::create / down 実装) 2026-06-11 04:04:53
- Unity 「3 Skyboxes」アセットの使い方と Skybox の基礎 (Material / Lighting / HDR) 2026-06-11 04:04:53
- Linux で IP アドレスを確認するコマンド完全ガイド(ip / ifconfig / hostname) 2026-06-11 04:04:52
- Docker イメージ操作完全ガイド(search / pull / images / rmi / multi-arch) 2026-06-11 04:04:52
- SQL の組み込み関数まとめ(集計 / 文字列 / 日時 / 数値 / 条件 / ユーザー定義) 2026-06-11 04:04:52
- Laravel Query Builder の DELETE 完全ガイド(Eloquent / Soft Delete / 一括削除) 2026-06-11 04:04:52
- HTML <wbr> 要素の使い方と <code>word-break</code> / ­ との違い 2026-06-11 04:04:52
コメントを削除してもよろしいでしょうか?