8. 画像

Next:9. 表 Up:HTML文書作成マニュアル Ver 5.11 Previous:7. 色指定

8. 画像

HTMLにおけるリンク(6参照)は、画像を含めファイルでありさえすればどのようなものでもかまわないため、.xbm gif.jpg.xpm、.tiff、.mpgといった各種拡張子を持つ画像ファイルを扱うことができます。

実際にファイルをどう表現するかは、ブラウザによりけりです。

リンクではなく、ページ内に挿入(インラインイメージ)したいときには、GIF(.gif拡張子)やJPEG(.jpg拡張子)の2つのフォーマットの画像ファイルに絞られるでしょう。

ブラウザによってはTIFF(.tiff拡張子)やPNG(.png拡張子)のフォーマットのファイルもインラインイメージで表現することができます。

画像ファイルに使われるフォーマットについて簡単に説明しておきましょう。

GIFとJPEG以外はブラウザにプラグインソフトウェアを追加しない限り、インラインイメージで表現することはできないでしょう。

BMP

Windowsのビットマップファイルフォーマットで、最大24ビット(1600万色)の色表現が可能です。

内部はRIFFというタグ構造フォーマットになっており、いくつか異なった形態のバージョンが存在します。

CGM

画像をベクトルで記述したフォーマットです。

製図データなどのような拡大しても汚くならないようにしたい画像に使います。

EPS

Adobe社のPostScriptフォーマットの簡約バージョンフォーマットです。

ほかのドキュメントに挿入する画像として使いますが、TEX やページメーカーなどの特殊な環境が必要となるでしょう。

GIF

米CompuServeが開発したフォーマットで、256色までの色表現が可能です。

圧縮をサポートしており、単色で塗りつぶしたようなべたっとした絵に向いています。

GIF87aと呼ばれる標準のフォーマットのほか、1つの色を透明にする透明化GIFや複数のGIFファイルを1つにまとめてパラパラ漫画のように実行するアニメーションGIF、粗い画像から徐々に鮮明な画像を表示するインターレースGIFといった拡張のGIF89フォーマットもあります。

現在のところ、Webでは一般的な画像フォーマットですが、GIFのアルゴリズムは特許になっており、GIFの作成ツールを作る際にはUnisys社に届けて場合によってはライセンス料を支払う必要があります。

最近、UNISYSはこの方針をさらに押し進め、GIFファイルを使っているWebサイトに対して課金しようとしています。

このため、GIFフォーマットは使わないほうがよいでしょう。

JPEG

JPEG (Joint Photographic Experts Group)が開発したフォーマットで、24ビットの色表現が可能です。

強力な圧縮能力を持っています。

写真などの多くの色を使った画像に向いています。

粗い画像から徐々に鮮明な画像を表示するプログレッシブJPEGフォーマットもあります。

MPEG

MPEG (Mortion Picture Experts Group)が開発した動画フォーマットで、24ビットで動画像を圧縮します。

PCD

カメラのフィルムからポジを作りCDに焼きつけたPhoto CDの画像のファイルフォーマットです。

PICT

Macintoshの画像フォーマットです。

PNG

GIFの代替として開発されたポータブル画像フォーマットです。

GIFの使用が危険を招くことになったことを受け、今後の標準フォーマットになるでしょう。

PSD

Adobe社のPhotoShopの画像フォーマットです。

TIFF

最大24ビットの色表現が可能です。

内部はタグ構造フォーマットになっており、さまざまなバージョンが存在します。

このため、TIFFをサポートしていることをうたっている画像ソフトウェアで読めないこともあります。

XBM

UNIXのX Window Systemのビットマップファイルフォーマットで、白(0)と黒(1)の2色で表現します。

圧縮は行わず、ファイルはテキストファイルになっています。

XPM

UNIXのX Window Systemのカラービットマップファイルフォーマットで、256色まで表現します。

圧縮は行わず、ファイルはテキストファイルになっています。

ページ中に画像をインラインイメージとして挿入するには、imgタグを使います。

img [Strict] [Transitional]

<imgattributes...>は、srcアトリビュートで指定した画像ファイルをインラインイメージとして表示します。

EMPTYタグです。

attributesは次のようなものが使えます。

<img>タグとは、ドキュメントの中に画像を挿入するときに使われるタグです。

この<img>タグにはさまざまな属性がありますが、特に注意したいのがalt属性です。

alt属性の値に記述された内容は、画像にマウスポインタをロールオーバーするとポップアップ表示され、また、画像を表示しないブラウザ等でも代替テキストとして表示されるようになります。

SEO対策やユーザビリティーの観点からもalt属性には適切な内容を必ず記述したほうが良いでしょう。

また、size属性は必須ではありませんが、サイズを指定したほうが表示速度が速くなるため、できるだけ指定したほうが得策です。

align: [Transitional][省略可]align="Justificaion"は、画像とテキスト文字の位置関係を変更します。
Justificationに入れる指定値として次のようなものがあります。

<img align = "***">とは、<img>タグにalign属性を指定したもので、画像やそのまわりのテキストの配置を定義するものです。

値に"right"や"left"を指定した場合には、画像がページの右もしくは左に配置され、続くテキストは画像に回りこみ、複数行で表示されるようになります。

テキストの回りこみを解除する場合には、<br clear="***">を記述します。

また、値に"top"、"middle"、"bottom"を指定した場合には、画像に対するテキストの垂直方向の位置が指定され、それぞれ、上部、中央、下部に配置されます。

この場合の画像の隣のテキストは一行で表示されます。

absbottom:画像の最下段はベースラインに合わされます。
absmiddle:画像の中央はベースラインに合わされます。
baseline:画像の最下段はベースラインに合わされます。
bottom:画像の最下段とテキストの最下段を合わせます(デフォルト)。
left:画像を左寄せにし、その後に続くテキストは、ブラウザ画面の右端になると折り返されます。
折り返しのキャンセルにはbrタグ(4.5 参照)を使います。
middle:画像の中央とテキストの最下段を合わせます。
top:画像の最上段とテキストの最上段を合わせます。
right: 画像を右寄せにし、その後に続くテキストは、画像の近くになると折り返されます。
折り返しのキャンセルにはbrタグ(4.5 参照)を使います。

alt

[Strict] [Transitional][必須]alt="text"は、Lynxのようなテキスト端末ブラウザでページを表示したときに画像の代わりとしてtextに指定した文字を表示します。

ltextに何も指定しなければそこには何も表示されません。

このアトリビュートを省略した場合、その部分は[IMAGE]のように表示されます。

<img alt = "***">とは、<img>タグにalt属性を指定したもので、画像の代わりに表示されるテキストを定義します。

画像ファイルの読み込みに失敗した場合や、ユーザーが画像を表示しない設定にしている場合などに、代替テキストが表示されます。

また、障害をもつユーザーにとってもドキュメントの内容を理解する上で重要な手がかりとなるため、必ずalt属性を指定するように心がけたほうが良いでしょう。

border

[Transitional][省略可]border="number"は、画像の周りに枠を付けます。

numberで指定したピクセル分の幅の枠が付きます。

numberの値を0にすると、枠はなくなります。

これを利用し、画像からのリンク(8 参照)のときに画像の周りに表示される枠を消すことができます。

<img border = "***">とは、<img>タグにborder属性を指定したもので、画像のまわりの枠線を設定する場合に用いられます。

値には枠線の太さをピクセルで指定し、"0"に指定した場合は枠線は表示されません。

また、このborder属性の使用は推奨されておらず、今後はスタイルシートを利用した方が良いでしょう。

class

[Strict] [Transitional][省略可]class="cdata"は、このタグへセットする情報をクラスの形で指定します。

詳細は5 を参照してください。

dir

詳細は4.3 を参照してください。

dynsrc

[省略可]dynsrc="URI"は、画像の代わりに動画を張りつけます。

フォーマットとして、AVIファイルかVRMLファイルを使うことができ、～の部分にファイル名を指定します。

Internet Explorerのみ表現可能です。

このアトリビュートをサポートしていないブラウザの場合、srcアトリビュートの画像が代わりに張りつけられます。

このアトリビュートを使用した場合、次のアトリビュートも同時に指定できます。

controls

[省略可]controlsをタグにつけると、制御ボックスバーが画像の下に表示されます。

loop

[省略可]loop="number"は、繰り返しの回数を指定します。

無限ループにする場合は、infiniteを値にします。

loopdelay

[省略可]loopdelay="number"繰り返し再生のインターバルの時間をミリ秒で指定します。

start

[省略可]start="type"は、再生開始の方法を指定します。

値には次のようなものを取ります。

fileopen:ファイル読み込み後、すぐ再生します。
mouseover:マウスカーソルが画像の上に置かれたら再生します。

height

[Strict] [Transitional][省略可]height="number"は、画像の縦幅を指定します。

画像は自動的にこの幅に拡大あるいは縮小されます。

単位は、数値だけの場合はピクセル、数値に%を付けるとブラウザ画面の高さに対する比率になります。

<img height = "***">とは、<img>タグにheight属性を指定したもので、画像の高さを設定するものです。

この属性を記述しない場合、画像は本来のサイズで表示されますが、ドキュメントのレイアウトの読み込み時に、より早く画像の表示スペースを確保するためにも指定しておいたほうが良いでしょう。

また、実際の画像サイズと異なる値を指定し、画像のサイズを変更することも可能ですが、見栄えや効率を考えると、あらかじめ画像ファイルにてサイズ変更をしておくほうが好ましいでしょう。

hspace

[Transitional][省略可]hspace="number"は、画像の左右に空ける空白を指定します。

単位は、数値だけの場合はピクセル、数値に%を付けるとブラウザ画面の幅に対する比率になります。

<img hspace = "***">とは、<img>タグにhspace属性を指定したもので、画像ファイルの左右に余白を設けるために使われます。

値はピクセルで指定します。

画像ファイルの上下に余白を設定する場合にはvspace属性を使います。

id

[Strict] [Transitional][省略可]id="name"は、このタグに固有のIDを振ります。

ismap

[Strict] [Transitional][省略可]ismapは、クリッカブルマップ(8 参照)であることを指定します。

<img ismap = "ismap">とは、<img>タグにismap属性を指定したもので、<a>タグのハイパーリンク内で使用され、サーバーサイドイメージマップを利用する場合に用いられます。

この機能は対象画像をクリックした時に画像左上隅からの相対x座標とy座標をサーバーに送信し、その座標に基づいてサーバーのプログラムが処理内容を決定する仕組みになっています。

lang

詳細は4.3 を参照してください。

longdesc

[Strict] [Transitional][省略可]longdesc="URI"は、画像の説明を示したURIを指定します。

lowsrc

[省略可]lowsrc="URI"は、二段階の画像表示を行わせることができます。

このアトリビュートで画像ファイル名を指定すると、最初にここで指定した画像ファイル(たいていは小さな大きさのもの)を読んで表示し、続いてsrc="URI"で指定された画像ファイルを読んで表示します。

Netscape Navigator/Communicatorのみ表現可能です。

以下の詳細は99

onclick

ondblclick

onkeydown

onkeypress

onkeyup

onmousedown

onmousemove

onmouseout

onmouseover

onmouseup

src

[Strict] [Transitional][必須]src="URI"は、画像ファイルのURIを指定します。

<img src = "***">とは、<img>タグにsrc属性を指定したもので、ブラウザに画像を表示させるためには必須の属性です。

値には画像ファイルの絶対URLもしくは相対URLを記述します。

style

詳細は5 を参照してください。

title

[Strict] [Transitional][省略可]title="titlename"は補助用タイトルを指定します。

usemap

[Strict] [Transitional][省略可]usemap="URI"は、指定したマップデータURIを元にクリッカブルマップ(8 参照)を表示します。

<img usemap = "#***">とは、<img>タグにusemap属性を指定したもので、クライアントサイドイメージマップを利用する場合に使用されます。

この機能により一つの画像に複数のリンクを作成することが可能となります。

値には半角英数字で任意のマップ名を記述します。

クライアントサイドイメージマップの処理はブラウザで行われるため、サーバーサイドイメージマップと異なり、CGIは必要ありません。

具体的な処理内容は<map>タグ、<ａｒｅａ>タグにより定義します。

vspace

[Transitional][省略可]vspace="number"は、画像の上下に空ける空白を指定します。

単位は、数値だけの場合はピクセル、数値に%を付けるとブラウザ画面の高さに対する比率になります。

<img vspace = "***">とは、<img>タグにvspace属性を指定したもので、画像ファイルの上下に余白を設けるために使われます。

値はピクセルで指定します。

画像ファイルの左右に余白を設定する場合にはhspace属性を使います。

width

[Strict] [Transitional][省略可]width="number"は、画像の横幅を指定します。

画像は自動的にこの幅に拡大あるいは縮小されます。

単位は、数値だけの場合はピクセル、数値に%を付けるとブラウザ画面の幅に対する比率になります。

<img width = "***">とは、<img>タグにwidth属性を指定したもので、画像の幅を設定するためのものです。

alignアトリビュートの例を次に示します。

align="absbottom"
align="absmiddle"
BOTTOM align="bottom"
MIDDLE align="middle"
TOP align="top"
align="baseline"
LEFT align="left" 折り返しのようすを見てください。

abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ
RIGHT align="right" 折り返しのようすを見てください。

abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ

インラインイメージをマウスでクリックすることでリンクを実行したいときは、<a href="..."><img src="...">～</a>のようにaタグ環境内でimgタグを使用するだけで可能です。

画像ファイルを参照できないときには、クエスチョンマークや破れたアイコンなどが代わりに表示されます。

ブラウザの背景色が灰色の場合、画像ファイルの背景色が白だと画像が浮いてしまいます。

GIFフォーマットの場合、ファイル中の特定の1色を透明にする透明化GIFを使うことができます。

UNIXの場合、giftransやImageMagickといったツールを使って透明化GIFを作成することができます。

どのようなツールが入っているかは、あなたの使用しているUNIXの管理者に問い合わせてください。

giftrans

giftrans -tcolor nameまたは#color codeinput.gif > output.gifの書式で、 input.gifの名前のGIFフォーマットファイルをoutput.gifの名前で、color codeで示された色の部分の色を透明にして保存します。

色の指定については、7 を参照してください。

ImageMagick

ImageMagickは単体のツールではなく、複数のツールの集合体です。

画像の変換にはconvertというツールを使います。

convert -transparentcolor nameまたは#color codeinputfile output.gifの書式で、inputfileはGIFフォーマットでなくてもかまいません。

Windowsの場合は、PhotoShopやPaintShopなどのツールで透明化GIFを作成することができます。

画像の特定の場所をマウスでクリックするとそれに応じたリンク先へ飛ぶクリッカブルマップについては目にしている方も多いでしょう。

クリッカブルマップには、Webサーバー側に設定ファイルを持つサーバーサイドクリッカブルマップと、HTMLファイル内に設定を持つクライアントサイドクリッカブルマップの2種類があります。

前者は古くからある方式で、古いブラウザでも動作し、HTMLファイルを見てもどこにクリックポイントがあるかわからないようにできるというメリットがあります。

しかし、サーバー側に設定がいろいろ必要となるため、ほとんどのプロバイダでは使うことができないでしょう。

後者はHTMLファイルに書くだけでよいため、サーバー側になんの設定も必要ありません。

現在クリッカブルマップといえばこちらのタイプになるでしょう。

HTMLファイルのソースを表示するとクリックポイントの場所やリンク先URIなどが全部わかってしまうので、これは少々デメリットかもしれません。

サーバーサイドクリッカブルマップを作りたいときには、UNIXの場合、mapeditというプログラムを使うのがよいでしょう。

手順は次のようになります。

作りたいマップ用の画像をGIFフォーマットのファイルとして用意します。
mapeditを実行します。
Fileメニューをクリックし、Open/Create Mapまでドラッグします。
サーバーに合わせてNCSAかCERNかを選びます。
WebサーバーにApacheを使っている場合には、NCSAに合わせます。

Open MapをStyle: NCSAかStyle: CERNに変更します。
Map Filename、Gif Filenameにそれぞれ記入します。
OKをクリックします。
画像が読み込まれます。
ここで、次のようなメニューを使ってクリックポイントを作ります。

Poly

多角形に切り出します。
左クリックを押すごとに点が定義され、中ボタンで決定します。

決定後、そこをクリックしたときに呼び出されるリンク先を指定します。

Rect、Circleも同じです。

Rect

長方形に切り出します。
左クリックで始点、中クリックで終点。

Circle

円で切り出します。
左クリックで中心、中クリックで半径決定。

Delete

間違えた領域を消去します。

Test

クリックすると設定されたURI名を表示します。
FileメニューからEdit Default URLを選び、必ず記入します。
FileメニューからSave Mapを選択し、保存します。
FileメニューからQuitを選択し、終了します。
保存したマップファイルを、Webサーバーで設定されているマップファイルを保管するディレクトリにコピーします。
HTMLファイルの中で、<a href="マップファイル名"><img src="画像ファイル名" ISMAP></a>のように記述して、画像とマップの設定を行います。
それぞれに対応したリンク先を用意します。

クライアントサイドクリッカブルマップは、マップ設定をHTMLファイル内で記述し、この設定を画像タグimgの中で参照します。

マップ設定環境を宣言するには、mapタグを使います。

map [Strict] [Transitional]

<mapattributes...>～</map>の書式で、～の中にマップ設定を記述します。

nameアトリビュートにマップのID名を入れます。

クリッカブルに設定された画像タグはこのIDを探してクリッカブルマップの設定とします。

実際の設定はareaタグを使用します。

attributesには次のようなものが入ります。

以下の詳細は99
class
dir
id
lang
name
onclick
ondblclick
onkeydown
onkeypress
onkeyup
onmousedown
onmousemove
onmouseout
onmouseover
onmouseup
style
title

mapタグ環境の中で、次のareaタグを使って設定を行っていきます。

area [Strict] [Transitional]

<areaattributes...>の書式で、map環境の中での設定を行います。

EMPTYタグです。

attributesには次のようなものが入ります。

accesskey

[Strict] [Transitional][省略可]accesskey="Key"は、このリンクへのアクセッサキーを指定します。

指定できるのは1文字です。

alt

[Strict] [Transitional][必須]alt="text"は、テキストのみしか表示できないブラウザのときにtextで指定したテキストを表示します。

class

詳細は5 を参照してください。

coords

[Strict] [Transitional][省略可]coords="x1,y1,[...]"は、指定されたshapeがどの座標に相当するかを指定します。

座標は左上が原点(0,0)に当たります。

rectの場合、左上の位置x1,y1と右下の位置x2,y2を指定するので、coords="x1,y1,x2,y2"(それぞれの変数に数値を入れます)の形式になります。

circleの場合、中心点x,yと半径rが必要なので、coords="x, y, r"の形式になります。

polygonの場合、1点目x1,y1、2点目x2,y2、3点目x3,y3、…と指定していきます。

最後の点と1点目の間は自動でつながるので同じ値にする必要はありません。

形式はcoords="x1,y1,x2,y2,x3,y3,[x4,y4,...]"になります。

dir

詳細は4.3 を参照してください。

href

[Strict] [Transitional][省略可]href="URI"は、指定された範囲がクリックされたときにジャンプするリンク先URI(6.2 参照)を指定します。

hrefかnohrefのどちらかを必ず指定する必要があります。

id

[Strict] [Transitional][省略可]id="name"は、このタグに固有のIDを振ります。

lang

詳細は4.3 を参照してください。

nohref

[Strict] [Transitional][省略可]nohrefは、指定された範囲がクリックされても無視することを意味します。

hrefかnohrefのどちらかを必ず指定する必要があります。

onblur

[Strict] [Transitional][省略可]onblur="script"はキーボードフォーカスが外れたときに実行するスクリプトを指定します。

以下の詳細は99

onclick

ondblclick

onfocus

onkeydown

onkeypress

onkeyup

onmousedown

onmousemove

onmouseout

onmouseover

onmouseup

shape

[Strict] [Transitional][省略可]shape="type"の値には、circle(円)、default(スタイルシートで指定したもの)、polygon(多角形)、rect(四角形)のいずれかを取ります。

shapeアトリビュートを付けない場合、rectがデフォルトとなります。

style

詳細は5 を参照してください。

tabindex

[Strict] [Transitional][省略可]tabindex="number"は、タブキーを押したときにフォーカスがあたる順番を指定します。

target

[Transitional][省略可]target="name"は、hrefで指定したときのリンク先ターゲットを示します。

詳細については6.2 を参照してください。

title

[Strict] [Transitional][省略可]title="titlename"は補助用タイトルを指定します。

こうして作成されたmapタグ環境を参照するには、imgタグにusemapアトリビュートを付けます。

のような書式で、usemapにはmapタグで指定したnameアトリビュートの値を指定します。

同じHTMLファイルの中にあるtestmapというマップ設定を参照するのであれば、#testmap、別ファイルmaps.htmlにある設定を参照するのであれば、maps.html#testmapのように指定します。

別ファイルにしても直接そのファイルを開くことはできてしまうので、完全にクリックポイントを隠すことはクライアントサイドクリッカブルマップを使う限り不可能です。

Netscape Navigator/CommunicatorやInternet Explorerなどの先進的なブラウザでは、粗い(あるいはぼやけた)画像から徐々にオリジナルのきれいな画像に変化するインターレースGIFを表現できます。

UNIXの場合、pbmplusというツールキットやImageMagickを使ってインターレースGIFを作成することができます。

pbmplus

pbmplusは画像関係のツール集です。

あるGIFファイルをインターレース化するには次のように行います。

catinfile.gif | giftoppm | ppmtogif -interlace >outfile.gif
透明化GIFにこの処理を行うと、透明化の設定が消えてしまいます。

最初にインターレース化した後、透明化を行う必要があります。

ImageMagick

前述の透明化GIFのところでも説明しましたが、convertコマンドを使ってインターレースGIFを作成することが可能です。

convert -interlacetypeinputfile output.gifの書式で、typeには、None(インターレースしない)、Line、Plane、Partitionのいずれかが入ります。

Noneを除いて、順に粗いときの粒子の大きさが大きくなります。

インターレースGIFを作る際には、LineまたはPlaneを使います。

透明化GIFにこの処理を行うと、透明化の設定が消えてしまいますが、convertの-transparentオプションも同時に指定することで一度に透明化とインターレース指定を行うことができます。

Windowsの場合は、PaintShopなどのツールでインターレースGIFを作成することができます。

同様の効果を持つものにプログレッシブJPEGがあります。

UNIXの場合、ImageMagickのconvertコマンドでインターレースGIFを作るのと同じやり方で出力ファイル名の拡張子を.jpgにするだけでプログレッシブJPEGを作成することができます。

また、GIFのもう1つの拡張機能としてアニメーションGIFがあります。

これは、複数のGIFファイルを1つにまとめて順に表示することで簡単なアニメーションを行います。

UNIXであればwhirlgifやImageMagickを使って作成することができます。

最初に同一の縦横幅のアニメーションに使う画像ファイル(GIFフォーマットがよいでしょう)を用意しておきます。

扱いやすいようにa001.gif、a002.gif、a003.gifと再生する順番で連番を振ったファイル名にしておきます。

whirlgif

whirlgif [-o出力ファイル名] [-loop ループ回数] [-time間隔] file1 [ -time間隔]] [ -trans "#rrggbb"] [file2 ...]が書式です。

たとえばa[0-9]+.gifファイルからanimation.gifというアニメーションGIFを作成(ループ回数は無限、表示の間隔は100ns)するのであれば、whirlgif -o animation.gif -loop 0 -time 1 a[0-9]+.gifとなります。

loopが0の場合、無限ループを意味します。

もし、loopを指定しないと、1回限りのアニメーションになります。

timeは、1/100秒単位で指定します。

transには透明色にしたい色を指定します(7 参照)。

ImageMagick

convertコマンドでアニメーションGIFを作ることができます。

convert [-delay間隔]file 1[file2 ...]出力ファイル名で作成することができます。

-delayの単位は1/100秒です。

ドキュメント内では普通にimgタグでアニメーションGIFのファイルを指定するだけです。

アニメーションGIFの中の画像ファイルには透明化されたものも使えますが、透明化をほどこしている部分には再描画が行われないので注意してください。

Summary:IMG 画像

Next:9. 表 Up:HTML文書作成マニュアル Ver 5.11 Previous:7. 色指定

Kenshi Muto
平成11年9月19日
Okano Toyomi
2005年08月13日

8. 画像

HTMLマニュアル

広告