12. 画像貼り付け

CHECK POINTS
<IMG>	float	clear
■画像貼り付け

★ 実行例 [12-1]：「画像サイズを指定」




画像サイズ 120 X 90

いろはにほへとちりぬるを、

わかよたれそつねならむ、うゐのおくやまけふこ

えて、あさきゆめみし、ゑひもせすん。色は匂へ

ど散りぬるを、わが世誰ぞ常ならむ、有為の奥山

今日越えて、浅き夢見じ酔ひもせず。





★ 実行例 [12-2]：「サイズ・位置・右余白を設定」




位置 left, 右余白 0.6em を追加

いろはにほへとちりぬるを、

わかよたれそつねならむ、う

ゐのおくやまけふこえて、あ

さきゆめみし、ゑひもせす

ん。色は匂へど散りぬるを、

わが世誰ぞ常ならむ、有為

の奥山今日越えて、浅き夢見じ
酔ひもせず。





★ 実行例 [12-3]：「サイズ・位置・右余白・回り込み解除を設定」




回り込み解除 clear: left を追加

いろはにほへとちりぬるを、

わかよたれそつねならむ、う

ゐのおくやまけふこえて、あ

さきゆめみし、ゑひもせす

ん。

色は匂へど散りぬるを、わが世誰ぞ常ならむ、有

為の奥山今日越えて、浅き夢見じ酔ひもせず。





12-3.html


<HTML>
<HEAD>
<TITLE>HTML 4.01 WORKBOOK</TITLE>
<STYLE type="text/css">
 H1  {font-size: 1em}
 P   {font-size: 0.92em; width: 21em}
 IMG {width: 120px; height: 90px; float: left; margin-right: 0.6em; margin-bottom: 0.6em}　
</STYLE>
</HEAD>
<BODY>
<H1>回り込み解除 clear: left を追加</H1>
<P><IMG Src="robot-s.jpg" Alt="ロボット">
いろはにほへとちりぬるを、わかよたれそつねならむ、
うゐのおくやまけふこえて、あさきゆめみし、ゑひもせすん。
<SPAN Style="clear: left">
色は匂へど散りぬるを、わが世誰ぞ常ならむ、有為の奥山
今日越えて、浅き夢見じ酔ひもせず。</SPAN>
</BODY>
</HTML>