HTML要素埋め込みコンテンツ
figure 
要素のグループ化
2009/8/26
figure要素は、メディアコンテンツのグループを表します。
要素グループにキャプションを追加するには、figure要素の最初の子要素としてlegend要素を指定します。
属性
固有の属性はありません。
| 属性 | 値 | 説明 |
|---|---|---|
| グローバル属性 | - | 全要素共通の属性。 |
サンプル
<figure> <img src="http://farm4.static.flickr.com/3220/3664935670_b94968ccbc_t.jpg" width="100" height="56" alt="ノルディック＠オ・タン・ジャディス by php_javascript_room, on Flickr" /> <legend>ノルディック＠オ・タン・ジャディス</legend> </figure> <br><br> <figure> <legend>映画興行成績ランキング</legend> <ol reversed="true"> <li><cite lang="en">Night at the Museum: Battle of the Smithsonian</cite>, 2009</li> <li><cite lang="en">Harry Potter and the Half-Blood Prince</cite>, 2009</li> <li><cite>劇場版 仮面ライダーディケイド オールライダー対大ショッカー</cite>, 2009</li> <li><cite>HACHI 約束の犬</cite>, 2009</li> <li><cite>劇場版ポケットモンスター ダイヤモンド・パール アルセウス 超克（ちょうこく）の時空</cite>, 2009</li> <li><cite>アマルフィ 女神の報酬</cite>, 2009</li> <li><cite>ごくせん THE MOVIE</cite>, 2009</li> <li><cite>G.I.ジョー</cite>, 2009</li> <li><cite lang="en">Bolt</cite>, 2008</li> <li><cite lang="en">Transporter 3 </cite>, 2008</li> </ol> </figure>
- Night at the Museum: Battle of the Smithsonian, 2009
- Harry Potter and the Half-Blood Prince, 2009
- 劇場版 仮面ライダーディケイド オールライダー対大ショッカー, 2009
- HACHI 約束の犬, 2009
- 劇場版ポケットモンスター ダイヤモンド・パール アルセウス 超克（ちょうこく）の時空, 2009
- アマルフィ 女神の報酬, 2009
- ごくせん THE MOVIE, 2009
- G.I.ジョー, 2009
- Bolt, 2008
- Transporter 3 , 2008
img
画像の埋め込み
2009/8/26
img要素は、画像の埋め込みを表します。
img要素は空要素のため閉じタグはありません。
src属性およびalt属性は必須属性です。 src属性には、画像ファイルのあるURL（絶対または相対パス）を指定します。 alt属性には、画像の代替テキストを指定します。この代替テキストは、画像のパスなどが間違っている場合や、画像を無効にしている場合など、画像が表示されない場合に表示されます。
属性
HTML4.01にあったalign/border/hspace/vspace/longdesc属性は、HTML5で廃止されました。
| 属性 | 値 | 説明 |
|---|---|---|
| グローバル属性 | - | 全要素共通の属性。 |
| alt | テキスト | 画像の代替テキストを指定。この代替テキストは、画像のパスなどが間違っている場合や、画像を無効にしている場合など、画像が表示されない場合に表示されます。 |
| src | URL | 画像ファイルのあるURL（絶対または相対パス）を指定。 |
| height | 数値 | 画像の高さをピクセル単位で指定。 |
| width | 数値 | 画像の幅をピクセル単位で指定。 |
| ismap | URL | サーバーサイドイメージマップとして画像を定義。 |
| usemap | URL | クライアントサイドイメージマップとして画像を定義。 |
サンプル
<!-- 画像の埋め込み --> <img src="http://farm4.static.flickr.com/3220/3664935670_b94968ccbc_t.jpg" width="100" height="56" alt="ノルディック＠オ・タン・ジャディス by php_javascript_room, on Flickr" /> <!-- クライアントサイドイメージマップ --> <img src="/content/img/xhtml/graphic.png" width="300" height="200" alt="グラフィック" usemap="#graphic" /> <map id="graphic" name="graphic"> <area shape="rect" coords="161,53,274,108" href="#" alt="四角" /> <area shape="circle" coords="50,57,29" href="http://www.yahoo.co.jp/" target="_blank" alt="丸" /> <area shape="polygon" coords="119,111,87,173,151,174" href="http://www.google.co.jp/" target="_blank" alt="三角" /> </map>
iframe
インラインフレーム
2009/8/26
iframe要素は、他のWebページの埋め込みを表すインライン要素です。
属性
HTML4.01にあったalign/frameborder/height/width/longdesc/marginheight/marginwidth/name/scrolling属性は廃止されました。 HTML5ではsrc属性のみサポートされています。
| 属性 | 値 | 説明 |
|---|---|---|
| グローバル属性 | - | 全要素共通の属性。 |
| src | URL | インラインフレーム内に表示するページのURIを指定。 |
| name | フレーム名 | インラインフレームの名前を指定。 |
| sandbox | sandbox | sandboxを指定すると、インラインフレームによってホスティングされたあらゆるコンテンツでの追加の制限のセットを有効化。 |
| seamless | TRUE FALSE | インラインフレームのブラウジングコンテキストがドキュメントの一部に見える方法でレンダリングするかどうかの有無を指定。 |
| height | 数値 | インラインフレームの高さをピクセル単位で指定。 |
| width | 数値 | インラインフレームの幅をピクセル単位で指定。 |
サンプル
<iframe src="http://www.mozilla-japan.org/" style="width:100%;height:200px;"> インラインフレーム対応のブラウザでご覧下さい。 </iframe>
object
オブジェクトの埋め込み
2009/8/26
object要素は、動画、音声、Flash、HTMLページ、画像などのオブジェクトをページに埋め込むために使用します。 この要素は、HTML文書の中に挿入されたオブジェクトに対してデータやパラメータ、またそのデータを表示・操作するためにしようするコードを指定することが出来ます。
オブジェクト要素は、head要素またはbody要素内に記述することが出来ます。 開始タグと終了タグの間のテキストは、このタグがサポートされていないブラウザ向けの代替テキストです。 param要素は、オブジェクトに対しランタイムの設定を定義します。 data属性とtype属性のどちらか1つを指定する必要があります。
画像を埋め込む場合は、object要素ではなくimg要素を使用してください。
属性
HTML4.01にあったalign/archive/border/classid/codebase/codetype/declare/hspace/name/standby/vspace属性は廃止されました。
| 属性 | 値 | 説明 |
|---|---|---|
| グローバル属性 | - | 全要素共通の属性。 |
| data | URL | オブジェクトのURLを絶対または相対パスで指定。 |
| type | MIMEタイプ | オブジェクトのMIMEタイプを指定。 |
| name | ユニークな名前 | オブジェクトの名前を指定。 |
| usemap | URL | オブジェクトと共に使用されるクライアントサイドイメージマップのURLを指定。 |
| form | オブジェクトをフォームの所有者に関連付ける場合に使用。 | |
| width | 数値 | オブジェクトの幅をピクセル単位で指定。 |
| height | 数値 | オブジェクトの高さを指定。 |
サンプル
<figure> <object type="application/x-shockwave-flash" data="/content/media/flash/va002a.swf" width="300" height="250"></object> <legend>HAPPY VALENTINE</legend> </figure>
param
パラメータ
2009/8/26
param属性は、ページ内に挿入されたオブジェクトに渡すパラメータを表します。
param要素は、object要素内に記述します。
属性
HTML4.01にあったtype/valuetype属性は、HTML5で廃止されました。
| 属性 | 値 | 説明 |
|---|---|---|
| グローバル属性 | - | 全要素共通の属性。 |
| name | ユニークな名前 | パラメータの名前を指定。 |
| value | 値 | パラメータの値を指定。 |
サンプル
<figure> <object type="application/x-shockwave-flash" width="300" height="250"> <param name="movie" value="/content/media/flash/va002a.swf"> <param name="wmode" value="transparent"> <param name="quality" value="high"> <param name="bgcolor" value="#000000"> </object> <legend>HAPPY VALENTINE</legend> </figure>
video
動画の埋め込み
2009/8/26
video要素は、ムービークリップやその他ビデオストリームなどの動画を表します。
このタグが古いブラウザにサポートされていないことを示すために、video要素内にテキストを記述することが出来ます。
属性
| 属性 | 値 | 説明 |
|---|---|---|
| グローバル属性 | - | 全要素共通の属性。 |
| src | URL | 再生する音声のURLを指定。 |
| poster | URL | ビデオが準備できる前に示す画像のURLを指定。 |
| autobuffer | TRUE FALSE | 自動バッファするかどうかの有無を指定。autoplay属性が指定されている場合は無視される。 |
| autoplay | TRUE FALSE | 自動再生するかどうかの有無を指定。TRUEを指定すると、オーディオの準備ができ次第すぐに再生される。 |
| loop | 数値 | ループ再生するかどうかの有無を指定。 |
| controls | TRUE FALSE | 再生ボタンなどユーザーがオーディオを制御できるコントローラを表示するかどうかを真偽値で指定。TRUEを指定するとコントロールを表示します。 |
| width | 数値 | 動画再生プレーヤーの幅をピクセル単位で指定。 |
| height | 数値 | 動画再生プレーヤーの高さをピクセル単位で指定。 |
サンプル
<video src="media/SampleMovie_low.wmv" width="160" height="120"> このブラウザは、video要素がサポートされていません。 </video>
audio
音声の埋め込み
2009/8/26
audio要素は、音楽やその他オーディオストリームなどの音声を表します。
このタグが古いブラウザにサポートされていないことを示すために、audio要素内にテキストを記述することが出来ます。
属性
| 属性 | 値 | 説明 |
|---|---|---|
| グローバル属性 | - | 全要素共通の属性。 |
| src | URL | 再生する音声のURLを指定 |
| autobuffer | TRUE FALSE | 自動バッファするかどうかの有無を指定。autoplay属性が指定されている場合は無視される。 |
| autoplay | TRUE FALSE | 自動再生の有無を真偽値で指定します。TRUEを指定すると、オーディオの準備ができ次第すぐに再生されます。 |
| loop | 数値 | ループ再生するかどうかの有無を指定。 |
| controls | TRUE FALSE | 再生ボタンなどユーザーがオーディオを制御できるコントローラを表示するかどうかを真偽値で指定。TRUEを指定するとコントロールを表示します。 |
| width | 数値 | 音声再生プレーヤーの幅をピクセル単位で指定。 |
| height | 数値 | 音声再生プレーヤーの高さをピクセル単位で指定。 |
サンプル
<audio src="media/sample.mp3"> このブラウザは、audio要素がサポートされていません。 </audio>
source
メディアリソース
2009/8/26
video要素やaudio要素などのメディア要素に対するメディアリソースを指定します。
属性
| 属性 | 値 | 説明 |
|---|---|---|
| グローバル属性 | - | 全要素共通の属性。 |
| src | URL | 再生する音声のURLを指定 |
| type | 数値 | 動画再生プレーヤーの幅をピクセル単位で指定。 |
| media | メディアタイプ | ブラウザがダウンロードするかどうか決定するためのメディアリソースのタイプを指定。 |
サンプル
<source src="video.mp4" type="video/mp4; codecs="avc1.42E01E, mp4a.40.2"">
canvas
グラフィック
2009/8/26
canvas要素は、グラフや画像など、グラフィックを表します。
このタグが古いブラウザにサポートされていないことを示すために、canvas要素内にテキストを記述することが出来ます。 タグはグラフィック用の入れ物にすぎません。実際にグラフィックを描くためにはスクリプトを使用する必要があります。 Firefox、Operaなど、いくつかのブラウザでは既にcanvas要素がサポートされています。
属性
| 属性 | 値 | 説明 |
|---|---|---|
| グローバル属性 | - | 全要素共通の属性。 |
| width | 数値 | canvasの幅をピクセル単位で指定。 |
| height | 数値 | canvasの高さをピクセル単位で指定 |
サンプル
<canvas id="myCanvas">
canvas要素がサポートされていません
</canvas>
<script type="text/javascript">
function drawCanvas(){
var canvas=document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.fillRect(0,0,50,50);
canvas.setAttribute('width', '300'); // clears the canvas
context.fillRect(0,100,50,50);
canvas.width = canvas.width; // clears the canvas
context.fillStyle='#FF0000';
context.fillRect(0,0,80,100);
context.fillRect(100,0,50,50); // only this square remains
}
drawCanvas();
</script>
map
イメージマップの定義
2009/8/26
map要素は、クライアントサイドクリッカブルマップを表します。
map要素内には、area要素が1回以上出現する必要があります。 area要素は、map要素内で入れ子にされます。 area要素はイメージマップの領域を指定します。
属性
HTML4.01にあったname属性は、HTML5で廃止されました。
| 属性 | 値 | 説明 |
|---|---|---|
| グローバル属性 | - | 全要素共通の属性。 |
| name | ユニークな名前 | map要素の名前を指定。id属性も指定する場合、id属性にはname属性と同じ名前を指定する必要があります。 |
サンプル
<img src="/content/img/xhtml/graphic.png" width="300" height="200" alt="グラフィック" usemap="#graphic"> <map id="graphic" name="graphic"> <area shape="rect" coords="161,53,274,108" href="#" alt="四角"> <area shape="circle" coords="50,57,29" href="http://www.yahoo.co.jp/" target="_blank" alt="丸"> <area shape="polygon" coords="119,111,87,173,151,174" href="http://www.google.co.jp/" target="_blank" alt="三角"> </map>
area
イメージマップ領域
2009/8/26
area要素は、イメージマップ領域を表します。
area要素は空要素で、閉じタグはありません。
領域をリンクにする場合は、href属性に、領域をクリックした時に表示するページのURIまたはアンカーを指定します。
target属性には、href属性に指定したリンク先の開き方を指定します。 同窓なら"_self"、別窓なら"_blank"を指定します。 領域をリンクにしない場合は、nohref属性を指定します。
shape属性には、領域の区切り方を指定します。
coords属性には、領域のルールに従って、X座標・Y座標などを指定します。
href属性とnohref属性は、一緒に指定することはできませんので注意してください。
属性
HTML4.01にあったnohref属性は、HTML5で廃止されました。
HTML5では、新たにmedia/ping/rel/type属性が追加されました。
| 属性 | 値 | 説明 |
|---|---|---|
| グローバル属性 | - | 全要素共通の属性。 |
| alt | テキスト | 必須属性。代替テキストを指定。 |
| coords | 複数の座標 | X座標・Y座標を指定（カンマ区切り）。 |
| shape | rect rectangle circ circle poly polygon | 領域の形状を指定。円の場合は「circle」、多角形の場合は「polygon」、四角の場合は「rect」（デフォルト値）を指定。省略した場合はデフォルト値が適用されます。 |
| href | URL | 領域をクリックした時に表示するページのURIまたはアンカーを指定。href属性がある場合のみ指定可 |
| target | フレームターゲット | 対象URLの開き方を指定。 |
| ping | URL | スペースは、ユーザーがハイパーリンクに従うときに通知されるURLのリストを切り離します。href属性がある場合のみ指定可。 |
| rel | リンクタイプ | 現在の文書と対象URLの関係を指定している場合のみ指定可。 |
| media | メディアタイプ | 対象URLのメディアタイプを指定。デフォルトは「all」。href属性がある場合のみ指定可。 |
| hreflang | 言語コード | 対象URLのベース言語を指定。。 |
| type | MIMEタイプ | 対象URLのMIMEタイプを指定。href属性がある場合のみ指定可。 |
サンプル
<img src="/content/img/xhtml/graphic.png" width="300" height="200" alt="グラフィック" usemap="#graphic"> <map id="graphic" name="graphic"> <area shape="rect" coords="161,53,274,108" href="#" alt="四角"> <area shape="circle" coords="50,57,29" href="http://www.yahoo.co.jp/" target="_blank" alt="丸"> <area shape="polygon" coords="119,111,87,173,151,174" href="http://www.google.co.jp/" target="_blank" alt="三角"> </map>