ここでは、テキストが画像をまわり込むように表示する HTML のサンプルを掲載しています。ニュースメディアなどでは、この画像の位置にバナー広告が配置されることが多いと思います。
スポンサーリンク
テキストが画像をまわり込むようにする
テキストが画像を回り込むようにする HTML のサンプルになります。ポイントは画像部分で使用している div 要素の style 属性の 「 float:right; 」 または 「 float:left; 」 です。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>テキストの内に画像を埋め込むサンプル</title>
</head>
<body>
<div>
まずは画像の上部にテキストを記述する
ああああああああああああああああああああああああああああ
ああああああああああああああああああああああああああああああ
ああああああああああああああああああああああああああああ
ああああああああああああああああああああああああああああああ
ああああああああああああああああああああああああああああ
</div>
<!-- float:right ならばテキストの右側に float:right ならば テキストの右側に画像を埋め込む -->
<div style="float:right;">
<img src="./test.png"> <!-- 別に画像でなくとも良い -->
</div>
<div>
この位置からテキスト内に画像を埋め込んで表示する
ああああああああああああああああああああああああああああ
ああああああああああああああああああああああああ
</div>
<div>
ああああああああああああああああああああああああ
あああああああああああああああああああああああああ
ああああああああああああああああああああああああああああああ
</div>
<div>
ああああああああああああああああああああああああああああ
あああああああああああああああああああああああああああ
あああああああああああああああああああああああああああ
ああああああああああああああああああああああああああああああああああ
</div>
</body>
</html>
出力結果
上記サンプルの出力結果は以下のようになります。
テキストが画像をまわり込むようにした出力結果