4.8 画像を貼る

4.8.1 画像の貼りつけ - <img>タグ

画像の貼りつけには<img>タグを使用します． src属性には貼りつける画像ファイルの場所をURLで指定します． alt属性には画像が表示される前，または画像が表示されないWebブラウザを使っている場合などに，代わりに表示される文字を指定します． alt属性がないと，画像が表示されない場合に情報が欠落することになるので，必ず指定してください．

Webブラウザで表示可能な画像についてはを参照してください．

 <img src="画像ファイルのURL" alt="画像の説明">

width属性，height属性
width属性で画像の横幅， height属性でWebブラウザで表示される画像の縦幅を指定します．本来の画像の大きさと異なった値を指定した場合は，画像が指定したサイズに拡大，縮小されます．両属性とも，ピクセル() または割合(%)のどちらでも指定できます．

 <img src="画像ファイルのURL" alt="画像の説明" width="横幅" height="縦幅">

図に<img>タグを用いた例を示します．

図: <img>タグのサンプル
<img src="lounge.jpg" width="200" alt="カモ池からみたラウンジ"><br> sfc生には、ラウンジが好きって人もいますよね。学食でもごはんは食べられるけど、いつも休憩はラウンジ派って人、けっこういます。カモ池もすぐそば… </p> <p> <img src="omicron.jpg" width="15%" alt="オミクロン前の石畳"><br> ここはオミクロン棟の前です。インテンシブの休憩の時間や、お昼どきになると多くの学生が通ります。敷かれている石と石との間がけっこう空いているので… </p>
↓

図: <img>タグのサンプル


<img src="lounge.jpg" width="200" alt="カモ池からみたラウンジ"><br>
sfc生には、ラウンジが好きって人もいますよね。学食でもごはんは食べられるけど、いつも
休憩はラウンジ派って人、けっこういます。カモ池もすぐそば…
</p>
<p>
<img src="omicron.jpg" width="15%" alt="オミクロン前の石畳"><br>
ここはオミクロン棟の前です。インテンシブの休憩の時間や、お昼どきになると多くの学生が
通ります。敷かれている石と石との間がけっこう空いているので…
</p>

↓