<IMG align="">画像にテキストを回り込ませる

<IMG>タグのalign属性の値に「left」、または「right」を指定すると、画像が左または右寄せで配置され、テキストがその横に回り込むようになります。 収まりきらないテキストは、画像の下に配置されます。

回り込みを解除したい場合には、<BR clear="">を使用して下さい。

また画像とテキストの縦の位置関係を設定したい場合は、align属性の値にtop、middle、bottomを指定します。 これについては「画像とテキストの位置を指定」で解説していますので、そちらをご覧ください。

なおHTML4.01ではalign属性は非推奨とされており、HTML5では廃止されています。 画像とテキストを回り込ませたい場合には、可能であればスタイルシートを使うようにして下さい。

使用した時の例

<img src="sample.jpg" width="130" height="87" alt="" align="left">
テキストが右に、画像が左に回り込みます。
<br clear="left">

<img src="sample.jpg" width="130" height="87" alt="" align="right">
テキストが左に、画像が右に回り込みます。 ~中略~
<br clear="right">

ブラウザ上の表示例

テキストが右に、画像が左に回り込みます。
テキストが左に、画像が右に回り込みます。またimgとテキストをpタグやdivなどで囲む事で、表示される横幅の調整などもできます。このサンプルではimgと文章をそのまま入力しただけですので、親要素いっぱいに表示されています。また回り込みを解除する場合は、brのclear属性以外にもスタイルシートのclearプロパティなどを使う事で解除できます。またこんな感じで収まりきらないテキストは画像の下に送られますのでご参考までに

書式

  • <img src="画像url" alt="代替テキスト" align="位置"> ・・・・・・ 画像にテキストを回り込ませる

位置:left,right

属性

align="" 画像にテキストを回り込ませる
  • left・・・画像を左側に配置。テキストはその右側に回り込む
  • right・・・画像を右側に配置。テキストはその左側に回り込む

対応ブラウザなどのデータ

形式 <img src="" alt="" align=""> 分類 インライン要素
開始タグ 必須 終了タグ なし
対応ブラウザ Internet Explorer2~ , Google Chrome1~ , Firefox1~ , Opera1~ , Safari1~

HTML5での状況と関連情報

align属性は、HTML5では廃止。代わりにfloatプロパティなどを使ってください