◆ 画像について
ホームページで使うことが出来る画像の種類は「gif」形式か「jpeg」(jpg)です。「gif」は小さいマーク、ロゴ、ミニバナー等「jpeg」は主にスキャナやデジカメの写真に適しています。
■ 画像の表示
画像を表示するには、<IMG src="ファイル名">と記述します(終了タグ不要)。
HTMLソース
結果
<img src="gazo/banner.gif">
■ 背景に壁紙画像を指定する
BODY要素に background="画像ファイルの場所" で指定します。
例:壁紙画像が kabe.gif で gazo フォルダにある場合、、、
<BODY background="gazo/kabe.gif">
属性値 background は画像を繰り返し表示します。
■ 画像のサイズを指定する(widthとheightの必要性)
画像のサイズを指定するには、IMG要素に幅(width)と高さ(height)の各属性をつけます。属性値は、ピクセルで指定します。
画像を元の大きさのままで使う場合でも、幅(width)と高さ(height)を指定することをお勧めします。サイズを指定しておけば、画像のページ上での位置をブラウザが適切に把握するので、ページの読み込みが早くなるからです。
HTMLソース
結果
<div align="left">
<img src="gazo/banner.gif" width="60" height="20">
</div>
<br>
<div align="center">
<img src="gazo/banner.gif" width="88" height="31">
</div>
<br>
<div align="right">
<img src="gazo/banner.gif" width="110" height="45">
</div>
しかし、画像を縮小したり拡大すると、上の結果の様に見にくくなる場合がほとんどです(真ん中がオリジナルのサイズ)。
■ 画像の枠の太さを指定する
画像の枠の太さを指定するには、IMG要素にborder属性をつけます。属性値はピクセルで指定します。画像にリンクを設定すると、自動的に枠が表示されてしまいますが、border="0" と指定しておけば枠が表示されません。
HTMLソース
結果
<img src="gazo/banner.gif"
border="5" width="88" height="31">
■ 完全な画像表示指定(ALT属性)
基本の画像の場所指定と幅、高さに加え、ALT属性で画像へのコメントを記述すれば、もし画像が表示されないといった時、また画像読み込み中に、代行テキストが表示されます。画像が表示された後、マウスカーソルを画像の上に合わせると、ミニコメントが表示されます。
HTMLソース
結果
<img src="gazo/banner.gif"
border="0" width="88" height="31"
alt="バナー">