モックン☆彡の部屋

画像とテキスト

画像とテキスト

今回使うタグ
< IMG src="画像のアドレス" width="" height="" alt="" align="" >

画像の基本タグ

< IMG src="画像のアドレス" width="" height="" alt="" >

に『 align="" 』が追加された形ですね。

『 テーブルでせいとん３（低） 』や『 テーブルで整頓２（高） 』でも紹介しましたが、

『 align="" 』にはそれぞれ『 top 』、『 middle 』、『 bottom 』が入り、

画像のタグに付けると効果は以下のようになります。

結果	実際に書くもの
alignにtopを指定	< P > alignに < IMG src=" 画像のアドレス " width="68" height="48" alt="cake" align="top" > topを指定 </ P >
alignにmiddleを指定	< P > alignに < IMG src=" 画像のアドレス " width="68" height="48" alt="cake" align="middle" > middleを指定 </ P >
alignにbottomを指定	< P > alignに < IMG src=" 画像のアドレス " width="68" height="48" alt="cake" align="bottom" > bottomを指定 </ P >

[注意]　

画像のアドレス

は『 http://plaza.rakuten.co.jp/img/user/87/20/1128720/169.jpg 』です。

短い文章の説明だったら上のタグだけで大丈夫ですが、

もっと多くの説明を画像の横に書いたり、画像にテキスト（文字）を回り込ませたい場合は、

まず右、左どちらに 画像を 配置したいか考え、『 align="" 』に入れます。

画像を右 に配置させたいならば『 align=" right " 』を、

画像を左 に配置させたいならば『 align=" left " 』を入れます。

文章を 右、左ではないので注意して下さい。

最後に回り込み文字を終了させるタグ   を入れます。

『 clear="" 』の中には、右ならば『   』を、

左ならば『   』を入れます。

つまり、整理すると順序は以下のようになります。

< IMG src="画像のアドレス" width="" height="" alt="" align=" right 　or　 left " >

↓　↓　↓

１行では書ききれないような、なが～～い説明文

↓　↓　↓

 

実際に例を挙げると下のようになります。

《例題１》

画像が右の場合『 align="right" 』	画像が左の場合『 align="left" 』
これはコージーコーナーでセールの時に買ったケーキです。とても美味しくてバクバク食べてしまいました。決してコージーコーナーの回し者ではありません。	これはコージーコーナーでセールの時に買ったケーキです。とても美味しくてバクバク食べてしまいました。決してコージーコーナーの回し者ではありません。

また、回り込みを途中で止めるには、『   』を

文章の途中で書くと回り込みが解除されます。

感じ的には下のようになるけど、上の例題と比べるとどこでタグを使っているか分かるかも！？

画像が右の場合『 align="right" 』	画像が左の場合『 align="left" 』
これはコージーコーナーでセールの時に買ったケーキです。とても美味しくてバクバク食べてしまいました。決してコージーコーナーの回し者ではありません。	これはコージーコーナーでセールの時に買ったケーキです。とても美味しくてバクバク食べてしまいました。決してコージーコーナーの回し者ではありません。

ちなみに、画像が右の場合は下のように書いています。

< IMG src="画像のアドレス" width="120" height="90" alt="cake" align="right" > これはコージーコーナーでセールの時に買ったケーキです。   とても美味しくてバクバク食べてしまいました。決してコージーコーナーの回し者ではありません。

最後に、画像と文字との間隔を空ける方法を書きます。

それは、画像のタグに『 vspace="" 』と『 hspace="" 』を入れます。

『 "" 』の中には数字が入り、数が大きいほど画像と文字の間隔が開いていきます。

『 vspace="" 』と『 hspace="" 』の説明は下の通りです。

vspace=""	…	画像と文字の縦間隔を調節
hspace=""	…	画像と文字の横間隔を調節

例えば 《例題１》 で、『 vspace="15" 』、『 hspace="30" 』とすると下のようになるよ。

画像が右の場合『 align="right" 』	画像が左の場合『 align="left" 』
これはコージーコーナーでセールの時に買ったケーキです。とても美味しくてバクバク食べてしまいました。決してコージーコーナーの回し者ではありません。	これはコージーコーナーでセールの時に買ったケーキです。とても美味しくてバクバク食べてしまいました。決してコージーコーナーの回し者ではありません。