SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

HTMLのembedタグとは？属性・使い方・ブラウザー互換性と活用例の解説動画

再生時間 7:42動画を別のタブで開く ↗
動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

  1. 0:00こんにちは。
  2. 0:00エイチティーエムエル、リファレンス解説です。
  3. 0:03エイチティーエムエルタグ編の八十一本目は、エンベッドタグです。
  4. 0:07エンベッドは、外部のコンテンツをページの中に埋め込むための要素です。
  5. 0:11たとえば、ピーディーエフの資料を、リンク先へ移動させずに、その場で読めるように表示する場面を思い浮かべてください。
  6. 0:18ただし、表示できるかどうかは、ブラウザーや端末の対応に左右されます。
  7. 0:23今回は、基本の書き方から、属性、アイフレームやオブジェクトとの違い、注意点まで順番に確認していきましょう。
  8. 0:29手軽さと注意点の両方を知ることが、正しく使い分ける第一歩になります。
  9. 0:34基本の書き方を確認します。
  10. 0:36エンベッドは空要素です。
  11. 0:38開始タグだけで書き、終了タグも、内側の本文も書きません。
  12. 0:42画面の例では、ガイドという名前のピーディーエフを指定し、種類と大きさを添えています。
  13. 0:49置き場所は、ボディの中で、資料を表示したい位置です。
  14. 0:53ここで大切なのは、空要素のため、表示できない人向けの代替本文を、タグの内側に書くことができない点です。
  15. 1:01代替の案内は、タグの外に別に用意する必要があります。
  16. 1:05この制約が、エンベッドを選ぶときに最初に押さえるべきポイントです。
  17. 1:10この形を覚えておくと、設定ミスによる表示トラブルを早い段階で防げます。
  18. 1:16属性を確認します。
  19. 1:17一つ目はソースです。
  20. 1:18読み込むリソースのユーアールエルを指定します。
  21. 1:21存在するファイルへの正しいパスを書くことが大前提で、パスの間違いは、そのまま表示の失敗につながります。
  22. 1:28二つ目はタイプです。
  23. 1:29こちらは、埋め込む内容の種類を表すマイムタイプを指定します。
  24. 1:33ピーディーエフなら、アプリケーション、スラッシュ、ピーディーエフと書きます。
  25. 1:37タイプは必須ではありませんが、ブラウザーが内容を判断する手がかりになるため、
  26. 1:41実際のファイルの種類と一致させて書くようにしましょう。
  27. 1:45指定する前に、ファイル名と拡張子を一覧で確認する習慣を付けましょう。
  28. 1:50続いて、幅と高さを表す、ウィドゥスとハイトです。
  29. 1:54エンベッドで埋め込んだ内容が、ページのどれくらいの大きさで表示されるかを決めます。
  30. 2:00画面の例では、幅六百四十、高さ四百八十を指定しています。
  31. 2:04数値は単位を付けずに書くのが基本です。
  32. 2:07幅と高さの比率が資料の形と合っていないと、余白が目立ったり、内容が窮屈になったりします。
  33. 2:14また、寸法をあらかじめ伝えておくと、読み込みの前後でページのレイアウトが大きく動きにくくなります。
  34. 2:22細かな見た目の調整は、このあと触れるシーエスエスと合わせて考えてください。
  35. 2:28実際の資料で試し、読みやすさを確認してから寸法を確定するのがおすすめです。
  36. 2:34記事の活用事例を読み解きます。
  37. 2:36例では、エンベッドでピーディーエフをページに埋め込み、その直後に、同じファイルを開くリンクを段落で置いています。
  38. 2:44この組み合わせがとても重要です。
  39. 2:46ピーディーエフの表示は環境に依存し、スマートフォンなどでは埋め込みがうまく表示できないこともあります。
  40. 2:54その場合でも、リンクがあれば、読者はファイルを開いたり、保存したりして内容にたどり着けます。
  41. 3:00試すときは、練習用ファイルのボディにこの形を写し、自分の用意したピーディーエフのパスに置き換えて、
  42. 3:05再読み込みして確認してください。
  43. 3:09埋め込みとリンクの両方があることで、読者の環境を選ばない案内になります。
  44. 3:15共通属性も確認しておきましょう。
  45. 3:17エンベッドでも、アイディー、クラス、ラングといった共通属性が使えます。
  46. 3:23アイディーは文書内で一意な識別子で、スクリプトからの参照などに使います。
  47. 3:30クラスは、シーエスエスやスクリプトでまとめて選ぶための名前です。
  48. 3:35データ属性は、アプリ独自の値を保持する場所ですが、秘密情報を置く場所ではありません。
  49. 3:43また、属性は、その要素で定義されているものを使うのが原則です。
  50. 3:48ほかの要素で見た同名の属性を、意味が違うのに持ち込まないよう注意しましょう。
  51. 3:55見た目の指定だけでは、要素の意味は変わりません。
  52. 3:59共通属性は控えめに使い、必要なものだけを付ける方針が管理しやすさにつながります。
  53. 4:06似た要素との違いを整理します。
  54. 4:08アイフレームは、別のエイチティーエムエル文書を枠の中に埋め込むための要素で、
  55. 4:13タイトルで内容を説明し、必要に応じて権限を絞る使い方が中心です。
  56. 4:18オブジェクトは、外部リソースを埋め込む点はエンベッドに似ていますが、内側に代替の内容を置けることが大きな違いです。
  57. 4:27一方、エンベッドは空要素のため、その仕組みがありません。
  58. 4:31書き方は最もシンプルですが、表示できない場合の備えは、自分の手で外側に用意する必要があります。
  59. 4:38目的と、代替の出し方で選ぶのがポイントです。
  60. 4:41迷ったときは、表示できない場合にどう案内できるかで判断すると選びやすくなります。
  61. 4:47専用のタグとの使い分けも大切です。
  62. 4:50画像ならイメージ、動画ならビデオ、音声ならオーディオというように、内容ごとに専用の要素が用意されています。
  63. 5:00専用のタグには、代替テキストや、再生ボタン、字幕といった、その内容に合わせた仕組みが整っています。
  64. 5:08エンベッドは、そうした専用タグでは対応しにくい、汎用的な外部コンテンツを埋め込む場面で検討する要素だと考えてください。
  65. 5:18何でもエンベッドで済ませるのではなく、まず専用タグで書けないかを確かめる順番が、
  66. 5:24読み手にも作り手にも分かりやすいページにつながります。
  67. 5:30タグの選択は見た目ではなく、内容の種類から決めることが大切な原則です。
  68. 5:36サイズと見た目の調整を確認します。
  69. 5:38エンベッドの表示の大きさは、属性のウィドゥスとハイトのほか、シーエスエスでも調整できます。
  70. 5:45画面の例では、幅を親に合わせつつ、最大幅を六百四十ピクセルに抑える指定をしています。
  71. 5:52固定の幅だけを指定すると、スマートフォンのような狭い画面では、はみ出してしまうことがあります。
  72. 5:59公開前には、三百二十ピクセル程度の画面幅や、文字を拡大した状態でも、内容や操作部分が欠けないかを確認してください。
  73. 6:08埋め込んだ資料そのものが読めるかどうかも、実機で合わせて試すことが大切です。
  74. 6:14パソコンだけでなくスマートフォンでも、必ず表示を確認するようにしましょう。
  75. 6:19ブラウザー互換性を確認します。
  76. 6:21記事が参照するエムディーエヌのデータでは、エンベッド要素は、クロームが一以降、
  77. 6:28エッジが十二以降、ファイアフォックスが一以降、サファリが四以前からと、主要ブラウザーで古くから対応しています。
  78. 6:35属性のソース、タイプ、ウィドゥス、ハイトも、ほぼ同じ時期から対応しています。
  79. 6:41ただし注意したいのは、要素自体が使えることと、埋め込んだ中身がその環境で表示できることは別だという点です。
  80. 6:48特にピーディーエフの表示は環境依存が大きいため、互換性の表だけで安心せず、
  81. 6:52対象の端末で実際に試してください。
  82. 6:56モバイル版のブラウザーでは条件が異なる場合もあるため、合わせて確認してください。
  83. 7:02最後に、よくある間違いとまとめです。
  84. 7:05一つ目は、空要素なのに終了タグを書いてしまうことです。
  85. 7:08エンベッドに終了タグは要りません。
  86. 7:11二つ目は、代替のリンクを用意しないことです。
  87. 7:14埋め込みだけを唯一の閲覧経路にしないでください。
  88. 7:17三つ目は、ソースのパスやタイプを間違えることです。
  89. 7:20ファイルの場所と種類は、公開前に必ず確かめましょう。
  90. 7:24エンベッドは、外部コンテンツを手軽に埋め込める一方で、表示の成否は環境に委ねられる要素です。
  91. 7:30代替の道筋までセットで用意することが、使いこなしのコツだと覚えておきましょう。
  92. 7:36ぜひ手元の練習ページで、埋め込みと代替リンクをセットで試してみてください。
  93. 7:41お疲れさまでした。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

embedタグの役割と属性を、コード例・活用事例・注意点とともに解説。Chrome・Edge・Firefox・Safariの互換性も確認できます。外部コンテンツを埋め込む空要素。表示対応に依存するため代替リンクも用意します。

解説記事・サンプルコードを読む：HTMLのembedタグとは？属性・使い方・ブラウザー互換性と活用例 →