画像に、テキストを回り込ませる <img src=" "画像URL"　 align= 〜 >

【７】　画像を左右に配置して、テキストを流し込む テキストが、画像の高さの範囲を超えると画像の底辺に回り込んで表示されます。

画像とテキストの配置　サンプル表示1 <img src=" "pic001.gif"　 align= "left" > 画像とテキストの位置関係を設定　画像の右にテキストを回り込ませます。　 テキストが、画像範囲を超えたときには画像の下に潜り込んで段落を揃えます。　 どの様に表示されるか書き込んでいます。表示行数が、画像高さを超えると下にも回り込んで表示されます。　 夕日を撮影するのは、時間との勝負でかなり難しいですね。　 夕日と明石海峡大橋の写真 テキスト表示範囲を超えると底辺に回り込んで表示されます。 画像とテキストの配置　サンプル表示2 <img src=" "pic002.gif"　 align= "right" > 画像とテキストの位置関係を設定　画像の左にテキストを回り込ませます。 テキストが、画像範囲を超えたときには画像の下に潜り込んで段落を揃えます。 どの様に表示されるか書き込んでいます。表示行数が、画像高さを超えると下にも回り込んで表示されます。　 アジュール舞子側からの明石大橋。

要素 属性 値 説明 img align left 画像を左側、テキストを右側に回り込ませる。 right 画像を右側、テキストを左側に回り込ませる。

参考例として、明石海峡大橋の写真を指定しています。　 コピー・貼り付け で 貼り付けて下さい <img src="hasi34s.gif" align="left" alt="夕日と明石海峡大橋" > 夕日と明石海峡大橋 <img src="hasi34s.gif" align="right" alt=" アジュール舞子側からの明石大橋" > アジュール舞子側からの明石大橋

img 関連属性HTMLタグ 画像表示　詳　　細 関連 URL　 IMG関連 TAG IMG 要　素 属性、属性値は 要　素 括弧内に設定する。 空要素　終了タグなし src= 要　素 場所の属性 括弧内に、画像のファイル名を設定する　セットで省く事は出来ない。 <img> align="" 属性 画像とテキストの、位置関係を設定する。 <img>　 <table>　<th>　 <tr>　 <td> left 属性値 画像を、テキストの左に回り込ませる。 <img>　 <table>　<th>　 <td> right 属性値 画像を、テキストの右に回り込ませる。 <img>　 <table>　<th>　 <tr>　 <td> top 属性値 画像の上と、テキストの上を揃える。 <img> middle 属性値 画像の中心と、テキストのベースラインを揃える。 <img> bottom 属性値 画像の下とテキストの、ベースラインを揃える。 規定値 <img> その他の参考タグ hspace= 数値 属性 画像配置の横間隔を空けて表示　表と文字との間に余白を入れる 横間隔(10進数整数)で指定 （拡張機能）　 非推奨 <img> 　　 vspace= 数値 属性 画像配置の縦間隔を空けて表示　表と文字との間に余白を入れる 横間隔(10進数整数)で指定 　 （拡張機能） 非推奨 <img> 　　 width= 数値 属性 画像の横サイズ　表の横幅　(10進数整数値) <table>　<th>　 <tr>　 <td>　<img> 　　 height= 数値 属性 画像の縦サイズ　表の縦幅　(10進数整数値) <table>　<th>　 <tr>　 <td>　<img> 　　 alt= 属性 ブラウザで何らかの原因で、画像が表示出来ない場合の代替表示(説明文) （必須） <td>　<img> br clear= （クリヤー） 属性 html4.1以降 非推奨となりました。 <table> 　　 left 属性値 画像の、左側への回り込みを解除する。 <table> 　　 right 属性値 画像の、右側への回り込みを解除する。 <table> 　　 all 属性値 どちらの回り込みも解除する。 <table>

拡張機能とは、HTMLタグにはないが、各ブラウザの拡張機能として追加されているもの。 他のブラウザとの互換性がないため非推奨となっています。 hspace vspaceは、 internet Explorer　Netscape で古くから使用されているが、 HTMLにはその機能がなく認められていない。