画像を効果的にはる

画像を貼りつける
<img src="画像のURL">

「<img src="http://image.space.rakuten.co.jp/lg01/84/0000252084/45/img6d5cece9zik0zj.jpeg" width="100" height="100" alt="kyon.jpg">」

画像に文字を回りこませる（属性値は「right」「left」）
<IMG SRC="～.jpg" align="属性値">

「<IMG SRC="～.jpeg">そのまま文字を書くと、文字は画像の下に書き込まれます」

そのまま文字を書くと、文字は画像の下に書き込まれます

このように画像につづいて文章を書くと、
勝手に画像の下に文章が回りこんでしまいます。

ここで、「align」属性をつかってみましょう。
今回は、属性値に「left」「right」を入れてみます。

「<IMG SRC="～.jpg" align="left">このように画像の回りにいくつも段落を表示する事ができます。」

このように画像の回りにいくつも段落を表示する事ができます。

「<IMG SRC="～.jpg" align="right">このように画像の回りにいくつも段落を表示する事ができます。」

このように画像の回りにいくつも段落を表示する事ができます。

このように画像の左右に文章を回り込ませることができました。
もし、文章の量が画像の高さに収まらないときは、画像の下にはみでます。

回り込みを解除する（属性値は「left」「right」「all」）
<br clear="属性値">

※画像の位置を左にしたときは「left」、右になら「right」
　「all」をいれると画像がどちらにあっても、回り込みが解除されます。

「<IMG SRC="～.jpg" align="left">
　位置を指定して文字を書くと、
　このように画像の回りにいくつも
　<br clear="left">段落を表示する事ができます。」

位置を指定して文字を書くと、このように画像の回りにいくつも
段落を表示する事ができます。