画像の挿入

 画像の挿入の仕方は非常に簡単です。

<IMG SRC="画像ファイル名">


 これだけでOKです。使用できる画像は背景の指定と同じです(こちらを参照)。

 画像のサイズを指定することもできます。

<IMG SRC="画像ファイル名" WIDTH=横のサイズ HEIGHT=縦のサイズ>


 サイズを数字で指定します。 縦か横どちらか一方だけ指定すると、縦横比を保ったまま、拡大・縮小してくれます。 単位はピクセルと呼ばれるものですが、どれくらいの大きさなのかわからないと思うので、 下の例を参考にしてください。

50×50

100×100

150×150

200×200


 画像に枠をつけることもできます。

<IMG SRC="画像ファイル名" BORDER=枠の太さ>


枠の太さを数字で指定します。デフォルトでは0になっています。 ただし、リンクされている画像には必ず枠(BORDER=2)がつきます。 この枠を取りたいときはBORDER=0にしておきましょう。 色は文字と同じ色になります。

 ネット環境や画像ファイルのサイズによって、画像が表示されるまで時間がかかることがあります。 そういう場合に、画像が表示されるまで、その位置に文字を表示させておくことができます。

<IMG SRC="画像ファイル名" ALT="文字列">


 次に、画像を挿入する位置の変更するオプションを紹介します。

<IMG SRC="画像ファイル名" ALIGN=right>画像が文章の右側に来ます。
<IMG SRC="画像ファイル名" ALIGN=left>画像が文章の左側に来ます。


というように指定すると、ブラウザ上では次のように表示されます。 (タイプミスではありません。わかりやすいように、適当に長い文章をつくっただけです。)

画像が文章の右側に来ます。 あああああああああああああああああああああああああああああああああああああああああああああ いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい ううううううううううううううううううううううううううううううううううううう

画像が文章の左側に来ます。 ええええええええええええええええええええええええええええええええええええええ おおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおお おおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおお

デフォルトではこのようになります。 あああああああああああああいいいいいいいいいいいいいうううううううううううううううううう


 次のような指定もできます。

<IMG SRC="画像ファイル名" ALIGN=top>文章が画像の上端から続きます。
<IMG SRC="画像ファイル名" ALIGN=middle>文章が画像の真中から続きます。
<IMG SRC="画像ファイル名" ALIGN=bottom>文章が画像の下端から続きます。


 ブラウザ上ではこうなります。

文章が画像の上端から続きます。

文章が画像の真中から続きます。

文章が画像の下端から続きます。


 さて、次はリストや表の作り方です。こちらへどうぞ。