作成ネット収入HP「あくせすポイント」
トップ >  ホームページ作成 > これだけは譲れないタグ! > aタグの使い方

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">       ...1
<img align="top か middle,bottom"> ...2


<!-- 余白 -->
<img align="left か right" vspace="数字" hspace="数字">
                   ...3

一口メモ
1のleft や rightを使う場合の注意があります。
align="left"とした場合、イメージが左で、テキストが右となります。
間違いやすいので気をつけてください。

2では、topは上。 middleは真ん中で bottomが下となります。
上や下に、イメージとテキストが揃って表示されます。テキストだけではなく、イメージの位置も一緒に指定する属性です。

vspaceは縦方向の余白。 hspaceは横方向の余白です。

<>


Copyright(C)AccessPoint by Tukioyaji ページトップ
メールする