　☆ Sanctuary ☆　　Smile for you

ＩＭＧタグ

イメージタグ　<img>　の使い方を覚えよう！！

img タグは、HTML 文書内に画像を配置する命令です。
画像の形式としては、GIF、JPEG、PNG 形式が利用できます。

● テキスト内の任意の位置に画像を配置させるには？

ここでは、画像にテキストを回り込ませる方法を行ってみましょう！！

↓こんな感じのを作ってみます。

【石川麻衣】
1982年11月28日生まれ。A型。
Michael Jackson の映画を観て、小さい時から現在に至るまでのストーリーや歌を」身体とリズムにのせて表現する素晴らしさに感動し、後に Whitney HoustonのLiveVideoを見て、シンガーに憧れ、洋楽に興味を持つようになる。
中学2年生の頃からシンガーになりたい、と強く思い始めデモテープ作りも始める。高校生になると現在のレコード会社 JIXA studio のスタッフと出会いデビューに向けて始動する……

まず、画像と説明文を用意し、img タグの下に説明文を書きます。
全体のサイズを 400 に、文字サイズは 10pt に、行間は 150% にしておきます。
また、説明文を <br> タグを使って、適当なところで改行しておきます。
背景は、淡いピンク色 ( bgcolor="#FFE0FF" ) を使用してみます。

<table bgcolor="#FFE0FF" border="1" cellspacing="0" cellpadding="0" width="400" style="font-size:10pt;line-height:150%;">
<tr><td align="left" valign="top">
<img src="http://plaza.rakuten.co.jp/img/user/98/02/1639802/116.jpg" alt="石川真衣" width="100" height="140" border="0">
【石川真衣】<br> 1982年11月28日生まれ。A型。<br> Michael Jackson の映画を観て、小さい時から現在に至るまでのストーリーや歌を」身体とリズムにのせて表現する素晴らしさに感動し、後に Whitney HoustonのLiveVideoを見て、シンガーに憧れ、洋楽に興味を持つようになる。<br> 中学2年生の頃からシンガーになりたい、と強く思い始めデモテープ作りも始める。高校生になると現在のレコード会社 JIXA studio のスタッフと出会いデビューに向けて始動する……
</td></tr>
</table>

↓こんな感じになります。

【石川真衣】
1982年11月28日生まれ。A型。
Michael Jackson の映画を観て、小さい時から現在に至るまでのストーリーや歌を」身体とリズムにのせて表現する素晴らしさに感動し、後に Whitney HoustonのLiveVideoを見て、シンガーに憧れ、洋楽に興味を持つようになる。
中学2年生の頃からシンガーになりたい、と強く思い始めデモテープ作りも始める。高校生になると現在のレコード会社 JIXA studio のスタッフと出会いデビューに向けて始動する……

( ・o・)b このままだと体裁がよくないので整えなければいけませんね。
テキスト(説明文)を画像に回り込ませるには img タグの align 属性を使用します。( align="left" )
align="left" とというは、テキストの左に画像を配置させるという意味です。

<table bgcolor="#FFE0FF" border="1" cellspacing="0" cellpadding="0" width="400" style="font-size:10pt;line-height:150%;">
<tr><td align="left" valign="top">
<img src="http://plaza.rakuten.co.jp/img/user/98/02/1639802/116.jpg" alt="石川真衣" width="100" height="140" border="0" align="left" >
【石川真衣】<br> 1982年11月28日生まれ。A型。<br> Michael Jackson の映画を観て、小さい時から現在に至るまでのストーリーや歌を」身体とリズムにのせて表現する素晴らしさに感動し、後に Whitney HoustonのLiveVideoを見て、シンガーに憧れ、洋楽に興味を持つようになる。<br> 中学2年生の頃からシンガーになりたい、と強く思い始めデモテープ作りも始める。高校生になると現在のレコード会社 JIXA studio のスタッフと出会いデビューに向けて始動する……
</td></tr>
</table>

↓こんな感じになります。

( ・o・)b 画像のまわりにテキストが隙間なくくっついてしまっているので、
適当な間隔をあけてみます。
画像の縦間隔を指定するには vspace 属性を、画像の横間隔を指定するには hspace 属性を
使用します。今、適当な間隔をあけるために、vspace="5" hspace="10" と指定してみます。

<table bgcolor="#FFE0FF" border="1" cellspacing="0" cellpadding="0" width="400" style="font-size:10pt;line-height:150%;">
<tr><td align="left" valign="top">
<img src="http://plaza.rakuten.co.jp/img/user/98/02/1639802/116.jpg" alt="石川真衣" width="100" height="140" border="0" align="left" vspace="5" hspace="10" >
【石川真衣】<br> 1982年11月28日生まれ。A型。<br> Michael Jackson の映画を観て、小さい時から現在に至るまでのストーリーや歌を」身体とリズムにのせて表現する素晴らしさに感動し、後に Whitney HoustonのLiveVideoを見て、シンガーに憧れ、洋楽に興味を持つようになる。<br> 中学2年生の頃からシンガーになりたい、と強く思い始めデモテープ作りも始める。高校生になると現在のレコード会社 JIXA studio のスタッフと出会いデビューに向けて始動する……
</td></tr>
</table>

↓こんな感じになります。

( ・o・)b これでだいぶ良くなりました。最後に外枠との間隔をあけてみます。
そのためには、table タグの属性の cellpadding を使用します。
今、cellpadding="10" として見ます。

<table bgcolor="#FFE0FF" border="1" cellspacing="0" cellpadding="10" width="400" style="font-size:10pt;line-height:150%;">
<tr><td align="left" valign="top">
<img src="http://plaza.rakuten.co.jp/img/user/98/02/1639802/116.jpg" alt="石川真衣" width="100" height="140" border="0" align="left" vspace="5" hspace="10">
【石川真衣】<br> 1982年11月28日生まれ。A型。<br> Michael Jackson の映画を観て、小さい時から現在に至るまでのストーリーや歌を」身体とリズムにのせて表現する素晴らしさに感動し、後に Whitney HoustonのLiveVideoを見て、シンガーに憧れ、洋楽に興味を持つようになる。<br> 中学2年生の頃からシンガーになりたい、と強く思い始めデモテープ作りも始める。高校生になると現在のレコード会社 JIXA studio のスタッフと出会いデビューに向けて始動する……
</td></tr>
</table>

↓こんな感じになります。

( ^o^)b これで出来上がりました。画像とテキストがきれいに収まっていますね。

( ・o・)b さて！画像を右に配置させるには、どうしたらいいのでしょう！
その場合は、img タグの align 属性で画像を右寄せ指定します。( align="right" )

<table bgcolor="#FFE0FF" border="1" cellspacing="0" cellpadding="10" width="400" style="font-size:10pt;line-height:150%;">
<tr><td align="left" valign="top">
<img src="http://plaza.rakuten.co.jp/img/user/98/02/1639802/116.jpg" alt="石川真衣" width="100" height="140" border="0" align="right" vspace="5" hspace="10">
【石川真衣】<br> 1982年11月28日生まれ。A型。<br> Michael Jackson の映画を観て、小さい時から現在に至るまでのストーリーや歌を」身体とリズムにのせて表現する素晴らしさに感動し、後に Whitney HoustonのLiveVideoを見て、シンガーに憧れ、洋楽に興味を持つようになる。<br> 中学2年生の頃からシンガーになりたい、と強く思い始めデモテープ作りも始める。高校生になると現在のレコード会社 JIXA studio のスタッフと出会いデビューに向けて始動する……
</td></tr>
</table>

↓こんな感じになります。

【石川真衣】
1982年10月28日生まれ。B型。
Michael Jackson の映画を観て、小さい時から現在に至るまでのストーリーや歌を」身体とリズムにのせて表現する素晴らしさに感動し、後に Whitney HoustonのLiveVideoを見て、シンガーに憧れ、洋楽に興味を持つようになる。
中学2年生の頃からシンガーになりたい、と強く思い始めデモテープ作りも始める。高校生になると現在のレコード会社 JIXA studio のスタッフと出会いデビューに向けて始動する……

( ・o・)b 今度は画像を左下に配置してみます。HTML の img タグの位置に注意して下さい。

<table bgcolor="#FFE0FF" border="1" cellspacing="0" cellpadding="10" width="400" style="font-size:10pt;line-height:150%;">
<tr><td align="left" valign="top">
【石川真衣】<br> 1982年11月28日生まれ。A型。<br>
Michael Jackson の映画を観て、 <img src="http://plaza.rakuten.co.jp/img/user/98/02/1639802/116.jpg" alt="石川真衣" width="100" height="140" border="0" align="left" vspace="5" hspace="10"> 小さい時から現在に至るまでのストーリーや歌を」
身体とリズムにのせて表現する素晴らしさに感動し、後に Whitney HoustonのLiveVideoを見て、シンガーに憧れ、洋楽に興味を持つようになる。<br>
中学2年生の頃からシンガーになりたい、と強く思い始めデモテープ作りも始める。高校生になると現在のレコード会社 JIXA studio のスタッフと出会いデビューに向けて始動する……
</td></tr>
</table>

↓こんな感じになります。

【石川真衣】
1982年11月28日生まれ。A型。
Michael Jackson の映画を観て、

小さい時から現在に至るまでのストーリーや歌を」身体とリズムにのせて表現する素晴らしさに感動し、後に Whitney HoustonのLiveVideoを見て、シンガーに憧れ、洋楽に興味を持つようになる。
中学2年生の頃からシンガーになりたい、と強く思い始めデモテープ作りも始める。高校生になると現在のレコード会社 JIXA studio のスタッフと出会いデビューに向けて始動する……

( ・o・)b かなり img タグを置く位置が微妙です。これは、何回も試してみて、画像が適当な
位置に配置されるのを確認することが必要です。
それでは、今度は画像を右下に配置させてみましょう！( align="right" )

<table bgcolor="#FFE0FF" border="1" cellspacing="0" cellpadding="10" width="400" style="font-size:10pt;line-height:150%;">
<tr><td align="left" valign="top">
【石川真衣】<br> 1982年11月28日生まれ。A型。<br>
Michael Jackson の映画を観て、 <img src="http://plaza.rakuten.co.jp/img/user/98/02/1639802/116.jpg" alt="石川真衣" width="100" height="140" border="0" align="right" vspace="5" hspace="10"> 小さい時から現在に至るまでのストーリーや歌を」
身体とリズムにのせて表現する素晴らしさに感動し、後に Whitney HoustonのLiveVideoを見て、シンガーに憧れ、洋楽に興味を持つようになる。<br>
中学2年生の頃からシンガーになりたい、と強く思い始めデモテープ作りも始める。高校生になると現在のレコード会社 JIXA studio のスタッフと出会いデビューに向けて始動する……
</td></tr>
</table>

↓こんな感じになります。

【石川真衣】
1982年11月28日生まれ。A型。
Michael Jackson の映画を観て、

( ・o・)b 画像とテキストの位置関係は何度も試して確認する必要があります。
今回は img タグで画像の配置のしかたについてお話しました。
それでは、みんなもく(￣Д￣)ﾉｶﾞﾝﾊﾞﾛｰｰｰ♪