画像の横への回りこみを解除

HTMLを使用した記述方法

記述方法

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
</head>
<body>
<p style="width:300px;">
<img src="../img/smp.gif" width="150" height="150" align="left">
当サイトはホームページを初めて作る方向けに構成されています。まず何から始めればいいの?難しい専門用語ばかりだけど、どういう意味?こんなときはどうすればいいの?<br clear="left">
ってときに、このページを開いてください。当サイトが少しでもあなたのお役に立てれば幸いです。
</p>
</body>
</html>

表示サンプル

当サイトはホームページを初めて作る方向けに構成されています。まず何から始めればいいの?難しい専門用語ばかりだけど、どういう意味?こんなときはどうすればいいの?
ってときに、このページを開いてください。当サイトが少しでもあなたのお役に立てれば幸いです。

解説

IMG」タグ内に「align」にて指定した回りこみを<br clear="left">にて解除できます(ただし、非推奨の方法なので下記のCSSを使った方法をお奨めします)。右に回りこみをさせた場合には<br clear="right">、どちらでも良いからとにかく回り込みを解除したい場合には<br clear="all">と指定します。回りこみを指定する方法は、回りこみの指定を参照下さい。

注記)表示サンプルでは見易くするために文字と画像の領域をスタイルシートにて300pxと固定にしています。

CSSを使用した記述方法

記述方法

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<style type="text/css">
<!--
img.sample {float : left ;}
-->
</style>
</head>
<body>
<p style="width:300px">
<img src="../img/smp.gif" class="sample" alt="サンプル画像">
当サイトはホームページを初めて作る方向けに構成されています。まず何から始めればいいの?難しい専門用語ばかりだけど、どういう意味?こんなときはどうすればいいの?<br style="clear : all;">ってときに、このページを開いてください。当サイトが少しでもあなたのお役に立てれば幸いです。
</p>
</body>
</html>

表示サンプル

当サイトはホームページを初めて作る方向けに構成されています。まず何から始めればいいの?難しい専門用語ばかりだけど、どういう意味?こんなときはどうすればいいの?
ってときに、このページを開いてください。当サイトが少しでもあなたのお役に立てれば幸いです。

解説

回りこみを解除することができます。HTMLを使った方法と同じく、leftrightallを指定することができます。回りこみを指定したい場合は、回りこみの指定を参照下さい。

注記)表示サンプルでは見易くするために文字と画像の領域をスタイルシートにて300pxと固定にしています。