画像の貼り付けの例として、
このHTML文書と同じディレクトリに在る画像ファイル back.jpg をはめ込んでみましょう。この画像
は、このHTML文書と同じフォルダにおいてある back.jpg ファイルです。
since 21st/Jan./2000 and last modified 23rd/Jan./2000
IMG要素
画像を貼り付けるための要素です。正確には「張付ける」と言うよりも、「ブラウザに指定した位置へ画像を呼び出させる」ための要素です。
<p> 画像の貼り付けの例として、 このhtml文書と同じディレクトリに在る画像ファイル back.jpg をはめ込んでみましょう。この画像 <img src="./back.jpg" alt="骸骨" width="100" height="172"> は、このhtml文書と同じディレクトリに置いてある back.jpg ファイルです。 </p>
IMG要素は開始タグのみで、終了タグは存在しません。強制改行のBR要素と同じですね。このような要素を空要素と呼びます。
IMG要素はINLINE要素です。
IMG要素に幾つかの属性を指定することで、ブラウザは適切に画像を呼び出します。
画像の貼り付けの例として、
このHTML文書と同じディレクトリに在る画像ファイル back.jpg をはめ込んでみましょう。この画像
は、このHTML文書と同じフォルダにおいてある back.jpg ファイルです。
src属性
alt属性
alt=""でO.K.です。
width属性、height属性
longdesc属性
alt属性では指定できない、段落以上の説明文の場合に使います。
align属性=bottom|middle|top|left|right
非推奨属性である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="わたしのボート">
この画像は左端に浮動化され、後続するテキストは右脇に流れ込みます。
画像の貼り付けの例として、ダビンチのモナリザを文章中に置いてみる。
これは align="left" を指定した画像です。画像が左側に寄せられ、後続する要素は右側に流れ込みます。新しい要素や改行があっても、新しい行は画像の横から新たに始まります。
align 属性自身が廃止予定の非推奨属性ですから、出来るだけスタイルシートで実現しましょう。
浮動化されたオブジェクトの脇にテキストが流れ込むのを禁止したい場合は、 BR 要素に定義された clear 属性を用います；
clear = none|left|right|all [CI]none: 次の行は、普通に始まる。これが初期値です。 left: 次の行は、左側の全浮動オブジェクトの最下端の直下からはじまる。right: 次の行は、右側の全浮動オブジェクトの最下端の直下からはじまる。all: 次の行は、左右両側にある全浮動オブジェクトの最下端の直下からはじまる。BR 要素は %Special に属するインライン要素です。
<p> IMG要素はINLINE要素ですから、 相応のBLOCK-level要素の中に子要素として現れます。 <img src="xxx.gif" align="rihgt"> 例えば、このように書くと画像は右端に不動化し、 後続の要素・テキストは画像の左脇に流し込まれます。 そして、周り込みを解消したい場合は、 解消したい場所に、<br clear="right"> を記述します。 改行された後は、画像の次の行に新しく行が始まります。 </p>
浮動化の例として、ダビンチのモナリザを文章中に挿入してみる。
これは align="left" を指定した画像です。画像が左側に寄せられ、後続する要素は右側に流れ込みます。新しい要素や改行があっても、新しい行は画像の横から新たに始まります。
| ここは表要素です。 |
| align="right" が与えられています。 |
| 右端に浮動化される筈です。 |
| 後続する要素は左脇に流れ込みます。 |
<br clear="left"> を記述します。
これで、浮動化した要素に後続する要素は、要素の下端、次の行から新たに始まります。
ここでは、「モナリザ」に与えたalign="left"のために、画像が浮動化して左端に寄せられ、後続するテキストが、右側に流れたので、流れ込みを終了させる目的で<br clear="left">を書きました。
TABLE 要素のalign="right"に対しては、<BR clear="right">によって周りこみが解消します。
BR 要素の clear 属性と、IMG 要素や TABLE 要素などの align 属性は旧版の HTML との下位互換のために用意されたものの、廃止予定の非推奨属性です。できるだけスタイルシートで実現するように御奨めします。
要素の浮動化は 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 要素が左側のフロート要素に対して、流れ込むことを禁止されています。
ここは段落要素の内容部です。
この文書中に挿入された画像は全て左端にフロートします。従って、普通に書いているだけで、後続の要素やテキストは画像の右側に周り込もうとします。この段落要素にもスタイル宣言 clear:left が適用されていることに注意してください。
しかし、段落要素は左端のフロート要素に対して、周りこみが禁じられているので、段落が改まると、フロート要素の下端から新たに行を始めます。
CSS の float プロパティと clear プロパティの概要です；
float: left | right | none | inheritclear: none | left | right | both | inheritここでは 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' プロパティで解消します。
上の例では、「モナリザ」の周りのテキストは、画像にピッタリと隣接していますが、「ミロのビーナス」の周りでは少し間隔を空けるように指定して在ります。
これは、hspace属性, vspace属性を用います。但しこれも非推奨属性です。
hspace = [pixels]:
vspace = [pixels]:
これらの属性では、属性値として数字だけを取ります。単位は「ピクセル（ドット）」で、モニタの解像度に依存する単位です。
<IMG src="back.jpg" hspace="10" vspace="10">
CSSでは、'margin' プロパティを与えることで実現します。
画像のまわりに境界線を引くブラウザがあります。特に、画像がリンクのアンカーになっている場合は、多くのブラウザで境界線が引かれます。
この境界線は、border属性を用いて設定できます。但し、非推奨属性です。
| 未設定 | border="0" | border="1" | border="2" | border="10" |
|---|---|---|---|---|
|
|
|
|
|
上の例は何れも、ルーブル美術館の公式サイトへのリンクのアンカーになっています。
CSSでは、'border' プロパティで設定します。
ここでは特に、浮動化に関する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とはなんだろうか」を参照下さい。