モックン☆彡の部屋

モックン☆彡の部屋

画像とテキスト

画像とテキスト


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


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

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

テーブルでせいとん3(低) 』や『 テーブルで整頓2(高) 』でも紹介しましたが、

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

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

結果 実際に書くもの

alignにcaketopを指定

< P > alignに
< IMG src=" 画像のアドレス " width="68" height="48" alt="cake" align="top" >
topを指定 </ P >

alignにcakemiddleを指定

< P > alignに
< IMG src=" 画像のアドレス " width="68" height="48" alt="cake" align="middle" >
middleを指定 </ P >

alignにcakebottomを指定

< 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 " 』を入れます。

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

最後に回り込み文字を終了させるタグ < BR clear="" > を入れます。

clear="" 』の中には、 ならば『 < BR clear=" right " > 』を、

ならば『 < BR clear=" left " > 』を入れます。

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

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

↓ ↓ ↓

1行では書ききれないような、なが~~い説明文

↓ ↓ ↓

< BR clear=" right  or  left " >

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

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

また、回り込みを途中で止めるには、『 < BR clear=" right  or  left " > 』を

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

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

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

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

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


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

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

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

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

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

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

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

どうです?違いがわかりましたか?

せっかく画像を貼り付けるのでしたら説明文も追加してみてはいかがでしょうか。

テーブルタグも合わせると上の例題のように綺麗にまとまりますよ♪







© Rakuten Group, Inc.
X
Design a Mobile Site
スマートフォン版を閲覧 | PC版を閲覧
Share by: