| カラーコード / サイトについて / リンク集 / お問い合わせ |
|
|
|
→ 画像を表示する
→ 画像に枠をつける
|
画像を表示する
img要素の src属性 で画像のurlを指定すると、ページに画像を表示することができます。このimg要素には終了タグがありません。
urlは相対パス・絶対パスのどちらで指定してもかまいません。画像をページに表示するときは著作権などを確認してから表示したほうが良いでしょう。
<img src="../img/sample.gif">
-表示結果-
 画像の大きさを変える
img要素の width属性 height属性 の２つで画像の大きさを変えることができます。属性値には半角数字を指定します。
width属性は、画像の長さ（横の長さ）を、height属性は画像の縦の長さを指定します。
<img src="../image/sample.gif" width="200" height="40">
-表示結果-
画像に枠をつける
img要素の border属性 で画像の枠を指定することができます。属性値は半角数字で指定します。枠を付けない場合、属性値を0にしておきましょう。
<img src="../image/sample.gif" border="3">
-表示結果-
代替テキストの指定
img要素の alt属性 で代替の指定ができます。代替テキストとは、何らかの理由で画像が表示されなかった場合に表示するテキストのことです。結構便利なので指定しておきましょう。
ただしNetscapeでは、効果かないようです。下の表示結果ではわざと画像が表示されないようにしています。
<img src="./sample.gif" alt="表示されない場合はこうなります">
-表示結果-
 テキストとの位置関係を指定する
img要素の align属性 で画像とテキストとの位置を指定できます。属性値にはtop、middle、bottomの３つを指定することができ、topは画像に対して上、middleは真ん中、bottomは下になります。
<img src="../image/sample.gif" align="top">align属性をtopに指定<br>
<img src="../image/sample.gif" align="middle">align属性をmiddleに指定<br> <img src="../image/sample.gif" align="bottom">align属性をbottomに指定 -表示結果-
align属性をtopに指定align属性をmiddleに指定align属性をbottomに指定 |
 |