画像の周囲に文章を回りこませる方法

◎ 画像の周囲に文章を回りこませて表示する方法

　このように、写真やバナーなどの画像を挿入し、そのまま文章を記述すると文章が画像の下に表示されてしまいます。この場合、<img>タグに「align 属性」を追加することで、文章を画像の右や左に回りこませて表示することができるようになります。

■文章を画像の右に回りこませて表示 （表示例を兼ねる）

画像の左右に文字を回りこませるには、画像を表す<img>タグに、
画像と文字の位置関係を表す「align 属性」を設定します。
ここでは、「align 属性」に「left」を指定しているので、
文章は画像の右側に回りこんで表示されます。
「left」を「right」にすれば、文章は画像の左側に回りこみます。


●記述例
<img src="画像へのパス（URL）"
alt="" border="0" align="left" style="padding-right:10px;">文章

　※ align="left" ⇒ 画像を左側に指定する
　※ style="padding-right:10px;" ⇒ 文章と画像の間隔を開ける

記事の内容にご満足戴けましたならクリックをお願いします ↓
ＪＲＡＮＫブログランキング FC2ブログランキング 人気blogランキング！

できるホームページスタイルシート入門―Windows対応
速習Webテクニック スタイルシート 上級レイアウト