画像に文字を回り込ませる。

トップ やさしいHTML教室 メニュー 次へ(ほかのページにリンクする)

<img align="left,rightのどちらか">

普通に画像を挿入しただけでは、画像の横に一行しか文字を書くことができません。しかし、align="left,rightのどちらか" を使うと、画像に文字を回り込ませることができます。画像に文字を回り込ませることができます。また、改行するときのタグ<br>に、clearの属性を加えることにより、回り込みを途中で解除することができます。

<br clear="left,right,all のどれか1つ">

画像が左側にあるときの回り込みを解除するには値にleftを指定します。
画像が右側にあるときの回り込みを解除するには値にrightを指定します。
画像が左右のどちらにあっても値にallを指定すれば回りこみを解除できます。

プレビューHTMLソース
サンプル
戻る 進む ホーム
あいうえお
あいうえお
あいうえお
あいうえお
あいうえお
あいうえお
あいうえお

あいうえお
あいうえお
あいうえお
あいうえお
あいうえお
あいうえお
あいうえお

あいうえお
あいうえお
あいうえお
あいうえお
あいうえお
あいうえお
あいうえお
<html>
<head>
<title>サンプル</title>
</head>
<body>
<img src="glass1.gif"width="100"height="100"align="left">あいうえお<br>
あいうえお<br>
あいうえお<br>
あいうえお<br>
あいうえお<br>
あいうえお<br>
あいうえお<br>
<hr>
<img src="glass1.gif"width="100"height="100"align="right">あいうえお<br>
あいうえお<br>
あいうえお<br>
あいうえお<br>
あいうえお<br>
あいうえお<br>
あいうえお<br>
<hr>
<img src="glass1.gif"width="100"height="100"align="left">あいうえお<br>
あいうえお<br>
あいうえお<br clear="left">
あいうえお<br>
あいうえお<br>
あいうえお<br>
あいうえお<br>
</body>
</html>

トップ やさしいHTML教室 メニュー 次へ(ほかのページにリンクする)