リファレンスインデックスへ
画像や動画をサイトに表示させる正しいXHTMLタグ

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

有限会社タグパンダ
喜安 亮介
2009/7/6
画像や動画、Flash、Javaアプレットといった外部アセットをHTML内に埋め込んで表示させたい場合に使うタグを5つ紹介します
今回紹介するタグ
img object param map area

写真や映像を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 Special

- PR -

TechTargetジャパン


HTML5 + UX フォーラム 新着記事
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)
- PR -

イベントカレンダー

PickUpイベント

- PR -

アクセスランキング

もっと見る

ホワイトペーパーTechTargetジャパン

注目のテーマ

デザインハック 記事ランキング

本日 月間
ソリューションFLASH