画像は、 <IMG SRC="画像ファイル名"> で、指定するなり。
前回も言ったけど、画像ファイルは、ＧＩＦかＪＰＥＧをつかいましょう。
絵にはＧＩＦ、写真にはＪＰＥＧをつかうなり。
ここでは、またもや、しらちの用した画像をつかってみるなりが、
みなさんは、自分の用意したのを、つかってくれたらいいなりよー。
しらうさぎ usa.gif
そりでは、 しらうさぎの画像（usa.gif)を、タイトルの下に入れるなり。
<HTML>
<HEAD>
</HEAD>
<BODY BACKGROUND="hana_p.gif">
<H1 ALIGN="center">
<FONT COLOR="#FF0000">
しらちゃんワールド
</FONT>
</H1>
<IMG SRC="usa.gif">
<P ALIGN="right">
---(省略）---
</P>
</BODY>
</HTML>
上書き保存してから、 アイコンをダブルクリックして見てみる なり。
このように表示
ありり？これは、ちょっと、変なり。
なんでかというと、画像のまわりが、白くて、背景にとけこんでないからなり。
これは、画像に問題があるなり。
絵を描いたとき、「白色を透過」にして、保存しなければならないなり。
すると、絵の中の、白色の部分が、透き通って、背景が見えるようになるなり。
透過を指定したＧＩＦ画像のことを、「透過ｇｉｆ」というなり。
透過ｇｉｆの指定できないお絵描きソフトを使ってるひとは、
透過するのをあきらめるか、できるソフトを買うなり。
そこで、同じ画像を透過ｇｉｆで、用意したなり。
透過しらうさぎ usa_t.gif
白バックの画面で見ると、同じに見えるなりね。
では、さっきの画像ファイル名を usa_t.gifに変えるなり。
<IMG SRC="usa_t.gif">
上書き保存してから、 アイコンをダブルクリックして見てみる なり。
このように表示
ふむふむ。透過できてるなり。
でも、絵と文の位置が、いまいちなり。
ということで、次は、 画像と文の位置関係を指定するなり。
位置関係は、
「画像−左、文−右」か、その逆の「文−左、画像−右」
が、指定できるので、画像がどちらにくるかで、指定するなり。
画像と文の位置関係の指定は、 <IMG SRC="ファイル名"> のタグのなかに、 ALIGN="位置" と入れるなり。
「位置」 のところには、 left（画像が左）か、 right（画像が右）が入るなり。
では、 画像−左、文−右で、指定するなり。
<IMG SRC="usa_t.gif" ALIGN="left">
上書き保存してから、 アイコンをダブルクリックして見てみる なり。
このように表示
なかなか、だけど、ちょっと、バランスが悪いなりね。
文が、上によりすぎてるなり。
ちょっと、修正するなり。
文の始めを、２行改行するなり。
<HTML>
<HEAD>
</HEAD>
<BODY BACKGROUND="hana_p.gif">
<H1 ALIGN="center">
<FONT COLOR="#FF0000">
しらちゃんワールド
</FONT>
</H1>
<IMG SRC="usa_t.gif" ALIGN="left">
<P ALIGN="right">
<BR><BR>
---(省略）---
</P>
</BODY>
</HTML>
上書き保存してから、 アイコンをダブルクリックして見てみる なり。
このように表示
ふむ。上出来なり。
次回は、もうちっと上級の画像の指定の仕方をレッスンするなり。
お楽しみにー！
--注意--
画像ファイルは、 index.html と同じフォルダに入れておきましょう。
LESSON-9へ進むなり
もどるなり