Webサイトに画像を表示するHTMLタグの使い方

トップページ » HTMLタグ入門講座 » Webサイトに画像を表示するHTMLタグの使い方

■Webサイトに画像を表示する時の注意点

◇画像ファイルのサイズと画像の数に注意

Webサイトに表示する画像ファイルのサイズ（データの容量）と画像の数には注意が必要です。高画質な画像は、画像がきれいに表示される半面、サイズが大きくなります。容量が大きい画像を同じページに表示させると、Webサイトを表示するときの動作が遅くなります。

◇画像の縦横比に注意

画像の縦幅と横幅の比率を変更してWebサイトに表示しようとすると、画像が歪んで表示されてしまいます。 Webサイトに表示するときは、画像の縦横比を変更しない方が無難です。

◇画像の縮小表示と拡大表示に注意

画像の縦幅と横幅の比率を変えず、縮小してWebサイトに表示する分には問題ありません。しかし、画像を拡大してWebサイトに表示しようとすると、画像の表示が荒くなるので注意が必要です。

■Webサイトに画像を表示するHTMLタグ

Webサイトに画像を表示するには、イメージタグ「<img>」を記述します。イメージタグを記述するときに注意すべき属性は「border」です。「border="1"」と記述しても枠線を表示しないWebブラウザもあります。

イメージタグ「<img>」の主な属性と使用方法を以下の表にまとめました。表に掲載している以外にも属性は存在しますが、スタイルシートでの指定が推奨されている属性や、廃止された属性は省略しました。必須欄の◎は必須属性、○は推奨属性、×は非推奨属性です。

イメージタグ属性	意味	必須
src=url	表示する画像ファイルのURLを指定（拡張子まで記述）	◎
alt=alt	画像が表示できない、または画像が表示されない場合に、表示する文字列を指定	◎
height=n	画像の縦幅をピクセル、またはパーセンテージで指定	○
width=n	画像の横幅をピクセル、またはパーセンテージで指定	○
class=class	クラスを指定
id=id	IDを指定
lang=lang	言語を指定
name=name	名前を指定
style=style	スタイルシートを指定
title=title	タイトルを指定
border=n	画像の周りに表示される枠線をピクセルで指定（指定しても枠線を表示しないWebブラウザもあります）	×

HTMLおよびXHTML記述例
<img src="flower.gif" width="150" height="120" alt="花の写真">
Webサイトの表示

ロリポップ！

「コロリポプラン」なら月額105円で容量2GB、「ロリポプラン」なら月額263円で容量13GB、マルチドメイン、データベース、共有SSLが使えます。「チカッパプラン」なら月額525円で容量30GB利用可能です。
さくらインターネット

月額125円のプランからビジネスにも使えるプランまで、予算や利用目的で選べる共用レンタルサーバや、サーバ1台まるごと利用できる専有レンタルサーバなど様々なサービスが用意されています。
Xbit（エクスビット）

稼働率99.99%以上、容量10GB、月額1,260円からのレンタルサーバーです。サポート体制が充実しており、専任のサポートスタッフを置くことで、平均3時間のクイックレスポンスを実現してます。
マルチドメイン対応、ビジネス仕様高性能レンタルサーバー【シックスコア】

サーバー自体が高性能なビジネス仕様のレンタルサーバーです。さらに高性能な専用レンタルサーバーも用意されています。
１００ＧＢ無制限レンタルサーバー【Ｘ２】

100GBの容量以外は、ほとんど無制限のレンタルサーバーです。マルチドメイン、サブドメイン、FTPアカウント、データベース、メールアカウントなどが無制限で利用できます。