img タグの使い方
画像を貼り付ける
gifファイルなどの画像を呼び出す
ホームページに彩りを与えてくれるものに、絵や写真があります。
imgタグは、それらを好きな位置に取り込むことができるタグなんです。
イメージタグは、挿入したいイメージデータのURLを示すことで、好きな位置に画像を見せることができるタグです。終了タグはありません。
<img src="リンク先のURL">
例
<img src="img/eshop.gif">
imgというフォルダ中の、eshop.gifというイメージファイルを挿入
表示例↓
imgタグでは、イメージが表示されなかった場合に備え、代替テキストを用意するalt属性を使うこともできます。alt属性を使った場合、マウスをポイントすると説明が表れます。バナーの上にマウスを置いてみてください。
<img src="リンク先のURL" alt="代替テキスト">
例
<img src="img/eshop.gif" alt="イーショップ月寒のイメージバナー">
表示例↓
イメージのサイズを変えたり、イメージに境界線をつけることができます。
境界線borderの数字が０ならば、線は表れません。
<img src="URL" width="横サイズ" height="縦サイズ">
<img src="URL" border="数字">
例
<img src="img/eshop.gif" width="60" height="50"
border="5">
表示例↓
イメージとテキスト（文章）を合わせて表示させたいことがあります。
画像の位置と文の位置が上手に収まらない場合もありますね。
イメージとテキストの位置関係を決めるのがalign属性です。
また、イメージの横や上下に余白を設けたい時に使うのがvspaceと hspaceです。
数字はピクセルとなってます。
<!-- 回り込み -->
<img align="left,right"> ...１
<img align="top か middle,bottom"> ...２
<!-- 余白 -->
<img align="left か right" vspace="数字" hspace="数字">
...３
一口メモ
１のleft や rightを使う場合の注意があります。
align="left"とした場合、イメージが左で、テキストが右となります。
間違いやすいので気をつけてください。
２では、topは上。 middleは真ん中で bottomが下となります。
上や下に、イメージとテキストが揃って表示されます。テキストだけではなく、イメージの位置も一緒に指定する属性です。
vspaceは縦方向の余白。 hspaceは横方向の余白です。
|
