画像を貼り付けよう

ホームページを作るからにはなんらかの画像を載せたいものだと思います。特に、自分の描いた絵を公開するようなサイトでは絶対に必要な知識です。

HTML文書の中に画像を埋め込むにはIMG要素を使います。タグは<IMG>です。終了タグが無いタイプの要素です。

これもA要素と同じく、これだけでは効果がありません。 A要素のhref属性に対し、IMG要素ではsrc属性で画像へのパスを指定する必要があります。例えば同じディレクトリ（フォルダ）にある「neko.jpg」を表示させたい場合は、src属性を使って以下のようにタグを書きます。

<img src="neko.jpg">

これでブラウザに画像を表示させることができます。「絶対パスと相対パス」で説明したとおり、もし画像が一つ上のディレクトリにあるなら"../neko.jpg"、になります。

しかし、IMG要素ではsrc要素の他にもう一つ絶対必要な属性があります。それがalt属性です。

alt属性とは、「もしなんらかの事情で画像が表示されなかった場合、画像のかわりに表示する言葉」です。普通は画像の説明を書きます。ここでは「ねこ」と書くことにします。

さっきの猫ちゃんなら、以下のように書きます。

<img src="neko.jpg" alt="ねこ">

このように、alt属性は半角英数字だけではなく、日本語も入れることができます。

たいていのブラウザでは、画像の上にマウスのカーソルを置き続けると、alt要素で書いた言葉が表示されます。

alt属性は絶対に書かなければいけません。もし特に意味のない画像を貼り付けて、説明のしようがない場合は、「alt=""」と、属性だけ書いて、値を空にすればいいでしょう。

width属性とheight属性

IMG要素には、画像の横幅を表すwidth属性と縦幅を表すheight属性というものもあります。

例えばさっきの画像の元のサイズは横が89、縦が100ピクセル（パソコンでは長さはピクセルという単位がよく使われます）です。これをwidth属性とheight属性を使って書くと以下のようになります。

<img src="neko.jpg" alt="ねこ" width="89" height="100">

これらの属性は絶対に書かなければいけないわけではありませんが、書いたほうがスムーズに画像が表示されるようです。

IMG要素を使って表示させた画像は、A要素のタグの間に挟むことができます。つまり下のように、画像をクリックしたら、他のページへ飛ぶようにリンクさせることもできるということです。

（ソースは「<a href="http://te-koku.com/hp/"><img src="pen1_01.gif" alt="ぺそぎん"></a>」）。

が、これには一つ問題点があり、多くのブラウザではA要素の中にIMG要素を書いてリンクさせると、img要素で貼り付けた画像の周りに枠線ができてしまいます。

これを消すためによく使われているのがborder属性で、さっきの例で枠線を消したいなら以下のようになります。

<a href="http://te-koku.com/hp/"><img src="pen1_01.gif" alt="ぺそぎん" border="0"></a>

逆に、枠線を表示させたいのならborder属性の値を"1"や"2"などにします。数字が多ければ枠線は太くなります。

しかし、このやり方はおすすめできる方法ではないです。しょせん、枠線というのは見た目に関わるものなので、スタイルシートを使いましょう。その方が一つ一つの画像にborder属性を書かずにすむので楽です。

まずは、このページの例で出したねこさんの絵を、htmlファイルが置かれているフォルダに、右クリックからダウンロードして保存してください。

いつものhtmlファイルを開いて、h2で見出しを作り、「画像を貼り付けてみる」と書いてください。

その下にP要素で段落を作って、その中に以下のようにIMG要素を使って、同じフォルダに保存したねこさんの絵を表示させましょう。src属性とalt属性はもちろん、ここではwidth属性とheight属性も書いておきます。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">

中略

<p>
<img src="neko.jpg" alt="ねこ" width="89" height="100">
</p>

このように、単に画像を表示させるだけの場合も、IMG要素はP要素のタグで挟んだ方が好ましいです。

右クリック→「タグの挿入」→「画像」にある「画像の挿入」でimg要素を入力することができます。タグパレットなら「カスタム」の右から五番目のアイコンか、「リンク/画像」の一番右のアイコンです。

alt属性は自動的に挿入されます。width属性、height属性、border属性などは、アイコンをクリックした後の画面で設定できます。