<img src=は画像を表示するhtmlタグ

ホームページに画像を表示するhtmlタグはこのように記述します。

<img src="http://" alt="" width="" height="" border="0" />

各要素に画像の情報を記述します。

  • srcには画像のあるURL
  • altに画像の説明文
  • widthに横幅
  • heightに高さ
  • borderには境界線の指定

例えば、当ホームページでは、imageフォルダを作成して、画像ファイルはすべてそちらの方にアップロードしているのですが、そちらにライオン画像(lion.jpg)をアップロードしたとします。

その際のライオン画像のあるURLはこちらになります。

http://www.homepage-tukurikata.com/image/lion.jpg

この場合、ホームページにこのようなhtmlタグを記述すれば、
<img src="http://www.homepage-tukurikata.com/image/lion.jpg" alt="ライオンの画像" width="406" height="296" border="0" />

このように画像が表示されます。


ここで、画像の大きさは指定しなくても表示されるかもしれませんが、ブラウザによっては表示されなかったケースもあったので、個人的にできるだけ指定しておくようにしています。

画像を直接表示してみて、右クリックのプロパティーでたいていは何pxかを調べることができます。

また、border="0"で枠線をゼロにすると表示されなくなりますが、border="0"の代わりにstyle="border: solid 1px #000000;"というふうに指定すると、枠線ありになります。

上の画像に指定するとこのような感じになります。

style="border: solid 1px #000000;"の部分で、枠線を太くしたい際には、2pxとか、青にしたい場合は#0000ffとか、調節することができます。


画像を表示する際には、pタグでくくるケースが多いように思いますが、中央に寄せる場合は、 style="text-align:center;"などをつけとくといいと思います。

例えば、このように記述すると…

<p style="text-align:center;"><img src="http://www.homepage-tukurikata.com/image/gazou-info.bmp" alt="" width="327" height="328" style="border: solid 1px #000000;" /></p>

このようにセンタリングされます。

style="text-align:center;でセンタリング、rightで右寄せ、leftで左寄せです。

関連:ホームページに画像の貼り方