簡単HTML（画像を貼ってみよう）

●　画像を貼ってみよう　●

画像を張り付けてみましょう。ここで使用しているのは
画像ファイル名neko.gif
サイズは巾71pixels　高さ71pixelsです。
注）サイズの指定は必ずpixelsを使用します。

ただしここでの画像名は、画像を貼るページと画像の置いてある場所が同じ階層にある場合です。
例えば画像を貼るページから見て、画像のある場所が neko という名前のフォルダーの中にある場合、
画像ファイル名のところは　neko/neko.gif　となります。
逆に画像を貼るページが neko というフォルダーの中にあり、画像がその外にある場合は ../neko.gif となります。

●　画像を貼る　●

画像を表示させるのは<IMG SEC="画像ファイル名">を使います。
これは単独で使用するタグなので閉じタグ</IMG>は使いません。
またIMGとSRCの間は半角の空白を入れましょう。

これだけでも画像は表示されますが、サイズが指定してあると画像が表示されるまでの間や
読み込みエラーなどで画像が表示されなかったときのレイアウトの崩れなどが防げます。
また、エラーなどで画像が表示されなかった時のためにALT="　"を使って名前などが表示
されるようにしておくと良いでしょう。

エラーの時の見え方

もしサイズも何も指定してないと、エラーの時などこんな感じになってしまいます。

●　画像と文字の位置　●

画像を左・中央・右寄りに　ALIGN=　を使って指定することが出来ます。
ただし中央に指定するには　ALIGN=center　で指定すると認識しないブラウザがあるので、
<center></center>タグを使用しましょう。

同じように画像と文字を並べて配置したときの文字の高さを指定することが出来ます。
これも同じく　ALIGN=　で指定することが出来ます。

<IMG SRC="neko.gif">
<center><IMG SRC="neko.gif"></center>
<IMG SRC="neko.gif" ALIGN=right>
<IMG SRC="neko.gif">	指定しないと文字が画像の下の位置に配置されます。
<IMG SRC="neko.gif" ALIGN=middle>	文字が画像の真ん中の位置に配置されます。
<IMG SRC="neko.gif" ALIGN=top>	文字が画像の上の位置に揃えて配置されます。

●　テキストの回り込み　●

画像の横に文字を数行書き込むことが出来ます。
取りあえず紹介だけしておきますが、問題も多いのであまりお勧めしません。
どうしても画像の横に配置したいときはテーブルを利用するといいよ！

画像を　ALIGN=left　や　ALIGN=right　で指定すると、横に文字を回り込ませることが出来ます。
回り込ませる文字の最後に<BR CLEAR>を付けるとその下の文字からは画像の下に配置されます。
ただしMacでは認識できないタグなので、<BR CLEAR>を付けても、そのまま続けて表示されてしまいます。

<IMG SRC="neko.gif" ALIGN=left>	大きい画像の右側に、数行のテキストを回り込ませることが出来ます。回り込ませたいテキストの最後に <BR CLEAR>を付けましょう。
<IMG SRC="neko.gif" ALIGN=right>	大きい画像の左側に、数行のテキストを回り込ませることが出来ます。回り込ませたいテキストの最後に <BR CLEAR>を付けましょう。

（文字を書いてみよう）戻る　　 TOPページへ　　次へ（リンクを貼る）