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 を使ったレイアウトのサンプル