<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="314" height="229" border="0" />

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


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

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

大きさを指定する場合、pxなどの単位を入力せず、100pxならそのまま100と入力します。

上の画像の場合、横幅が406pxだったため、スマホで表示するにははみ出してしまうため、314pxまで縮小しております。ホームページにレスポンシブウェブデザインを適用してスマホ用にも対応する場合、スマホの画面サイズの320px以下にすることをおすすめします。

また、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.png" alt="" width="327" height="328" style="border: solid 1px #000000;" /></p>

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

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

このjpgやpngなどの画像容量が大きい場合、ロスレス圧縮をすると画質を落とさないで容量を削減することができます。容量の大きな画像でサイトの表示が重い場合、画像の圧縮サイトでファイル容量を削減して掲載するとよいでしょう。