イメージとオブジェクト

画像は文字による説明に加えてユーザの理解を促すために、またはグラフや地図などのように文章で表現するよりも画像として提供した方がわかりやすい場合や、写真やイラストのように文章や言葉では表せないものの性質の場合に適しています。

ただし、画像は文字に比べて情報としての汎用性が大きく劣るため、画像を使用する場合は何らかのトラブルで画像が表示できない場合や音声出力・点字出力などの非視覚環境、画像の表示に対応していない・あるいは表示しない設定にしている環境においても画像の表現する情報を取得できるようにしておく配慮が必要不可欠となります。画像を使用する場合は、(どんな環境からでも情報へアクセスできるように)アクセシビリティを確保する為、代替テキスト(altanative text)を必ず記述することになっています。その際、画像で表現する情報と代替テキストの内容が同等であることが重要です。

画像は文章で表現するよりも画像に置換えて表現した方が適切である場合に使われるべきでものであるため、たとえば、HTML文書の見栄えを整えるためなどの装飾目的に使用することは、HTML の本義としては正しい使い方ではありません。なぜなら見栄えの調整のための画像では、それが何を表しているのかを適切な代替テキストの内容に置き換えることができない場合があるためです。

環境に依存し、適切な代替方法を行うことができないこともあるため画像ファイルだけに限らず、音声ファイルや動画ファイルなどのオブジェクトをウェブページで使用する場合には、制作者はユーザの視点に立って、それらは本当に必要なのかどうかをよく考えてから、必要に応じて適切に使用するようにしましょう。

イメージを貼り付ける

<img src="画像ファイルのURI">

img要素は指定した部分にイメージ(画像)を貼り付けるインライン要素です。src属性は表示させる画像ファイルの所在を URI で指定します。一般的な画像のファイル形式には GIF形式(拡張子:".gif"), JPEG形式(拡張子:".jpg"、または "jpeg"), PNG形式(拡張子:".png")などがあります。たとえば、"image.gif" という画像ファイルがあるとすると、その画像ファイルを表示したい指定部分に "<img src="image.gif">" のように記述します。なお、img要素は内容をもたない空要素なので終了タグはありません。

登場要素の詳解

イメージの代替テキストの設定

<img src="画像ファイルのURI" alt="代替テキスト">

img要素の alt属性は画像ファイルの代替テキスト(altanative text)を指定します。代替テキストとは何らかのトラブルで画像が表示できない場合や音声出力・点字出力などの非視覚環境、画像の表示に対応していない・あるいは表示しない設定にしている環境において、その画像の表現する情報の代替となる文章のことです。ただし画像の内容を説明するのではなく、画像が表現している情報と同等の内容のテキスト情報を記述します。そして、img要素を使用する場合は alt属性の指定が必須となっています(HTML4 では img要素は必ず alt属性とセットにする仕様となっています)。

また、意味をもたないデザイン上の表示のためだけに貼り込んでいる装飾用の画像等には alt="" のように値を空にして、意味をもたない画像であることを定義することになっています。装飾用の画像に半角スペースなどの空白類文字を含められている場合がありますが、これは画像の代替となる適切なテキストの記述ができているわけではないため良くない作法です。もちろん、装飾用の画像を用いなくて済むにこしたことはありません。

イメージのサイズを指定

<img src="画像ファイルのURI" width="90" height="90">

img要素の width属性, height属性は画像の表示サイズを指定する属性で値には整数(ピクセル数で解釈)、または表示域の横幅、縦幅に対するパーセンテージ値(%)を指定します。実際の画像サイズよりもサイズを大きくして表示することも可能ですが、画像ファイルそのものの解像度は変わらないため、大きく表示するようにした分、画像は荒く表示されます。

また、画像のサイズをあらかじめ指定しておくとことで、UA は画像の読み込みを待たずに指定された画像サイズ分の領域をあけておいて、先に他の要素を表示するので、ページの全体像を早く表示することができます。このようにレンダリングがスムーズに行えるようにするためにも極力 width属性, height属性を指定しておくことが望まれます。

イメージに枠を表示する

<img src="画像ファイルのURI" border="5">

img要素の border属性は画像の周りに枠線を表示します。通常、border属性の指定がない場合、枠線は表示されませんが、UA によっては画像がアンカー内容となるリンクが設定されている場合に枠線が表示されることがあります。この枠線を表示しないようにするには、border="0" の指定を付け加える必要があるのですが、HTML4 の仕様において border属性は非推奨属性のため、CSSborderプロパティで代替することが推奨されています。

イメージとテキストの位置関係の指定

img要素の align属性は画像の横にテキストを回り込ませる場合の配置を指定したり、画像のあとに配置するテキストの垂直(上下)方向の揃え方を指定することができます。

<img src="画像ファイルのURI" align="left">

画像とその後に続くテキストの揃え方を指定する align属性の値には次の5つのキーワードがあります。キーワードは半角アルファベットの大文字・小文字が区別されません。

left
画像は左に配置、その右にテキスト(複数行)が回り込む
right
画像は右に配置、その左にテキスト(複数行)が回り込む
top
画像の上辺に合わせてテキスト(1行)を上揃えに表示
middle
画像の垂直方向の長さの中央にテキスト(1行)を表示
bottom
画像の下辺に合わせてテキスト(1行)を下揃えに表示

なお、left, rightの値を指定して、テキストが回り込んだ場合に br要素に clear属性(例:<br clear="all">)を指定することで途中で回り込みを解除することができます。

なお、align属性は非推奨属性のため、CSSfloatプロパティで左右の配置とその後に続くテキスト(複数行)の揃え方を、vertical-alignプロパティでテキスト(1行)との垂直方向の並びをそれぞれ代替することが推奨されています。また、回り込んだテキストを途中で解除したい場合の br要素のclear属性についても非推奨属性のため、画像の後に続く要素に clearプロパティを指定するか、回り込みが指定されている要素の親要素にclearfixを用いるようにしましょう。

イメージ周辺の余白指定

<img src="画像ファイルのURI" vspace="25" hspace="25">

img要素の vspace属性は画像の上下の余白、hspace属性は画像の左右の余白を指定します。値はいずれも整数(ピクセル数で解釈)を指定します。特に指定がない場合は画像とテキストの間に余白はほとんど設けられません。余白を設けることで画像を他の部分よりも明確にする効果があります。vspace属性, hspace属性は非推奨属性のため、CSS の marginプロパティで代替指定することが推奨されています。

イメージ横のテキストの回り込みを解除

<img src="画像ファイルのURI" align="right">
イメージの後に続くテキストに回り込む指定がされている場合に
<br clear="all">
を指定することで回り込みを途中で解除することができます。

先にも一度紹介しましたが、強制的に改行を定義するインライン要素であるbr要素に clear属性を加えることによって画像の横に回り込むテキストを解除することができます。解除された以降の文章は、画像の直下に表示されるようになります。img要素に対して align属性(値:"left"、または "right")を指定した場合にあわせて使います。clear属性の値には次の4つのキーワードがあります。

none
回り込みの解除なしで通常に改行
left
align="left" の回り込みを解除し、次の行は画像の最下端の直下にくる
right
align="right" の回り込みを解除し、次の行は画像の最下端の直下にくる
all
左右いずれの回り込みも解除し、次の行は画像の最下端の直下にくる

なお、clear属性は非推奨属性のため回り込みの解除には画像の後に続く要素に clearプロパティを指定するか、回り込みが指定されている要素の親要素にclearfixを用いるようにしましょう。

登場要素の紹介

音声・動画データを埋め込む

<embed src="音声・動画データのURI">
<noembed>Macromedia Flash Player が必要です。</noembed>

embed要素は音声や動画データを文書内に埋め込みます。UA にプラグイン(追加機能を提供するプログラムのこと)を追加することで、埋め込まれたデータを表示することができます。Netscape Navigator 2.0(Netscape の前身)の時に独自に採用された機能ですが、Netscape Navigator 2.0 のリリース後すぐに Internet Explorer 3.0 でも採用され、現在では主要ブラウザをはじめとした多くの UA が embed要素に対応しています。よく用いられるデータには、Flash(拡張子:".swf"), MIDI(拡張子:".mid"), Quick Time(拡張子:".mov"), Shockwave(拡張子:".wav"), AVIムービー(拡張子:".avi"), MPEG(拡張子:".mpg")等があり、これらのデータを再生するためのプラグインはすべて無料で提供されており、簡単に入手できることから embed要素はよく利用されています。

src属性は表示させるプラグインデータを指定する属性で、値にはデータの所在を URI で指定します。たとえば、"sample.swf" という FLASHファイルの場合、これをページの埋め込みたい部分に "<embed src="sample.swf">" と記述します。なお、embed要素は内容をもたない空要素なので終了タグはありません。

また、embed要素に対応していない環境や必要なプラグインのダウンロード先へのリンクなどを明記しておくのに、音声・動画データのもつ情報の代替内容として noembed要素を合わせて指定することもできます。noembed要素も、Netscape Navigator 2.0 の時に採用された独自機能ですが主要視覚ブラウザはすべて対応しています。ただし、W3C の策定した仕様では、embed要素の代わりに、HTML3.2 の規格から正式に仕様に取り入れられている object要素を使用することが推奨されています。 しかし、object要素はUA側のサポートが不完全なため、embed要素と組み合わせた状態で使うのが現実的です。

embed要素には、ムービーデータの表示サイズ、並び位置、自動再生の有無の指定など様々なオプションが用意されています。

音声・動画データの表示サイズを指定

<embed src="音声・動画データのURI" width="300" height="250">

width属性, height属性の値はいずれも整数(ピクセル数で解釈)を指定します。img要素に対する width属性, height属性の役割と同じで表示サイズを指定しておくことで、UAがデータを読み込み終わるまでにその部分のスペースを空けて、ページの全体像を先に表示させることができます。

データの並びを指定

<embed src="音声・動画データのURI" align="right">

align属性は埋め込んだプラグインデータと、その後に続くテキストの揃え方を指定します。値には次の5つのキーワードがあります。

left
データは左に配置、その右にテキスト(複数行)が回り込む
right
データは右に配置、その左にテキスト(複数行)が回り込む
top
データの上辺に合わせてテキスト(1行)を上揃えに表示
middle
データの垂直方向の長さの中央にテキスト(1行)を表示
bottom
データの下辺に合わせてテキスト(1行)を下揃えに表示

なお、CSSfloatプロパティで左右の配置とその後に続くテキスト(複数行)の揃え方を、vertical-alignプロパティでテキスト(1行)との垂直方向の並びをそれぞれ代替することができます。また、回り込んだテキストを途中で解除したい場合の br要素のclear属性についても非推奨属性のため、音声や動画データの後に続く要素に clearプロパティを指定するか、回り込みが指定されている要素の親要素にclearfixを用いるようにしましょう。

音声・動画の自動再生、繰り返し設定

<embed src="音声・動画データのURI" autostart="false" loop="true">

autostart属性はプラグインデータの自動再生の有無を指定します。値には次の2つのキーワードがあります。

true
ページ読み込み後、自動的に再生する
false
ユーザの操作で再生する

loop属性はプラグインデータの繰り返し再生を指定します。値には、整数で再生回数を指定する場合と、次の2つのキーワードがあります。

true
無限に繰り返し再生する
false
1回だけ再生する

データの種類によっては作成時に自動再生、 繰り返し再生について指定できるものがあります。その場合は、あらかじめ設定されていたものが優先されます。loop属性の指定がない場合、初期値は "false" のため1回だけ再生します。

音声・動画データを隠す

<embed src="音声・動画データのURI" hidden="true">

hidden属性はプラグインデータの表示・非表示を指定します。値には次の2つのキーワードがあります。

true
プラグインデータを隠す
false
プラグインデータを表示する

hidden属性はプラグインデータを自動再生にした場合に、プラグインデータを視覚的にわからないように仕込むことを目的としています。しかし、ユーザの操作を待たずに、勝手にデータを再生することはおすすめできません。

関連

効果音(バックグラウンドミュージック)の設定

<bgcound src="サウンドファイルのURI"
balance="0" volume="-1000" loop="infinite">

bgsound要素はBGM(背景音楽)を設定し、ページが読み込まれると、指定されたサウンドファイルを再生します。Internet Explorer 2.0 の時に独自に採用された機能で、対応しているのはInternet Explorerのみです。

src属性は再生するサウンドファイルの所在を URI で指定します。指定できるサウンドファイルのデータ形式には、AIFF, AU, MIDI, WAVE などがあります。その他のオプションには以下のようなものがあります。

  • balance属性はステレオ再生する場合の左右の音量バランスを指定します。値は、"-10000" から "10000" までの整数で指定します。"-10000" で左側のみ、"10000" で右側からのみステレオが再生されることになります。
  • volume属性は音量を設定する属性で、値は "-10000" から "0" の整数で指定します。"-10000" で最小、"0" で最大音量になります。
  • loop属性は、再生回数を指定する属性で、値には整数で回数を指定するか、"infinite" のキーワードで無限に繰り返すかの指定をおこないます。

bgsound要素はブラウザの独自機能のため W3C の策定した仕様では、bgsound要素の代わりに、HTML3.2 の規格から正式に仕様に取り入れられている object要素を使用することが推奨されています。

関連

オブジェクト(イメージ・ムービー等)を配置する

<object data="オブジェクトのURI" type="オブジェクトのMIME"
align="left" width="150" height="100" vspace="5" hspace="5">
object要素非対応環境のための代替内容</object>

object要素は、イメージ(image)、サウンド(sound)、ムービー(movie)といったオブジェクト全般を配置する要素で、これまでに紹介してきた img要素, embed要素, bgsound要素などHTML文書内に埋め込むオブジェクトに関する機能を包括する要素です。開始タグの "<object>" と終了タグの "</object>" の間には、何らかのトラブルでオブジェクトが表示できない場合や音声出力・点字出力などの非視覚環境、UA がそのオブジェクトの再生に対応していない、あるいは表示しない設定にしている環境において、そのオブジェクトの表現する情報の代替となる内容を指定します。

現状では object要素に対する UA のサポートが不完全なため、embed要素などと組み合わせた状態で使用されています。HTML4.01においてはembed要素は公認されていない機能ですが、HTML4.01の後継規格であるHTML5では、embed要素は非推奨属性ではなく仕様として公認されているため、今後廃止になることもなければ、UAのサポートがなくなることもありません。このようにembed要素に関しては例外となりますが、本来は、これから登場するかもしれない未来の環境でも利用できるウェブページ作りを目的とするのであれば、今後の対応がどのようになるかわからない非推奨要素や非推奨属性、さらにはブラウザの独自機能を使うことはおすすめできることではないということを理解しておいてください。

object要素のdata属性は配置(実行)するオブジェクトファイルの所在を URI で指定します。type属性はdata属性で指定されたオブジェクトの MIMEを指定します。これはオブジェクトの MIMEを UA がサポートしていない場合に、指定されたオブジェクトを実行する前に事前にデータをロードすることのないように UA に働きかけます。width属性, height属性はオブジェクトの横幅と高さを指定します。vspace属性, hspace属性はオブジェクトと周りの内容との間に余白(マージン)を設けます。vspace属性が左右, hspace属性が上下の余白を指定します。なお、vspace属性, hspace属性は非推奨属性のため、CSS の marginプロパティで指定することが推奨されています。

その他にもobject要素には次のような属性があり、オブジェクトに関する詳細な設定が可能です。詳しい解説は object要素(HTML辞典)を参照してください。

archive
オブジェクトに関連づけられているアーカイブの URI を示します。 アーカイブとは、複数の オブジェクトのファイルを 1つにまとめた圧縮ファイル(書庫ファイル)のことです。 このアーカイブを事前に読み込んでおくことで、プログラムの起動時間を短縮させ、オブジェクトの動作効率の向上につながります。 複数指定する場合は、半角スペースで区切って指定します。
border
オブジェクトの周りに境界線を表示させます(border属性は非推奨属性のため、CSS の borderプロパティで代替することが推奨されています)。
classid
Javaアプレットの classファイル(.class)を classid="java:xxx.class" の形式で指定したり、ActiveX コントロール(Windows版Internet Explorer のプラグイン)のクラスID(識別番号)を classid="clsid:クラスID" の形式で指定します。data属性と併用・代用が可能です。
codebase
archive属性, classid属性, data属性で指定された相対URI の基準となる URI を指定します。codebase属性の指定がない場合は、object要素が含まれるウェブページの URI が基準URI となります。
codetype
classid属性で指定されたオブジェクトの MIMEを指定します。指定されたオブジェクトを実行する前に事前に、その UA で実行可能かどうかの判断をつけるように UA に働きかけます。
declare
オブジェクトを宣言するだけで、プログラムは実行前の待機状態になります。 つまり、ページを読み込んだときに自動的にオブジェクトを実行しなくなります。 そして、declare属性と id属性を組み合わせることで、ユーザの操作によってオブジェクトを実行する仕組みを作ることができます(現状では declare属性に対応している UA はありません)。
name
object要素がフォームのコントロール部品である場合に、連携させるために名前を指定します(現状では name属性に対応している UA はありません)。
standby
オブジェクトのプログラムをダウンロードしている待ち時間に表示するメッセージを指定します(現状では standby属性に対応している UA はありません)。
usemap
イメージマップとの関連づけをおこなう際に指定します。値にはハッシュ(#)を前置し「usemap="#イメージマップ名"」という形で map要素の name属性や id属性の値に指定されているイメージマップ名を指定します。

なお、よく利用するデータの MIMEには次のようなものがあります。

application/x-shockwave-flash
Flash Shockwaveファイル
Flash Videoファイル
image/gif
GIF画像ファイル
image/jpeg
JPEG画像ファイル
image/png
PNG画像ファイル
audio/midi
MIDIサウンドファイル
video/mpeg
MPEG映像ファイル
video/x-msvideo
Microsoft AVIファイル
application/java
JAVAアプレットファイル
登場要素の詳解
Updated / Published