note から WordPress に出戻りました！😭

[ CSS ] テキストを回り込ませるサンプル

だるかぶ

サンダルでスーパーカブ乗りの『だるかぶ』です！
ご訪問ありがとうございます。ゆっくりしていってね。（本ページは広告を含みます。）

CSS でテキストを回り込ませるサンプルを作ってみました。

見出し行で回り込みを解除するサンプル

実際の動作サンプル

https://codepen.io/darucub/pen/XJdmrZz?editors=1100

サンプルコード

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>テキスト回り込みのサンプル</title>
<style type="text/css">
<!--
* { margin: 0; padding: 0; }
body { margin: 18px; padding: 0px; font-family: sans-serif; }
#container { width: 302px; }
h4 { clear: both; margin: 0 0 9px 0; font-size: 18px; line-height: normal; }
p { font-size: 12px; line-height: 18px; margin: 0 0 12px 0; }
p.image-left { margin: 3px 12px 12px 0; padding: 0px; border: 1px solid #CCCCCC; float:left; clear:left; }
p.image-right { margin: 3px 0 12px 12px; padding: 0px; border: 1px solid #CCCCCC; float:right; clear:right; }
-->
</style>
</head>
<body>
<div>
<div>
<p class="image-left"><img src="image.png" alt="" width="120" height="90"></p>
<p>テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。</p>
<div style="clear:both;"></div>
</div>
<h4>見出しの行で回り込み解除</h4>
<p class="image-left"><img src="image.png" alt="" width="120" height="90"></p>
<p>テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。</p>
<p class="image-left"><img src="image.png" alt="" width="120" height="90"></p>
<p>テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。</p>
<p class="image-right"><img src="image.png" alt="" width="120" height="90"></p>
<p>テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。</p>
<p class="image-left"><img src="image.png" alt="" width="120" height="90"></p>
<p>テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。</p>
</div>
</body>
</html>

ブロック毎に回り込みを解除するサンプル

実際の動作サンプル

https://codepen.io/darucub/pen/EaKVYRE

サンプルコード

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>テキスト回り込みのサンプル</title>
<style type="text/css">
<!--
* { margin: 0; padding: 0; }
body { margin: 18px; padding: 0px; font-family: sans-serif; }
#container { width: 302px; }
h4 { margin: 0; font-size: 12px; font-weight: bold; color: #FF6600; line-height: 18px; }
p { font-size: 12px; line-height: 18px; margin: 0 0 12px 0; }
p.image-left { margin: 3px 12px 12px 0; padding: 0px; border: 1px solid #CCCCCC; float:left; clear:left; }
p.image-right { margin: 3px 0 12px 12px; padding: 0px; border: 1px solid #CCCCCC; float:right; clear:right; }
div.item { overflow: auto; width: 100%; }
-->
</style>
</head>
<body>
<div>
<div class="item">
<p class="image-left"><img src="image.png" alt="" width="120" height="90"></p>
<h4>見出しの行も回り込みする</h4>
<p>テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。</p>
</div>
<div class="item">
<p class="image-left"><img src="image.png" alt="" width="120" height="90"></p>
<h4>見出しの行も回り込みする</h4>
<p>テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。</p>
</div>
<div class="item">
<p class="image-right"><img src="image.png" alt="" width="120" height="90"></p>
<h4>見出しの行も回り込みする</h4>
<p>テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。</p>
</div>
<div class="item">
<p class="image-right"><img src="image.png" alt="" width="120" height="90"></p>
<h4>見出しの行も回り込みする</h4>
<p>テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。</p>
</div>
</div>
</body>
</html>

Mac Internet Explorer 5.2, Mac Firefox 2.0, Mac Safari 2.0 で表示確認。

現場からは以上です。それでは、またッ！！！

前の記事

[ CSS ] TABLE の表示を変更するサンプル

次の記事

CSS の position を使ったレイアウトのサンプル