Tweet

リファレンスインデックスへ

画像や動画をサイトに表示させる正しいXHTMLタグ

画像や動画、Flash、Javaアプレットといった外部アセットをHTML内に埋め込んで表示させたい場合に使うタグを5つ紹介します

写真や映像をWebサイトに表示させよう

　皆さんが普段見ているWebサイトの多くは、写真や映像を使っていると思います。これはHTMLファイルのソースコード内に、外部アセットを表示させるためのタグを記述しているから表示できているのです。

　それでは、順番に外部アセットを読み込む要素を見ていきましょう。

img要素

　img要素は画像を読み込む際に使い、インライン要素として機能します。埋め込む画像の形式としては、GIFやJPEGといった形式が一般的に使われています。

　しかし、最近のWebブラウザでPNG形式が標準的にサポートされたことにより、PNG形式の画像データも多くの場面で使われるようになってきています。

　img 画像を読み込むためのimg要素

object要素

　object要素は、FlashのSWFファイルやJavaアプレット、画像、動画などを読み込む際に使います。インライン要素･ブロック要素の両方を内包できます。

　後方互換性を確保するため、embedタグとセットでマークアップされることがよく知られています。しかし、将来的にHTMLの仕様では、embed要素が廃止される予定のため、objectタグや、Internet Explorer独自の「コンディショナルコメント」を使ったマークアップ方法が、最近ではよく使われています。

　object 外部アセットを読み込むためのobject要素

param要素

　param要素は、それを内包するobject要素やapplet要素に対してパラメータを指定します。

　どんな順序でいくつ出現してもよいのですが、内容の先頭になくてはいけません。インライン要素として機能しますが、終了タグはありません。

　param パラメータを指定するparam要素

map要素

　map要素は、埋め込まれてる画像に「クライアント側イメージマップ」（クリッカブルマップ）を作成します。インライン要素･ブロック要素の両方を内包できるので、どちらの要素型にも分類できます。

　map クライアント側イメージマップを作成するmap要素

area要素

　area要素はmap内に、クライアント側イメージマップを定義した場所とリンク先を指定します。インライン要素として機能しますが、終了タグはなく空要素として存在します。

　area イメージマップを定義した場所とリンク先を指定するarea要素

喜安 亮介……1980年愛媛県生まれ。タグパンダの代表取締役。ディレクター兼デザイナーとしてWeb制作案件に携わる。社名のパンダは、「白・黒はっきりした正しい判断力と柔軟性のあるクリエイティブな発想」を提供するという思いから。

1/6

INDEX
Web標準HTMLタグリファレンス（6） 画像や動画をサイトに表示させる正しいXHTMLタグ 画像・動画
	img 画像を読み込むためのimg要素
	object 外部アセットを読み込むためのobject要素
	param パラメータを指定するparam要素
	map クライアント側イメージマップを作成するmap要素
	area イメージマップを定義した場所とリンク先を指定するarea要素

【関連記事】

デザイナーのためのWeb学習帳 Webを構成する技術を超初心者向けに説明します。まずは基本の基本である「HTML」から攻略していこう！ 「デザインハック」コーナー

いまさら聞けないCSS／スタイルシート入門 Webデザインにあると便利なCSS。ちょっとサイトをステキにするためのスタイルシートです。基本の基本を学びませんか？ 「デザインハック」コーナー

WebデザイナのためのHTMLチューニング入門 Webサイトを見た人の印象を良くするのか悪くするのかには“速度”が大きくかかわってきます。FirefoxのプラグインYSlowで測る7つの計測ポイントから“速い” HTMLの書き方を学びましょう 「デザインハック」コーナー

「デザインハック」コーナーへ

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

RSSフィード