画像を表示させてみよう

ホームページで使う画像について

ホームページで使う画像は主に２種類で、「GIF形式」と「JPEG形式」を用途によって使い分けます。

「GIF形式」の画像は、使われる色が256色までと決まっているため、画像容量が小さく抑えられます。ホームページで使われる画像一般で使われる形式で、「ファイル名.gif」で保存されます。

「JPEG形式」の画像は、1670万色まで色が使えるため、GIF形式に比べると多少容量が大きくなりますが、 不可逆圧縮で圧縮されるので、容量はある程度抑えられます。主にフルカラーで表現される写真の使用に使われ、「ファイル名.jpg」で保存されます。

画像を表示させる

HTMLコード	ブラウザ表示画面
<img src="../img/illust1712_thumb.gif"> <!-- 画像ファイルの指定は、 相対パスか絶対パスで指定します。--> →相対パスと絶対パスについて
コンテンツメニューに戻る

代替テキストを指定する

HTMLコード	ブラウザ表示画面
<img src="../img/illust3152_thumb.gif" alt="コアラの画像" /> <!-- 「altタグ」で代替えテキストを指定できます。 画像を表示しないブラウザや、音声読み上げブラウザで使われます。-->
コンテンツメニューに戻る

ポップアップテキストを指定する

HTMLコード	ブラウザ表示画面
<img src="../img/illust1621_thumb.gif" alt="ひよこの画像" title="ひよこの画像"> <!-- 画像の上にカーソルを当てるとテキストが表示されます。 「title」で指定します。-->
コンテンツメニューに戻る

行寄せを指定する

幅と高さを指定する

HTMLコード	ブラウザ表示画面
<img src="../img/illust1609_thumb.gif" width="200" height="66" alt="ニワトリの親子の画像" /> <!-- 画像の幅は「width」、高さは「height」で指定します。 片方を指定するともう片方は等倍で拡大・縮小します。-->
コンテンツメニューに戻る

背景画像を指定する