HTML/オブジェクト

出典: フリー教科書『ウィキブックス(Wikibooks)』
ナビゲーションに移動 検索に移動
HTML > HTML/オブジェクト


画像の挿入[編集]

画像の挿入にはimg要素を使用する。主に使用される画像形式はJPEGGIFPNGである。

テキストブラウザのような画像表示が出来ないブラウザではimg要素内のalt属性で指定した文字列が表示される。

テキストブラウザや画像表示をしないように設定しているクライアントへの配慮として、alt属性は代替となりうる表現を記載することとなっている。単に装飾的な意味で用いている画像等のように代替すべき文字表現がない場合は空文字列を指定 (alt="") すること(省略は出来ない)。

作成例[編集]

HTMLの本文内に記載する。

<img src="wiki-textbook.png" width="200" height="100" alt="Wikibooks">

img要素には終了タグがないため、</img>は記載しない。src属性には、表示したい画像ファイルのURI(アドレス)を記載する。相対URI(*) で指定することも可能であり、同一サイト内での画像を参照する場合は相対URIを用いることが多い。width属性とheight属性で画像の横幅と縦幅を指定できる。

(*)そのHTMLファイルが存在する地点(一般的にはディレクトリ)からの画像ファイルの位置により示されるURI。HTML/ハイパーリンク#相対パスと絶対パスも参照。

イメージマップ[編集]

<img border="0" src="sample.png" usemap="#sample" alt="サンプル" width="500" height="200">
<map name="sample">
<area href="http://ja.wikipedia.org/" shape="circle" alt="ウィキペディア" coords="100,100,50">
<area href="http://ja.wikinews.org/" shape="square" alt="ウィクショナリー" coords="250,10,300,190">
<area href="http://ja.wikiquote.org/" shape="poly" alt="ウィキクオート" coords="350,250,450,190,450,10,350,250">
</map>

画像の一部、特定領域にリンクを設定し、その領域をクリックした場合指定したリンク先へ飛べるようにする。img要素にusemap属性であらかじめ設定されたイメージマップの名前を「#マップ名」と指定することにより利用可能となる。イメージマップを設定するときはmap属性でマップ名の定義を行い、area要素のspace属性で領域の形状を、coords属性で座標を指定する。この際座標はコンマで区切る。

尚イメージマップの場合、テキストブラウザや画像非表示となっているブラウザのためにリンク先が何であるかを示すalt属性を指定すべきであり、この場合空文字列を指定すべきではない。

形状 space属性の値 coords属性の値
円形 circle 中心の座標 (x,y) と半径の値を順番に指定。
長方形 square 左上の座標 (x1,y1) と右下の座標 (x2,y2) を順番に指定。
多角形 poly 全ての角のxとyの座標を順番に指定。指定数に限りはないが、始点と終点は必ず同じ座標を指定しなければならない。

マルチメディアの挿入[編集]

embed要素[編集]

embed要素はプラグインを埋め込み、ブラウザが直接再生できないファイルをページコンテンツの一部として利用するものである。プラグインは予めブラウザ側にインストールしておく必要があり、該当のプラグインがないとコンテンツを利用できない場合がある。ただし全ての環境でプラグインが利用できるわけではないため、<noembed></noembed>内で利用できない環境で表示させる内容を書くべきである。この際「プラグインを有効にしてください」や「プラグインがインストールされている必要があります」などとかかれるケースがあるが、このような記述は好ましくない。代替的な内容(例えばFlashによるメニューを埋め込んでいた場合はHTMLでのメニュー)を記述しておくか、必要がなければ何も書かないほうが良い。

src
対象となるファイルの指定。
type
MIMEタイプの指定。ファイルタイプを正しく指定することでブラウザ側が適切なプラグインを割り当ててオブジェクトを再生する。指定しなかった場合はブラウザ依存となり自動的にプラグインが割り当てられるが、自動割り当てのプラグインが再生するファイルに対応していない場合もあるので指定することが望ましいだろう。
ただし特定環境でしか利用できないプラグインを指定するとユーザーの利便性を損なうことになるため、このような場合は何らかの配慮を行うべきである。
width,height
オブジェクトの大きさをpx単位で指定する。指定しなかった場合プラグイン依存になるが、この方法だとプラグインが適切なサイズを認識するのに時間を掛けてしまい、ページの読み込み途中で突然埋め込み領域の大きさが変化してしまう場合もある。埋め込み領域の大きさが突然変化することでそこよりも下にあるコンテンツの(画面上に)表示位置がずれてしまうため可能であれば指定することが望ましい。
autostart/autoplay
指定された音楽や動画の再生設定。trueまたは1で自動再生を実行し、falseまたは0で自動再生を行わない。プラグインの種類によってどちらが使えるか異なるため、適切に使い分ける必要がある。
loop
ループ再生の設定。loop属性値に具体的な数字を指定した場合その回数だけループ再生が行われるようになり、trueや-1などを指定した場合には無限ループ再生となる。また、falseや0を指定することで自動再生を行わない。ただし自動再生や無限ループ再生は嫌がられることが多く、人によっては自動で音楽がなった瞬間にページを閉じる人もいる。必要がなければなるべく自動的な再生を行うべきではないだろう。
hidden
埋め込みオブジェクトを隠す設定。1でオブジェクトを隠し、0でオブジェクトを表示する(デフォルト)。ただし、これは再生や停止の切り替えをユーザーに行わせないことにもなるのでloop属性同様使用には注意が必要である。
volume
埋め込みオブジェクトの再生音量。Windows Media Playerの場合-1000が最小で0が最大、QuickTimeの場合0が最小で100が最大と言った具合にプラグインの種類で値の設定方法が異なるため、プラグインの種類を指定しなかった場合とんでもないことになってしまう。
pluginpage
オブジェクトを再生するプラグインの入手元URLを示す。指定されなかった場合の処理はブラウザ依存。

object要素[編集]

objectはウェブページに様々なデータを埋め込むためのものである。ブラウザが直接処理できるファイルであればブラウザが直接処理を行い、直接処理を行えない場合はプラグインを利用してファイルを利用する。ただし利用できないブラウザが多いため、例えばプラグインを埋め込みたい場合はembed要素など他の要素を埋め込む必要がある。object要素に囲まれた部分は、そのオブジェクトが利用できる場合ブラウザはparam要素とmap要素を除いた全ての要素を無視し、オブジェクトが利用できない場合はobject, param, map要素を無視してそこにある他の要素の記述を適用する。

data
ファイルのある場所
type
MIMEタイプの設定
width,height
オブジェクトの大きさ
classid
プラグインの種類を識別するためのコード。プラグインの種類ごとに決まった値が定められている。
codebase
ユーザーのコンピュータにインストールされているActiveXのバージョンを検出するために使用される。URLの末尾にある#Version=は最低動作環境を示すもので、バージョンが古い場合プラグインとして使用されているアプリケーションがアップデートを実行する場合もある。
param要素
埋め込むオブジェクトに関する詳細設定を行う要素。EMBED要素にて詳細設定を行う各属性の多くがparam要素のname属性値とvalue属性値に割り当てられるが、全ての要素がparam要素に割り当てられるわけではない。割り当て形式や設定可能なオプションはプラグインの種類によって異なる。

ファイルタイプの指定例[編集]

Windows Media Player
クラスID CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95
Codebase http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,5,715
MIMEタイプ application/x-mplayer2
Quick Time
クラスID clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B
Codebase http://www.apple.com/qtactivex/qtplugin.cab
MIMEタイプ audio/quicktime(オーディオの場合),video/quicktime(動画の場合)
Adobe Flash
クラスID clsid:D27CDB6E-AE6D-11cf-96B8-444553540000
Codebase http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,22,0
MIMEタイプ application/x-shockwave-flash

記述例[編集]

Windows Media Playerのプラグインを埋め込んだ例。

<object
 classid="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95"
 codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,5,715"
 standby="Loading Microsoft Windows Media Player components..."
 type="application/x-oleobject"
 height="69"
 width="300">
 <param name="filename" value="http://www.dummyurl.com/file/music/example.mp3">
 <param name="autostart" value="true">
 <param name="showcontrols" value="true">
 <param name="showstatusbar" value="true">
 <param name="showpositioncontrols" value="false">
 <param name="showtracker" value="true">
 <param name="allowchangedisplaysize" value="false">
 <param name="autosize" value="False">
 <param name="volume" value="-500">
 <param name="enablecontextmenu" value="false">
 <embed
 type="application/x-mplayer2"
 src="http://www.dummyurl.com/file/music/example.mp3"
 autostart="1"
 showcontrols="1"
 showpositioncontrols="0"
 showtracker="1"
 showstatusbar="1"
 volume="-500"
 enablecontextmenu="0"
 nojava="true"
 height="69"
 width="300">
 <noembed>
</object>