画像は文字による説明に加えてユーザーの理解を促すために、または文章で表現するよりも画像で表現した方が分かりやすい情報の場合に使用します。たとえば、グラフや地図など、文章で説明するよりも、その情報を画像として提供した方がわかりやすい性質の場合に適しています。
ただし、画像は文字に比べて情報としての汎用性が大きく劣るため、画像を使用する場合は何らかのトラブルで画像が表示できない場合や音声出力・点字出力などの非視覚環境、画像の表示に対応していない・あるいは表示しない設定にしている環境においても画像の表現する情報を取得できるようにしておく配慮が必要不可欠となります。画像を使用する場合は、(どんな環境からでも情報へアクセスできるように)アクセシビリティを確保する為、代替テキスト(altanative text)を必ず記述することになっています。その際、画像で表現する情報と代替テキストの内容が同等であることが重要です。
画像は文章で表現するよりも画像に置換えて表現した方が適切である場合に使われるべきでものであるため、たとえば、ウェブページの見栄えを整えるためなどの装飾目的に使用することは、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属性は非推奨属性のため、CSS の borderプロパティで代替することが推奨されています。
img要素の align属性は画像の横にテキストを回り込ませる場合の配置を指定したり、画像のあとに配置するテキストの垂直(上下)方向の揃え方を指定することができます。
<img src="画像ファイルのURI" align="left">
回り込みテキストの位置を指定する場合の align属性の値には次の2つのキーワードがあります。
なお、回り込んだテキストは br要素に clear属性を指定することで途中で回り込みを解除することができます(clear属性は非推奨属性のため回り込みの解除には、CSS の clearプロパティをブロック要素に指定して代替することが推奨されています)。
<img src="画像ファイルのURI" align="top">
テキストの垂直(上下)方向の揃え方を指定する場合の align属性の値には次の3つのキーワードがあります。
align属性の指定がない場合、初期値の "bottom" が適用されます。また、"middle" の代わりに、ブラウザの独自機能に "center" のキーワードがあります。"center" の他にもブラウザの独自機能のキーワードには次の4つのキーワードがあります。
ただし、align属性は非推奨属性のため CSS の floatプロパティで左右の配置とその後に続くテキスト(複数行)の揃え方を、vertical-alignプロパティでテキスト(1行)との垂直方向の並びをそれぞれ代替することが推奨されています。
<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つのキーワードがあります。
align="left" の回り込みを解除し、次の行は画像の最下端の直下にくるalign="right" の回り込みを解除し、次の行は画像の最下端の直下にくるなお、clear属性は非推奨属性のため回り込みの解除には、CSS の clearプロパティをブロック要素に指定して代替することが推奨されています。
br要素<embed src="音声・動画データのURI"> <noembed>Macromedia Flash Player が必要です。</noembed>
embed要素は音声や動画データをウェブページ内に埋め込みます。UA にプラグイン(追加機能を提供するプログラムのこと)を追加することで、UA は埋め込まれたデータをウェブページ内に表示します。Netscape Navigator 2.0(Netscape の前身)の時に独自に採用された機能ですが、Netscape Navigator 2.0 のリリース後すぐに Internet Explorer 3.0 でも採用され、現在では Netscape Navigator と Internet Explorer だけでなく、Netscape, Firefox, Opera, Safari など多くの UA が embed要素に対応しています。表示できるデータには、Flash(拡張子:".swf"), MIDI(拡張子:".mid"), Quick Time(拡張子:".mov"), Shockwave(拡張子:".wav"), AVIムービー(拡張子:".avi"), MPEG(拡張子:".mpg")等があり、これらのデータを再生するためのプラグインはすべて無料で提供されており、簡単に入手できることから embed要素はよく利用されています。
src属性は表示させるプラグインデータを指定する属性で、値にはデータの所在を URI で指定します。たとえば、"flash.swf" という FLASHファイルの場合、これをページの埋め込みたい部分に "<embed src="flash.swf">" と記述します。なお、embed要素は内容をもたない空要素なので終了タグはありません。
また、embed要素に対応していない環境や必要なプラグインのダウンロード先へのリンクなどを明記しておくのに、音声・動画データのもつ情報の代替内容として noembed要素を合わせて指定します。noembed要素も、Netscape Navigator 2.0 の時に採用された独自機能ですが主要視覚ブラウザはすべて対応しています。ただし、W3C の策定した仕様では、embed要素の代わりに、HTML3.2 の規格から正式に仕様に取り入れられている object要素を使用することが推奨されています。
embed要素noembed要素object要素embed要素には、ムービーデータの表示サイズ、並び位置、自動再生の有無の指定など様々なオプションが用意されています。
<embed src="音声・動画データのURI" width="300" height="250">
width属性, height属性の値はいずれも整数(ピクセル数で解釈)を指定します。img要素に対する width属性, height属性の役割と同じで表示サイズを指定しておくことで、UA がデータを読み込み終わるまでにその部分のスペースを空けて、ページの全体像を先に表示させることができます。
<embed src="音声・動画データのURI" align="right">
align属性は埋め込んだプラグインデータと、その後に続くテキストの揃え方を指定します。値には次の5つのキーワードがあります。
CSS の floatプロパティで左右の配置とその後に続くテキスト(複数行)の揃え方を、vertical-alignプロパティでテキスト(1行)との垂直方向の並びをそれぞれ代替することも可能です。なお、回り込んだテキストは br要素に clear属性を指定することで途中で回り込みを解除することができます(clear属性は非推奨属性のため回り込みの解除には、CSS の clearプロパティをブロック要素に指定して代替することが推奨されています)。
<embed src="音声・動画データのURI" autostart="false" loop="true">
autostart属性はプラグインデータの自動再生の有無を指定します。値には次の2つのキーワードがあります。
loop属性はプラグインデータの繰り返し再生を指定します。値には、整数で再生回数を指定する場合と、次の2つのキーワードがあります。
データの種類によっては作成時に自動再生、 繰り返し再生について指定できるものがあります。その場合は、あらかじめ設定されていたものが優先されます。loop属性の指定がない場合、初期値は "false" のため1回だけ再生します。
<embed src="音声・動画データのURI" hidden="true">
hidden属性はプラグインデータの表示・非表示を指定します。値には次の2つのキーワードがあります。
hidden属性はプラグインデータを自動再生にした場合に、プラグインデータを視覚的にわからないように仕込むことを目的としています。しかし、ユーザーの操作を待たずに、勝手にデータを再生することはお奨めできません。
<bgcound src="サウンドファイルのURI" balance="0" volume="-1000" loop="infinite">
bgsound要素はBGM(背景音楽)を設定し、ページが読み込まれると、指定されたサウンドファイルを再生します。Internet Explorer 2.0 の時に独自に採用された機能で、Internet Explorer の他に Opera も対応しています。
src属性は再生するサウンドファイルの所在を URI で指定します。指定できるサウンドファイルのデータ形式には、AIFF, AU, MIDI, WAVE などがあります。その他のオプションには以下のようなものがあります。
balance属性はステレオ再生する場合の左右の音量バランスを指定します。値は、"-10000" から "10000" までの整数で指定します。"-10000" で左側のみ、"10000" で右側からのみステレオが再生されることになります。volume属性は音量を設定する属性で、値は "-10000" から "0" の整数で指定します。"-10000" で最小、"0" で最大音量になります。loop属性は、再生回数を指定する属性で、値には整数で回数を指定するか、"infinite" のキーワードで無限に繰り返すかの指定をおこないます。Opera は balance属性, volume属性の指定が無効です。bgsound要素はブラウザの独自機能のため W3C の策定した仕様では、bgsound要素の代わりに、HTML3.2 の規格から正式に仕様に取り入れられている object要素を使用することが推奨されています。
bgsound要素<object data="オブジェクトのURI" type="オブジェクトのMIMEタイプ" align="left" width="150" height="100" vspace="5" hspace="5"> object要素非対応環境のための代替内容</object>
object要素は、イメージ(image)、サウンド(sound)、ムービー(movie)といったオブジェクト全般を配置する要素で img要素, embed要素, bgsound要素などオブジェクトに関する機能を包括する要素です。開始タグの "<object>" と終了タグの "</object>" の間には、何らかのトラブルでオブジェクトが表示できない場合や音声出力・点字出力などの非視覚環境、UA がそのオブジェクトの再生に対応していない、あるいは表示しない設定にしている環境において、そのオブジェクトの表現する情報の代替となる内容を指定します。
なお、現状では object要素に対する UA のサポートが不完全なため、embed要素などと組み合わせた状態で使用されています。しかし、これから登場するかもしれない未来の環境でも利用できるウェブページ作りを目的とするのであれば、今後の対応がどのようになるかわからない非推奨要素や属性、さらにはブラウザの独自機能を使うのではなく、それらに代わって仕様が情報的価値を高められるとして推奨するように、前方互換を見通して object要素を使用すると良いでしょう。
object要素の data属性は配置(実行)するオブジェクトファイルの所在を URI で指定します。type属性はdata属性で指定されたオブジェクトの MIMEタイプを指定します。これはオブジェクトの MIMEタイプを UA がサポートしていない場合に、指定されたオブジェクトを実行する前に事前にデータをロードすることのないように UA に働きかけます。width属性, height属性はオブジェクトの横幅と高さを指定します。vspace属性, hspace属性はオブジェクトと周りの内容との間に余白(マージン)を設けます。vspace属性が左右, hspace属性が上下の余白を指定します。なお、vspace属性, hspace属性は非推奨属性のため、CSS の marginプロパティで指定することが推奨されています。
その他にも object要素には次のような属性があり、オブジェクトに関する詳細な設定が可能です。詳しい解説は object要素(HTML辞典)を参照してください。
border属性は非推奨属性のため、CSS の borderプロパティで代替することが推奨されています)。.class)を classid="java:xxx.class" の形式で指定したり、ActiveX コントロール(Windows版Internet Explorer のプラグイン)のクラスID(識別番号)を classid="clsid:クラスID" の形式で指定します。data属性と併用・代用が可能です。archive属性, classid属性, data属性で指定された相対URI の基準となる URI を指定します。codebase属性の指定がない場合は、object要素が含まれるウェブページの URI が基準URI となります。classid属性で指定されたオブジェクトの MIMEタイプを指定します。指定されたオブジェクトを実行する前に事前に、その UA で実行可能かどうかの判断をつけるように UA に働きかけます。declare属性と id属性を組み合わせることで、ユーザーの操作によってオブジェクトを実行する仕組みを作ることができます(現状では declare属性に対応している UA はありません)。object要素がフォームのコントロール部品である場合に、連携させるために名前を指定します(現状では name属性に対応している UA はありません)。standby属性に対応している UA はありません)。#)を前置し「usemap="#イメージマップ名"」という形で map要素の name属性や id属性の値に指定されているイメージマップ名を指定します。よく利用するデータの MIMEタイプには次のようなものがあります。
これらの MIMEタイプに対する拡張子は、ウェブサーバーの管理者が編集した httpd.conf というファイルによって既定されています。ただし、サーバソフトウェアに Apache を利用しているウェブサーバーでは、.htaccess(ドットエイチティーアクセス)を使うことで、レンタルサーバーの形式でスペースを借りている各ウェブサイトの管理者の方でも、どの拡張子をどの MIMEタイプで提供するかといった動作をディレクトリ単位で設定することができます。詳しい設定方法は、MIMEタイプ・文字コードの設定を参照してください。
applet要素bgsound要素embed要素img要素object要素map要素http://w3g.jp/xhtml/ref/img_object直近の制作実績等:大阪人間科学大学 New! / 大阪薫英女子短期大学 New! / セキスイハイム みんなのお国じまん New!