構文
<div>
:
<object>・・・</object>
:
</div>
説明文
<object>タグは,画像や動画,FlashなどといったオブジェクトをWebページ上に貼り付けるタグである。「data」属性に貼り付けるオブジェクトのURL,「type」属性にオブジェクトの種類をMIMEタイプで指定する。また,Flashなどのオブジェクトについては,「classid」にそれぞれのオブジェクトの種類を表すIDを指定すればよい。
また,オブジェクトを実行するプラグインなどに設定を行いたい場合は,<param>タグで引き渡すことができる。
<object>タグはWebブラウザやインストールされているプラグインによって動作が異なる。
サンプル
HTMLソース
<div>
<object data="object.jpg" type="image/jpeg"></object>
</div>
ブラウザ表示例
対応状況
HTML | IE | Firefox | Opera | |||||
---|---|---|---|---|---|---|---|---|
4 strict | 4 Transitional | 5 | 6 | 7 | 2 | 3 | 8 | 9 |
○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
要素,タグ
タグ要素 | インライン要素 |
---|---|
包括可能要素 | <param>,ブロック要素,インライン要素 |
タグ記述条件 | 開始タグ:必須 終了タグ:必須 |
属性
よく利用する属性
属性 | 意味 | 対応 | ||
---|---|---|---|---|
HTML 4s | HTML 4t | その他 | ||
classid=ID | Javaアプレットのクラスや,Active Xコントロールなどの識別番号を指定する。Javaアプレットのクラスを指定する場合は「class="java:クラス名.class"」と指定する。また,識別番号を指定する場合は「classid="clsid:識別番号"」と指定する。例えば,Flash Playerの識別番号は「D27CDB6E-AE6D-11cf-96B8-444553540000」,Windows Media Playerの識別番号は「6BF52A52-394A-11d3-B153-00C04F79FAA6」となる | ○ | ○ | |
codebase=URL | 「classid」,「data」,「archive」属性の基準となるURLを指定する。この属性を指定することで,基準となるアドレス以下を指定すればよい。例えば,「http://itpro.nikkeibp.co.jp/linux/index.html」をarchive属性に指定したい場合,codebaseにて「http://itpro.nikkeibp.co.jp/linux/」と指定しておけば,archive属性では「index.html」のみを指定すればよい | ○ | ○ | |
codetype=MIMEタイプ | classid属性で指定したファイルのMIMEタイプを指定する。例えば,JPEG画像の場合は「image/jpeg」,HTMLファイルの場合は「text/html」と指定する | ○ | ○ | |
data=URL | オブジェクトの内容となるファイルのURLを指定する | ○ | ○ | |
name=名前 | <object>をフォームとして利用する際に名前を付けるサーバー側のプログラムで処理する場合,この名前を確認することでどのフォーム部品の値であるかを判断できる | ○ | ○ | |
type=MIMEタイプ | data属性で指定したファイルのMIMEタイプを指定する。例えば,JPEG画像の場合は「image/jpeg」,HTMLファイルの場合は「text/html」と指定する | ○ | ○ | |
width=幅 | 表の横幅を指定する。数値のみで指定すると単位がピクセルとなる。割合で指定する場合は「%」を末尾に付ける | ○ | ○ | |
height=高さ | オブジェクトの高さを指定する。数値のみで指定すると単位がピクセルとなる。割合で指定する場合は「%」を末尾に付ける | ○ | ○ |
その他の属性
属性 | 意味 | 対応 | ||
---|---|---|---|---|
HTML 4s | HTML 4t | その他 | ||
align=位置 | オブジェクトの配置位置を指定する。「top」で上揃え,「middle」で縦方向の中央揃え,「bottom」で下揃え,「left」で左揃え,「right」で右揃えにそれぞれ配置する | × | ○ | |
archive=URL | オブジェクトに関連する書庫ファイルのURLをスペースで区切りながら列挙する | ○ | ○ | |
border=太さ | 枠線の太さを指定する。単位はピクセル | × | ○ | |
class=クラス名 | このタグのクラス名。CSSでスタイルを指定する場合などに利用される | ○ | ○ | |
declare | オブジェクトのダウンロードが完了した後,すぐに実行をせず待機する | ○ | ○ | |
dir=方向 | タグ内の文字の表示方向。「ltr」を指定すると文字を左から右に,rtlを指定すると「右から左」に表示する。しかし,多くのWebブラウザでは,文字コードを自動判別し,自動的に表示方向を決定している。そのため,日本語を「rtl」と指定しても実際には左から右に表示される。強制的に並び替えを行いたい場合は<bdo>タグを利用する | ○ | ○ | |
hspace=余白幅 | オブジェクト周りの横方向に関する余白の幅を指定する。数値のみで指定すると単位がピクセルとなる | × | ○ | |
id=ID | タグのID。ダイナミックHTMLでタグを操作する場合や,Java Scriptでのタグの制御,個別にスタイルを指定する場合などに利用する | ○ | ○ | |
lang=言語 | タグ内に記述した言語。例えば,日本語の場合は「ja」,英語の場合は「en」を指定する | ○ | ○ | |
standby=テキスト | ダウンロードが完了するのを待つ間に,表示するテキストを指定する | ○ | ○ | |
style=スタイル | タグのスタイル。スタイルの指定方法については「CSSの基本 (2) CSSの記述位置」を参照 | ○ | ○ | |
tabindex=順序 | タブ・キーによるフォーカスの移動順序を指定する。値が小さいほど先にフォーカスされる | ○ | ○ | |
title=タイトル | タグのタイトル。一般的にタグの補足情報を記述する。一般的なWebブラウザでは,タグ上にマウス・ポインタを乗せるとツール・チップにtitle属性に指定した内容を表示する | ○ | ○ | |
usemap=<map>のID | クリッカブルマップとの関連付ける際に指定する。関連付ける<map>タグに指定したIDを指定する | ○ | ○ | |
vspace=高さ | オブジェクト周りの縦方向に関する余白の高さを指定する。数値のみで指定すると単位がピクセルとなる | × | ○ |
マウスやキーボードの状況変化に関わる属性
属性 | 意味 | 対応 | ||
---|---|---|---|---|
HTML 4s | HTML 4t | その他 | ||
onclick=スクリプト | このタグに対応する表示結果にマウスの左ボタンをクリックした場合に,指定したスクリプトを実行する | ○ | ○ | |
ondblclick=スクリプト | このタグに対応する表示結果にマウスの左ボタンをダブル・クリックした場合に,指定したスクリプトを実行する | ○ | ○ | |
onmousedown=スクリプト | このタグに対応する表示結果にマウスのボタンで押下した場合に,指定したスクリプトを実行する | ○ | ○ | |
onmouseup=スクリプト | このタグに対応する表示結果にマウスのボタンを離した場合に,指定したスクリプトを実行する | ○ | ○ | |
onmouseover=スクリプト | このタグに対応する表示結果にマウス・ポインタが乗った場合に,指定したスクリプトを実行する | ○ | ○ | |
onmousemove=スクリプト | このタグに対応する表示結果上でマウス・ポインタが動いた場合に,指定したスクリプトを実行する | ○ | ○ | |
onmouseout=スクリプト | このタグに対応する表示結果にマウス・ポインタが外れた場合に,指定したスクリプトを実行する | ○ | ○ | |
onkeypress=スクリプト | このタグに対応する表示結果にフォーカスした状態で,キーボードのキーを押下して離した場合に,指定したスクリプトを実行する | ○ | ○ | |
onkeydown=スクリプト | このタグに対応する表示結果にフォーカスした状態で,キーボードのキーを押下した場合に,指定したスクリプトを実行する | ○ | ○ | |
onkeyup=スクリプト | このタグに対応する表示結果にフォーカスした状態で,キーボードのキーから離した場合に,指定したスクリプトを実行する | ○ | ○ |
■ 画像を<object>で貼り付ける
<img>タグではなく,<option>タグを用いて画像ファイルを張り付けることも可能だ。
<object data="photo.jpg"
type="image/jpeg" width=100 height=100></object>
この際,type属性にはMIMEタイプで画像の形式を指定する。JPEG形式ならば「image/jpeg」,GIF形式ならば「image/gif」、PNG形式ならば「image/png」となる。
■ YouTubeの動画を貼り付ける
動画を共有するYouTubeで公開している動画は自分のブログなどに張り付けることが可能となっている。この際,<object>タグを利用して貼り付けを行う。
<div class="youtube">
<object width="400" height="300">
<param name="movie" value="http://www.youtube.com/xxxxxxxxx">
</param>
<param name="wmode" value="transparent"></param>
<embed src="http://www.youtube.com/xxxxxxxxx"
type="application/x-shockwave-flash" wmode="transparent"
width="400" height="300"></embed>
</object>
</div>
widthとheight属性には動画の表示サイズを,<param name="movie">タグのvalue属性および<embed>タグのsrc属性には動画のURLを指定する。
■ 主なオブジェクトのclassid
主なオブジェクトを貼り付ける際に設定する「classid」は以下の通りである。
説明 | classid |
---|---|
Windows Media Player | 22D6F312-B0F6-11D0-94AB-0080C74C7E95 |
RealMedia | CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA |
QuickTime | 02BF25D5-8C17-4B23-BC80-D3488ABDDC6B |
YAMAHA MIDPLUG | B0C207A3-42EE-11D0-9DB3-00805F8A73C5 |
Flash | D27CDB6E-AE6D-11cf-96B8-444553540000 |
Shockwave | 166B1BCA-3F9C-11CF-8075-444553540000 |
Java | 8AD9C840-044E-11D1-B3E9-00805F499D93 |
Java | CAFEEFAC-0013-0001-0000-ABCDEFFEDCBA |
データバインド | 333C7BC4-460F-11D0-BC04-0080C7055A83 |
Active X | 333C7BC4-460F-11D0-BC04-0080C7055A83 |
VRML | 90A7533D-88FE-11D0-9DBE-0000C0411FC3 |