画像を貼り付ける

 画像を貼り付ける場合には、IMG要素を使うことになります。

 使いたい画像のURLをsrc属性の後ろにつけ、更にalt属性で画像が表示できない環境用に表示する文章を入力します。src、altともにHTML4.01以降必須の属性ですので、省略しないようにしましょう。特に、alt属性は忘れやすいので気をつけましょう。仮に、何の意味のない単なる線だとかの飾り用の画像である場合は代替テキストは必要ないかもしれませんが、その場合もaltは省略不可ですので、alt=""としておきましょう(属性を指定する必要がない場合は省略できる、の例外)。alt属性は、「もしそこに画像を置くのをやめ、文章で伝えようとしたらどういう文章を入れることになるのかな……」と考えると、いい考えが浮かぶかもしれません。

 widthとheightの各属性は、画像のサイズを実際に表示されるサイズ(単位:ピクセル)で表記します。実際のサイズいかんを問わず、ここで設定したサイズで固定されます。この2つは必須ではありませんが、設定しておいた方が無難です。サイズを指定しておくと、ブラウザは画像のサイズがあらかじめ分かっているのですから、「とりあえず画像の部分は任せたから、あと俺は先読むぞ」という処理を行います。ところがこれがサイズ指定してない場合、「とりあえずここに画像があって……まあ、32×32くらいで間を開けといてやるか……で、画像はと……あ、そこにあった……何~、もっとでかいじゃねーか、クソっ、サイズ加工しなおしじゃドアホウ! 先も読めんし、あーうっとうしい!」ということになってしまいます(このとき、パソに若干の負担がかかっているのは言うまでもない)

 なお、画像は容量が大きめなので、あまりべたべた貼るとページの読み込みが遅くなったりする可能性がありますので、ほどほどに……。

 余談。管理人はIMG要素のsrc属性を、searchの略だと思い込んでいましたが、実際はどうやらsourceらしいです……。

非推奨の要素<IMG align="( top | middle | bottom )" align="( left | right )" border="*" vspace="*" hspace="*">

 IMG要素のalign属性はどういうわけか2種類あり、一つは後に続く文字列の縦の位置を規定するもの、もう一つが画像自体の配置位置を規定するものです。前者の属性値としてtop,middle,bottomがあり(デフォルトはbottomで、画像の一番下から次の文字列が始まる)、後者の属性値としてleft,right(デフォルトで規定されず)があります。画像の周りにテキストが回りこんでいる状態をある文章の区切りから強制的に修正する場合は、BR要素のclear属性を指定するか、もしくはスタイルシート頼りになります。

 border属性で、画像の周囲に枠を表示させることが出来ます。一般的なブラウザでは、通常は枠が表示されませんが、その画像をA要素で囲い、クリックすることで別のページに飛べるリンクにした場合に限り枠が表示されるようになります。これを防ぐには、リンクにする画像にborder="0"を設定することになります。

 vspace,hspaceの各属性は画像の周囲に空間を設けることが出来る属性で、vspace属性に値を入れると画像の上下に、hspace属性に値を入れると画像の左右に各々空白部分を作ることが出来、見た目にも読みやすくなります。