イメージの貼り付け

ここではイメージの貼り付け方法を説明します。



　　ソースファイルを開きます。

　　イメージタグを記述します。
　　　　<img src="****.***">　…　ファイル****.***を画面左に張り付ける
　　　　　　　末尾に改行タグ<br>をつけないと、次の文字とイメージが続いてしまう。

　　　　<img src="****.***" alt="○○○">　…　画像が表示されるまで、○○○の文字が表示される


１．改行タグがないと、表示が変に

ブラウザでの表示 ソースファイル
（改行タグをつけない場合）
これが、プレーリードッグの 写真です 		（改行タグをつけない場合）<br>
これが、プレーリードッグの
<img src="pd.jpg">
写真です
（改行タグをつけた場合）
これが、プレーリードッグの

写真です
 （改行タグをつけた場合）<br>
これが、プレーリードッグの<br>
<img src="pd.jp"g><br>
写真です<br>


２．画面の中央に表示する

　　　　<center><img src="****.***"></center>　…　ファイル****.***を画面中央に張り付ける


ソースファイル
中央指定<br>
<center><img src="pd.jpg"></center>
ブラウザでの表示
中央指定


３．イメージを右側に表示する

　　　　<img src="****.***" align="right">　…　ファイル****.***を画面右に、文字をその左に表示する
　　　　<img src="****.***" align="left">　…　ファイル****.***を画面左に、文字をその右に表示する
　　　　<br clear="all">　…　文字（テキスト）の回り込みの解除


ソースファイル
右指定とテキストの回り込み解除<br>
<img src="pd.jpg" align="right">
これが、プレーリードッグの写真です。<br>
かわいいでしょう。<br>
<br clear="all">
これで、テキストの回り込みが解除されました。<br>
ブラウザでの表示
右指定とテキストの回り込み解除
これが、プレーリードッグの写真です。
かわいいでしょう。

これで、テキストの回り込みが解除されました。


　　　　<img src="****.***" align="top">　　…　画像の右上に次の文字を表示する
　　　　<img src="****.***" align="middle">　…　画像の右中央に次の文字を表示する
　　　　<img src="****.***" align="bottom">　…　画像の右下に次の文字を表示する


ソースファイル
（右中央指定とテキストの回り込み解除の例）<br>
<img src="pd.jpg" align="middle">
これが、プレーリードッグの写真です。<br>
かわいいでしょう。<br>
ブラウザでの表示
（右中央指定とテキストの回り込み解除の例）
これが、プレーリードッグの写真です。
かわいいでしょう。


４．大きさを変えて表示する
　　　　ここの方法で変更できるが、元の画像のサイズを変える方がよい。

　　　　<img src="****.***" width="200" height="100">　…　幅を２００ピクセル、高さを１００ピクセルに指定
　　　　　　　　　　　　　　　　　　　　（片方だけを指定すると変形しない）
　　　　<img src="****.***" width="50%">　…　画像の大きさを画面の５０％に拡大または縮小する

ブラウザでの表示 ソースファイル
幅を２００ピクセル、高さを１００ピクセル
 幅を２００ピクセル、高さを１００ピクセル<br>
<img src="pd.jpg" width="200" height="100">
高さを１００ピクセル
 高さを１００ピクセル<br>
<img src="pd.jpg" height="100">
画像の大きさを画面の５０％
 画像の大きさを画面の５０％<br>
<img src="pd.jpg" width="50%">


５．枠をつけて、表示する

　　　　<img src="****.***" border="1">　…　画像の枠を１ピクセルに指定


ブラウザでの表示 ソースファイル
画像の枠を０ピクセル、つまり枠なし
 画像の枠を０ピクセル、つまり枠なし<br>
<img src="pd.jpg">
画像の枠を５ピクセル
 画像の枠を５ピクセル<br>
<img src="pd.jpg" border="5">
表にして、外枠を１０ピクセル、内枠を１０ピクセルとり赤で塗りつぶす。
 表にして、外枠を１０ピクセル、内枠を１０ピクセルとり　gaku.gif　で塗りつぶす。<br>
<table border="10" cellspacing="10" bgcolor="red">
<td><img src="pd.jpg"></td>
</table>
表にして、外枠を１０ピクセル、内枠を１０ピクセルとり　gaku.gif　で塗りつぶす。
 表にして、外枠を１０ピクセル、内枠を１０ピクセルとり　gaku.gif　で塗りつぶす。<br>
<table border="10" cellspacing="10" background="gaku.gif">
<td><img src="pd.jpg"></td>
</table>



６．周りに空白をあける

　　　　<img src="****.***" hspace="10" vspace="20">　…　画像の左右に１０ピクセル、上下に２０ピクセルの空白をあける


ブラウザでの表示 ソースファイル
画像の左右に空白をあけない
 画像の左右に空白をあけない<br>
<img src="pd.jpg">
画像の左右に３０ピクセル、上下に２０ピクセルの空白をあける
 画像の左右に３０ピクセル、上下に２０ピクセルの空白をあける<br>
<img src="pd.jpg" hspace="30" vspace="20">



　　ソースファイルを上書き保存します。

　　ブラウザで更新し、確認する。