Lecture/InfoDesignB2004/6th/image のバックアップ(No.2)

イメージを貼り付ける

イメージ（画像データ）を配置するには、 img要素とalt属性を指定します。また、height、width属性で画像の高さや幅も指定できます。

pre> <img src="画像ファイルの場所・名前" alt="代替テキスト"> <img src="画像ファイルの場所・名前" alt="代替テキスト" height="高さ" width="幅">

/pre>

img要素で指定した場所に、画像を配置します。 alt属性には、画像を表示できない環境で、画像のかわりに表示させるテキストを設定します。
画像の内容を説明するのではなく、画像によって伝えたい内容を設定します。なお、画像が意味のない飾りの場合は、「alt=""」と指定します。

画像の高さと幅は、height属性とwidth属性で、ピクセル値を使って指定します。どちらかだけの指定もできます。もしピクセル値が画像のサイズより大きい場合は画像が拡大され、ピクセル値が画像のサイズより小さい場合は画像は縮小されます。

pre> <img src="logo.png" alt="兵庫大学情報科学センター">

/pre>

イメージの位置を調整するには、align属性を指定します。なお、この方法は、現在使われているHTML4.01では推奨されていません。

pre> <img src="画像ファイルの場所・名前" alt="代替テキスト" aligh="位置">

/pre>

同じ行の文字に対して、画像を表示する位置を設定できます。次のような設定ができます。

ページ全体の背景イメージを設定するには、 body要素にbackground属性を指定します。なお、この方法は、現在使われているHTML4.01では推奨されていません。

pre> <body background="画像ファイルの場所・位置">
...
</body>

/pre>

Webページ上で扱うことができる、画像データのフォーマット（形式）には、次のものがあります。

GIF: Graphics Interchange Format (*.gif)

PNG: Portable Network Graphics (*.png)

JPEG: Joint Photographic Experts Group (*.jpg, *.jpeg)

その他に、Web上では扱えないが、パソコンで一般的に扱われるフォーマットには、次のものがあります。 Web上で扱うには、画像を変換する必要があります。

BMP: Bitmap (*.bmp)

インターネットに公開されている「素材集サイト」にアクセスして、アイコンの素材を集めます。ただし、 素材集サイトを利用するときには、利用に関する注意事項を確認しましょう。「著作権フリー」のように、再利用が許可されているかどうか注意しましょう。

Yahoo! JAPAN( http://www.yahoo.co.jp/ )にアクセス
「コンピュータとインターネット > インターネット > WWW > ホームページ作成 > グラフィックス、素材」の順にカテゴリを絞り込む
登録されているサイトにアクセスし、画像ファイルを探す
気に入った画像があったら、画像を右クリックする
1. メニューから「名前をつけて画像を保存」を選ぶ
2. ファイルの保存場所を指定して、「保存」ボタンをクリック