画像の横に文字を回りこみさせる方法

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

表示サンプル

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

解説

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

注記)表示サンプルでは見易くするために文字と画像の領域をスタイルシートにて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="サンプル画像">
当サイトはホームページを初めて作る方向けに構成されています。まず何から始めればいいの?難しい専門用語ばかりだけど、どういう意味?こんなときはどうすればいいの?ってときに、このページを開いてください。当サイトが少しでもあなたのお役に立てれば幸いです。
</p>
</body>
</html>

表示サンプル

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

解説

floatにて回りこみ方法を指定することができます。回りこみを途中で解除したい場合は、回りこみを解除するを参照下さい。

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