objectタグとは?|文書に外部コンテンツを埋め込む

objectタグとは?|文書に外部コンテンツを埋め込む
博士
今回は、文書にさまざまなコンテンツを埋め込む際に重宝する、<object>タグについて解説しよう。
 
 
博士
博士
リンゴが師と仰ぐ人物。
毎日HTML/CSSデザインの研究をしており、その知識を余すことなくリンゴに教えてくれる。

スポンサーリンク

<object>タグとは

 

<object>

対応ブラウザInternet Explorer / Firefox / Google Chrome / Safari / Opera
分類フロー・コンテンツ / フレージング・コンテンツ / エンベディッド・コンテンツ / フォーム関連要素 / パルパブル・コンテンツ
利用場所エンベディッド・コンテンツが期待される場所
内容0個以上のparam要素に続き、フロー・コンテンツとインタラクティブ・コンテンツまたはいずれか


 
 
<object>タグは、画像や動画、音声のようにプラグインで再生するコンテンツ、他のHTML文書など、さまざまな外部コンテンツを埋め込む際に使用します。

<embed>タグがプラグインを必要とするデータを埋め込むのに対して、<object>タグは外部コンテンツ全般を埋め込むことができる汎用的なタグです。
 
 

data属性

data属性は、文書に埋め込む外部コンテンツのURLを指定します。
data属性とtype属性のどちらか一つは、必ず指定しなければいけません。
 
 

スポンサーリンク

type属性

type属性は、外部コンテンツのMIMEタイプを指定します。
type属性とdata属性のどちらか一つは、必ず指定しなければいけません。

 
 

width属性 / height属性

文書に埋め込む外部コンテンツの横幅と高さをピクセルで指定します。
 
 

スポンサーリンク

name属性

object要素を使うと、iframe要素のように別のHTML文書を埋め込んで表示させることができます。
以下のように、name属性でこの領域に名前を付け、a要素のtarget属性で参照すれば、リンク先のコンテンツがobject要素のコンテンツとして表示されるようになります。
 
 

使用例

 
 

表示例

ブログのトップページはコチラ

 
 

form属性

form属性は、object要素とform要素とを関連付ける際に使用します。
form属性に、関連付けるform要素のid属性を指定します。
通常、フォームを構成する各部品はform要素の中に入れる必要がありますが、この属性を指定することで、object要素の中にあるフォームの部品が、関連付けられたform要素の部品として機能するようになります。
 
 

スポンサーリンク

typemustmatch属性

data属性で指定する外部コンテンツのMIMEタイプと、type属性で指定するMIMEタイプが一致する場合にのみ、当該の外部コンテンツが利用できるようにします。

typemustmatch属性は、以下のいずれかの形式で指定します。
また、data属性とtype属性の両方が無い場合には指定できません。

  • typemustmatch
  • typemustmatch=”typemustmatch”
  • typemustmatch=””

 
 

使用例

 
 

表示例


サイトのロゴマークです。
 
 

スポンサーリンク

代替コンテンツについて

object要素の中に入れたコンテンツは、object要素に対応していないブラウザや、指定されたコンテンツを扱えない場合の代替コンテンツとして機能します。

例えば、以下のように記述しておけば、object要素で埋め込めない場合に、embed要素で埋め込まれるように指定することができます。

 
 

まとめ

さまざまな外部コンテンツを文書に埋め込む際は、<object>タグを使います。
 
 

HTML5 タグ図鑑

HTML5タグ全種類を図鑑としてまとめています。タグの意味や使い方でわからないことがあれば、ぜひこのページをご活用ください。

HTML5 タグ図鑑へ

 
HTML5 タグ図鑑

スポンサーリンク








objectタグとは?|文書に外部コンテンツを埋め込む