０からHTML - 初心者がプロになるための完全ガイド

0からネット > 0からHTML >

1999.6.22 更新

・・・画像の挿入・・・

　　　　ＨＴＭＬは道具であって、道具を理解しただけでは芸術はつくれない。ホームページを美しくするのは、無駄のないレイアウト、正しい色の選択、そして画像である。特に画像はＨＴＭＬのなかではもっとも柔軟で実用性が高いメディアであるといっていいだろう。画像はＨＴＭＬほどブラウザによって表示方法が左右されないからである。

タグの説明

　　　　画像はホームページを美しく飾ることもできるし、写真や図などは常に情報を表現する有効な手段である。しかし、インターネットというのは、どうしてもモデムを利用して接続している人のことを考えると、ページの容量が小さいほうがいい。従って、意味の持たない画像や容量の大きな画像は極端に使用を控える必要がある。画像を挿入するには：

<IMG>

SRC="..."： JPEG 又は GIF 形式の画像ファイル名
WIDTH=#：画像の幅（ピクセル数）
HEIGHT=#：画像の高さ（ピクセル数）
ALT="..."：画像が表示される前、表示されなかった場合、及び画像の上をマウスが通りかかったときに表示される文字列。
BORDER=#：画像の周りの枠の太さをピクセル単位で指定。画像をリンクにした場合、「BORDER=0」で枠を消すことができる。
ALIGN="..."：画像の位置ととなりのテキストの位置を調整する。値は RIGHT, LEFT（画像をページの右か左に寄せ、文は画像の周りにラップされる）, TOP, MIDDLE, BOTTOM, TEXTTOP, ABSMIDDLE, BASELINE, ABSBOTTOM（となりのテキストなどの開始位置など）。
VSPACE=#：画像の上下にピクセル単位で空白をつくる。
HSPACE=#：画像の左右にピクセル単位で空白をつくる。

　　　　とにかくどんな画像でも、できる限り「WIDTH=#」と「HEIGHT=#」で画像の寸法、「ALT="..."」での補足を付け加えた方が良い。画像の大きさを指定しておくと、ブラウザは画像が表示される前から必要な表示面積を確保するので、ダウンロード後に突然テキストがずれたりしない。補足は画像表示をオフにしている人や、全ての画像がダウンロードする前にリンクをクリックする人（実は過半数）のために常に付けることを強く推薦する。

　　　　画像のもっとも有効な使い道は、リンクにある。普段はテキストで下線が引かれて色が変わるだけで、あまり目立たず面白くもないリンクに個性を持たせることができる。普通にアンカータグで画像タグを囲めばその画像はリンクになるが、境界線が描かれるのでそれを防ぐのに「BORDER=0」を使う。典型的な例でいうと：