| HTMLの書き方 基礎６ | ||
| 発言番号 | 発言日時 | 発言者 |
| 01146 | 98/01/03 05:59 | にゃん |
さてと、続けましょう。<IMG> タグにいろんなオプションがあると書きました。よく使うものから順に紹介します。
画像ファイルを指定します。<IMG SRC="picture.jpg"> と書くと、同じ場所に置いてある picture.jpg という画像が表示されます。（別のディレクトリに画像が置いてある場合は、HTML ファイルのあるディレクトリからの相対パス指定で <IMG SRC="../graphics/picture.jpg"> のように書きますが、場合によっては絶対パス指定も使います）。
<IMG SRC="http://www.yahoo.com/images/recip/1yahoo.gif"> のように URL を指定すると、そこから画像を取ってきて表示します（例は Yahoo! のアイコンです）。この方法は、画像の持ち主に嫌われることが多いので、とくに許可がないかぎり使わないほうがよさそうです。
外枠の太さ画像には、通常、外枠が描かれませんが、BORDER="5" のように書いてやると、その太さ（ピクセル数）の外枠が描かれます。
また、画像をリンクの中に入れて、リンクボタンとして使用する場合（たとえば <A HREF="index.htm"><IMG SRC="home.gif"></A> ）には、通常はボタンの画像のまわりに色の縁取りがつきますが、BORDER="0" を指定して <A HREF="index.htm"><IMG SRC="home.gif" BORDER="0"></A> のようにすると、縁取りがつかなくなります。
画像の代わりに表示する語句。画像を表示できないブラウザや、画像の自動表示をオフにしている人のために、画像のある場所に画像の代わりに表示する語句を指定します。<IMG SRC="map.jpg" ALT="近所の地図"> のようにしてあれば、画像が表示されなくても「近所の地図」という文字が表示されるので、そこにある画像が何なのか分かります。
画像の幅、HEIGHT = 画像の高さ指定しなくても、画像は正しい大きさで表示されます。ブラウザによっては、この指定があると画面のレイアウトが速くできる場合があります。本来の画像の大きさとは違った大きさで（拡大／縮小して）表示させたい場合には、WIDTH と HEIGHT を指定します。単位はピクセル数またはパーセントです。たとえば画像のサイズが100 × 100 であっても、<IMG SRC="neko.gif" WIDTH="200" HEIGHT="250"> と指定すれば、200 × 250 のサイズになります。
レイアウトの区切りに使う水平な棒（バー）の類は、画面の両端のほうまで、適度な幅で表示されると見やすいものです。バーの画像が画面からはみだしたり、短すぎたりすると嫌だという場合には、パーセント単位で WIDTH を指定するとよいでしょう。<IMG SRC="line01.gif" WIDTH="100%" HEIGHT="3%"> のようにやります。
画像と文章の位置関係を指定します。１行の文章の中に画像が入っているとき、<IMG SRC="yubi.jpg" ALIGN="middle"> のように使います。何も指定しないと、文字と画像は下端が揃うように並びます。ALIGN="top" だと、上端が揃います。ALIGN="middle"（または "center"）だと、文字の中央と画像の中央が揃うように並びます。ALIGN="bottom" は、何も指定しないのと同じです。
画像と文章の回り込みを指定します。ALIGN="left" という指定をすると、画像は左端に表示され、文章はその右に来ます。画像が大きければ、文章が改行された後も画像の下へは行かず、画像の右の余白に回り込んで表示されます。画像の横の余白が埋まったら、そのあとの文章は画像の下に続けて表示されます。同様に、ALIGN="right" という指定をすると、画像は右端に表示され、文章はその左に回り込みます。
余白があるうちに回り込みをやめさせるためには、<BR CLEAR> と書きます。これにもまたオプションがあるんだけど、あたしが理解していないので、パス。
画像まわりのすきま画像と文章がぴったりくっついていると読みにくい場合があるので、<IMG SRC="birthday.jpg" ALIGN="left" VSPACE="20" HSPACE="20"> のようにして、画像と文章とのすきまを作ります。
画像の二段階表示に使うファイルを指定します。たとえば <IMG SRC="photo.jpg" LOWSRC="welcome.gif"> という指定をすると、最初に welcome.gif を表示してから、同じ所に photo.jpg を表示します。（一部のブラウザのみ対応）
|
上の大きなボタンを押すと、テキストエリアに書かれている内容が、右のフレームに表示されます。いろいろ好きなことを書いて試してみましょう。（Netscape 2 では、この JavaScript がうまく作動しません） たとえば画像の表示サイズを変えてみる、left を right にしてみる、など。 |
次の記事