WEBページ作成リファレンス
cman.jp cman.jp > WEBページ作成TOP > HTMLタグ・リファレンス > HTMLタグ一覧(ABC順) > <object>「オブジェクト」

<object> 「オブジェクトの埋め込み」[読み方:オブジェクト]

<object>タグは、外部の様々な形式のデータを埋め込むことのできる汎用的なタグです。

HTML規格HTML4.01HTML5
使用可否
広告

<object> の仕様

カテゴリー使用できる場所(親要素)コンテンツモデル(子要素)タグ省略
フローコンテンツ
フレージングコンテンツ
エンベディッドコンテンツ
インタラクティブコンテンツ(usemap属性指定ありの場合)
エンベディッドコンテンツを子要素にもてる場所
<param>
トランスペアレント
不可

<object> の属性

【構文】
<object data="url" type="MIMEタイプ" width="幅" height="高さ" ・・・>
</object>
属性意味値のサンプルなど
data="url"組む込むファイルのurl【いずれか必須】サーバ内の相対パス : 「../index.html」
URL : 「http://www.cman.jp」
メール : 「info@example.jp」
type="MIMEタイプ"組み込むファイルのMIMEタイプ
【いずれか必須】
「image/gif」
typemustmatchdata属性で指定した外部コンテンツのMIMEタイプと、
type属性で指定したMIMEタイプが一致する場合のみ、
該当の外部コンテンツを利用可とする指定
※HTML5で追加
data属性、type属性両方が指定された時のみ指定可
width="値"コンテンツを表示する領域の幅
(ピクセルで指定)
「200」
height="値"コンテンツを表示する領域の高さ
(ピクセルで指定)
「300」
usemap="マップ名"イメージマップ名「#マップ名」
name="名前"組み込む領域の名前
form="フォームID"関連づけるformのID
※HTML5で追加
廃止された属性
  • align
  • archive
  • border
  • classid
  • codebase
  • codetype
  • declare
  • hspace
  • standby
  • vspace
グローバル属性
  • accesskey
  • class
  • contenteditable
  • dir
  • hidden
  • id
  • lang
  • spellcheck
  • style
  • tabindex
  • title
  • translate
イベント属性
ページTOP

<object>タグのサンプル

画像を組み込む
(通常はimgタグを使用します。詳細な代替コンテンツが必要な場合にobjectタグを使用します。)
<object data="sample.jpg" type="image/jpeg" width="100" height="140">
<p><a href="sample.jpg">表示出来ない場合は、クリックして表示してください。</a></p>
</object>
イメージマップを組み込む
<object data="html_area_sample1.gif" type="image/gif" usemap="#sample" width="350" height="210">
</object>

<p>イメージマップに対応していない場合は、リンクが設定されません。<br>
(2014/09/10時点 Chrome, Safariでは対応していません。)</p>
<map name="sample">
<area href="http://www.cman.jp" shape="rect" alt="四角形" coords="20,30,160,70">
<area href="http://www.cman.jp" shape="circle" alt="円形" coords="210,105,40">
<area href="http://www.cman.jp" shape="poly" alt="多角形" coords="275,145,275,205,335,175">
</map>

イメージマップに対応していない場合は、リンクが設定されません。
(2014/09/10時点 Chrome, Safariでは対応していません。)

四角形 円形 多角形
動画を組み込む
(動画未対応(表示されない)の場合メッセージを表示)
<object data="se04.swf" type="application/x-shockwave-flash" width="300" height="200">
<p>動画に対応していないため、表示されません。</p>
</object>

動画に対応していないため、表示されません。


サンプルのFlashファイルはFlashbucks様よりダウンロードし利用させていただいています。
(2014/09/10時点 Firefox, Safariでは対応していません。)
音声を組み込む
(oggがサポートされていれば oggを、サポートされていなければ mp3を再生します。
いずれもサポートされていない場合、再生不可のメッセージを表示)
<object data="se_maoudamashii_onepoint04.ogg" type="audio/ogg" width="350" height="80">
<param name="filename" value="se_maoudamashii_onepoint04.ogg">
<param name="autostart" value="false">
<param name="showcontrols" value="true">
<object data="se_maoudamashii_onepoint03.mp3" type="audio/mpeg" width="350" height="80">
<param name="filename" value=se_maoudamashii_onepoint03.mp3">
<param name="autostart" value="false">
<p>ブラウザのバージョンによっては、再生できない場合があります。</p>
<p><a href="se_maoudamashii_onepoint03.mp3">再生できない場合は、クリックして再生します。</a></p>
</object>
</object>

ブラウザのバージョンによっては、再生できない場合があります。

再生できない場合は、クリックして再生します。


音源は魔王魂様よりダウンロードし利用させていただいています。
(2014/09/10時点 Safariでは対応していません。)
Javaアプレットを組み込む
<object type="application/x-java-applet" classid="java:sample1.class" width="300" height="100">
<p>Javaアプレットが動作しません。</p>
</object>

Javaアプレットが動作しません。

(2014/09/10時点 IE、Safariでは対応していません。)

ページTOP

留意事項

  • <object>で使用する、ソフトウエア(media player,flush playerなど)はインストールが必要です。
  • <object>の動作は、ブラウザやそのバージョン、インストールされているプラグインの種類などによって動作が大きく異なりますので、注意が必要です。
ページTOP
広告
QrCode
このページのURL
スマートフォン・タブレット運営 : CMAN 株式会社シーマン