HTML/オブジェクト
画像の挿入 編集
画像の挿入にはimg要素を使用する。主に使用される画像形式はJPEG、GIF、PNGである。
テキストブラウザのような画像表示が出来ないブラウザではimg要素内のalt属性で指定した文字列が表示される。
テキストブラウザや画像表示をしないように設定しているクライアントへの配慮として、alt属性は代替となりうる表現を記載することとなっている。単に装飾的な意味で用いている画像等のように代替すべき文字表現がない場合は空文字列を指定 (alt="") すること（省略は出来ない）。
作成例 編集
HTMLの本文内に記載する。あらかじめ、表示したい画像（下記コードでは sample.png ）を手元のコンピュータに準備しておいて、HTMLファイルと同じフォルダに入れておく。
<img src="sample.png" width="200" height="100" alt="Wikibooks">
なお width は画像の横幅、height は画像の縦幅である。
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>
上のコードでは、画像の一部、特定領域にリンクを設定し、その領域をクリックした場合指定したリンク先へ飛べるようにしている。
決して、画像に円や四角形などを描画するわけではないので、混同しないように。なお、リンクある領域の位置は、上記コードの場合、モニターの設定や大きさなどにも寄るが、普通のノートパソコンで見た場合ならリンク領域は横に並んでいる（画像に円や四角形が表示されるわけではないので、実行しても見えない）。（なお、HTMLで円や四角などの基本図形を描画したい場合、HTML5以降なら『HTML/HTML5#canvas要素』で解説した方法で円などを描画できる。）
リンク領域の位置にマウスカーソルを動かせば、画面左下などをよく見れば、リンク先の名称が表示されている。
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>