8. IMG要素

since 21st/Jan./2000 and last modified 23rd/Jan./2000

IMG要素

画像の貼り付け
IMG要素の属性
align属性
浮動化と後続の要素の周り込み
CSSによる要素の不動化と周り込みの解消
画像周りの空白
border属性: 境界線
CSSによる見栄え指定

IMG要素

画像を貼り付けるための要素です。正確には「張付ける」と言うよりも、「ブラウザに指定した位置へ画像を呼び出させる」ための要素です。

<p>
画像の貼り付けの例として、
このhtml文書と同じディレクトリに在る画像ファイル back.jpg をはめ込んでみましょう。この画像
<img src="./back.jpg"
     alt="骸骨"
     width="100" height="172">
は、このhtml文書と同じディレクトリに置いてある back.jpg ファイルです。
</p>

IMG要素は開始タグのみで、終了タグは存在しません。強制改行のBR要素と同じですね。このような要素を空要素と呼びます。

IMG要素はINLINE要素です。

IMG要素に幾つかの属性を指定することで、ブラウザは適切に画像を呼び出します。

src属性が画像ファイルの場所を指定し、
alt属性が画像が表示されない場合の代替テキストです。
height属性とwidth属性は、画像の高さと幅を指定します。

画像の貼り付けの例として、このHTML文書と同じディレクトリに在る画像ファイル back.jpg をはめ込んでみましょう。この画像は、このHTML文書と同じフォルダにおいてある back.jpg ファイルです。

IMG要素の属性

src属性

画像のある位置をURLで指定します。相対指定と絶対指定の両方が使えます。
これが無いと何も表示されません。

alt属性

画像が表示されない場合にはこの属性の値として記述された文字列が表示されます。
画像に付いての単語レベルの短い説明を記述します。
必ず指定して下さい。書く事が無ければalt=""でO.K.です。

width属性、height属性

画像の表示幅と高さを指定します。ここの値で表示の縮尺が調節できます。
単位は「ピクセル（ドット）」で、モニタの解像度に依存する単位です。
ここに小さい値を入れても表示は速くなりません。
これらの属性は必要無くとも必ず指定しましょう。

longdesc属性

画像に付いて長い説明が載っているいるファイルが別にある場合は、そのファイルのURLを指定します。
alt属性では指定できない、段落以上の説明文の場合に使います。

align属性=bottom|middle|top|left|right

画像を浮動要素化し、周りのHTML要素を周り込ませます。
非推奨属性です。

align属性

非推奨属性であるalign属性に付いて説明します。

まず、 align="bottom|middle|top" の働きを解説します。INLINE要素である画像要素を、当該テキストの行内で、垂直方向のどこに配置するかを設定できます。

bottom: 画像の下端と現在のテキスト行のベースラインの高さを合わせる。これは初期値である。
middle: 画像の中央と行のベースラインの高さを合わせる。
top: 画像の上端と行の上端の高さを合わせる。

align属性は「非推奨属性」であり、CSSで実現するように推奨されています。

CSSでは、要素に 'vertical-align' プロパティを適用することで実現します。

画像の浮動化による後続する要素の周り込み

オブジェクト、画像、表、フレームなどの align 属性は、それらを左または右端に浮動させます。可能な値は次の2つ；

left: オブジェクトを現在の左マージンに浮動させる。以降の要素はオブジェクトの右側に流れる。
right: オブジェクトを現在の右マージンに浮動させる。以降の要素はオブジェクトの左側に流れる。

例えば、表を表す TABLE 要素に対しては、 center も指定できますが、この時浮動化は起こらず、左右の余白が測られ、その中央に表示されます。

align 属性は、段落を表す P 要素と、ブロック要素のグループ化要素である DIV 要素に対しても定義されていますが、この場合は要素の浮動化は起こらず、当該要素の内容が中央に揃えられます。

<img align="left" src="http://foo.com/animage.gif" alt="わたしのボート">

この画像は左端に浮動化され、後続するテキストは右脇に流れ込みます。

leonardo da vinci (1452-1519); the mona lisa (1479 - d. before 1550) 画像の貼り付けの例として、ダビンチのモナリザを文章中に置いてみる。

これは align="left" を指定した画像です。画像が左側に寄せられ、後続する要素は右側に流れ込みます。新しい要素や改行があっても、新しい行は画像の横から新たに始まります。

align 属性自身が廃止予定の非推奨属性ですから、出来るだけスタイルシートで実現しましょう。

流れ込みの禁止 - BR 要素

浮動化されたオブジェクトの脇にテキストが流れ込むのを禁止したい場合は、 BR 要素に定義された clear 属性を用います；

clear = none|left|right|all [CI]

非推奨属性
当該 BR 要素の次の行が、どこに現れるべきかを指定します。
この属性は、画像、表などの浮動要素を対象とします。
可能な値は次の4つ；
- none: 次の行は、普通に始まる。これが初期値です。
- left: 次の行は、左側の全浮動オブジェクトの最下端の直下からはじまる。
- right: 次の行は、右側の全浮動オブジェクトの最下端の直下からはじまる。
- all: 次の行は、左右両側にある全浮動オブジェクトの最下端の直下からはじまる。

BR 要素は %Special に属するインライン要素です。

<p>
IMG要素はINLINE要素ですから、
相応のBLOCK-level要素の中に子要素として現れます。
<img src="xxx.gif" align="rihgt">
例えば、このように書くと画像は右端に不動化し、
後続の要素・テキストは画像の左脇に流し込まれます。
そして、周り込みを解消したい場合は、
解消したい場所に、<br clear="right"> を記述します。
改行された後は、画像の次の行に新しく行が始まります。
</p>

Leonardo da Vinci (1452-1519); The Mona Lisa (1479 - d. before 1550) 浮動化の例として、ダビンチのモナリザを文章中に挿入してみる。

align="right" を与えた表
ここは表要素です。
align="right" が与えられています。
右端に浮動化される筈です。
後続する要素は左脇に流れ込みます。

途中で画像の下端の、次の行から新たにテキスト行を始めたい場合は、周り込みを解消したい位置に <br clear="left"> を記述します。これで、浮動化した要素に後続する要素は、要素の下端、次の行から新たに始まります。
浮動化され右側に寄せられた要素に対すして後続する要素の周り込みを解消したい場合は、 clear="right" です。

ここでは、「モナリザ」に与えたalign="left"のために、画像が浮動化して左端に寄せられ、後続するテキストが、右側に流れたので、流れ込みを終了させる目的で<br clear="left">を書きました。

TABLE 要素のalign="right"に対しては、<BR clear="right">によって周りこみが解消します。

BR 要素の clear 属性と、IMG 要素や TABLE 要素などの align 属性は旧版の HTML との下位互換のために用意されたものの、廃止予定の非推奨属性です。できるだけスタイルシートで実現するように御奨めします。

CSS による実現

要素の浮動化は CSS によってより柔軟に指定できます。

STYLE 要素での宣言；

<head>
<title>vertical-align の例</title>
<meta http-equiv="content-style-type" content="text/css">
<style type="text/css">
<!--
img { float: left }
p { clear: left }
-->
</style>
</head>

この例では、当該文書中に現れる全ての IMG 要素が左端にフロートするように指定されています。

且つ、当該文書中に現れる全ての P 要素が左側のフロート要素に対して、流れ込むことを禁止されています。

ここは段落要素の内容部です。 Leonardo da Vinci (1452-1519); The Mona Lisa (1479 - d. before 1550) この文書中に挿入された画像は全て左端にフロートします。従って、普通に書いているだけで、後続の要素やテキストは画像の右側に周り込もうとします。この段落要素にもスタイル宣言 clear:left が適用されていることに注意してください。

しかし、段落要素は左端のフロート要素に対して、周りこみが禁じられているので、段落が改まると、フロート要素の下端から新たに行を始めます。

CSS の float プロパティと clear プロパティの概要です；

float: left | right | none | inherit

初期値は none です。
子要素に値が継承されません。

clear: none | left | right | both | inherit

ブロック要素に対して適用できます。
初期値は none です。
子要素に値が継承されません。

ここでは CSS プロパティが値に取り得るキワードの意味に付いては説明しません。

或る一つの要素だけを周り込ませたくない場合は、 id 属性を利用するか、 style 属性によるインラインスタイルを利用します。

インラインスタイルの例；

<p style="clear:left">
この要素は左側のフロート要素の直下のから新たに行を始めます。
</p>

或る一つの要素だけを浮動化したい場合も、同様に id 属性かインラインスタイルを利用します。今度は id 属性を利用します；

HEAD 要素の中；

<title>vertical-align の例</title>
<meta http-equiv="content-style-type" content="text/css">
<style type="text/css">
<!--
p#hogehoge { float: left; width: 40% }
-->
</style>

BODY 要素の中

<p id="hogehoge">
この要素は左端にフロートします。
</p>

CSSでは、要素に 'float' プロパティを与えることで、浮動化を実現し、周り込みは 'clear' プロパティで解消します。

画像周りの空白；vspace属性, hspace属性

上の例では、「モナリザ」の周りのテキストは、画像にピッタリと隣接していますが、「ミロのビーナス」の周りでは少し間隔を空けるように指定して在ります。

これは、hspace属性, vspace属性を用います。但しこれも非推奨属性です。

hspace = [pixels]:: horiozntal space: IMG要素の左右に挿入する、空白の量を指定する。
vspace = [pixels]:: vertical space: IMG要素の上下に挿入する、空白の量を指定する。

これらの属性では、属性値として数字だけを取ります。単位は「ピクセル（ドット）」で、モニタの解像度に依存する単位です。

<IMG src="back.jpg" hspace="10" vspace="10">

CSSでは、'margin' プロパティを与えることで実現します。

境界線の設定

画像のまわりに境界線を引くブラウザがあります。特に、画像がリンクのアンカーになっている場合は、多くのブラウザで境界線が引かれます。

この境界線は、border属性を用いて設定できます。但し、非推奨属性です。

未設定	border="0"	border="1"	border="2"	border="10"

上の例は何れも、ルーブル美術館の公式サイトへのリンクのアンカーになっています。

CSSでは、'border' プロパティで設定します。

CSSによる浮動化と周り込みの解消

ここでは特に、浮動化に関するCSSプロパティについて簡単に紹介します。

CSSでは、任意の要素を浮動化することが可能ですが、ここでは特に画像要素であるIMG要素の不動化と、後続する要素の周り込みの解消を例に取ります。

<META http-equiv="Content-Style-Type" content="text/css">
<STYLE type="text/css">
<!--
IMG {float: left ;
  margin-left: 0 ;
  margin-right: 2em }
-->
</STYLE>

この八行が、HTML文書のHEAD要素中に記述されていたとしましょう。

一行目は、ここで宣言するスタイルがCSSであることを明示しています。二行目以降のSTYLE要素（<STYLE>から</STYLE>まで）が、CSSで見栄えを設定する部分です。

この時、当該のHTML文書中に現れる全てのIMG要素は左端に浮動化し（float:left）、後続の要素は画像の右脇に周り込みます。また、画像の左側の空白はゼロ（margin-left:0）、右側には二文字分の空白が取られる（margin-right:2em）ように設定されています。

これが上述のスタイル宣言が適用された画像の例です。

画像要素の左端への浮動化、後続するテキスト、要素の周り込みを確認できるでしょうか？また、左側の空白がゼロ、右側の空白が2文字分であることも御注意下さい。

この浮動化による後続の要素の周り込みは、画像の縦の長さが続く限り、要素が改まっても続きます。

周り込みを禁止する場合は、'clear'属性を使います。

周り込みを禁止する場合の、HEAD要素内のSTYLE要素の例を挙げます。

【CSS記述例】

IMG {float: left ;
  margin-left: 0 ;
  margin-right: 2em }
P {clear: left}

この時、BODY要素内のHTMLが次のように記述されていたとします。

【HTML記述例】

<P>
画像要素の左端への浮動化、後続するテキスト、要素の周り込みを確認できるでしょうか？
<IMG src="http://www.louvre.or.jp/louvre/img/photos/collec/ager/vignet/ma0399.jpg"
 alt="ミロのヴィーナス" width="48" height="130">
また、左側の空白がゼロ、右側の空白が2文字分であることも御注意下さい。
上述のCSSの記述例では、全てのP要素に対して、'clear'プロパティが設定されています。
左側端に浮動化した要素に対して、後続するP要素のうち、一つ目のP要素は画像の右脇に周りこみます。
</P>
<P>
しかし、二つ目のP要素は、周りこみが解消されて、画像の下で、新たに左端から行が始まります。
</P>

ここでは、二つのP要素が現れていますが、何れのP要素に対しても、CSSにより 'clear:left' と設定されていることに注意してください。

ここでは、画像のsrc属性に絶対URLを用いましたが、当然相対URLでO.K.です。

【表示例】

画像要素の左端への浮動化、後続するテキスト、要素の周り込みを確認できるでしょうか？また、左側の空白がゼロ、右側の空白が2文字分であることも御注意下さい。上述のCSSの記述例では、全てのP要素に対して、'clear'プロパティが設定されています。左側端に浮動化した要素に対して、後続するP要素のうち、一つ目のP要素は画像の右脇に周りこみます。

しかし、二つ目のP要素は、周りこみが解消されて、画像の下で、新たに左端から行が始まります。

このセクションでは、CSSの導入を兼ねて、HTMLによる設定法と、CSSによる設定法を比較してみました。

CSSでは、さらに木目細かく表示体裁（見栄え）を設定できます。詳しくは、拙稿「CSSとはなんだろうか」を参照下さい。

SEO		[PR] ��!��u��O ��z�[��y�[�W�J�� C�u��