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

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

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

サンプルコード

<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 id="container">
<div>
<p class="image-left"><img decoding="async" loading="lazy" src="image.png" alt="" width="120" height="90"></p>
<p>テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。</p>
<div style="clear:both;"></div>
</div>
<h4 id="i-0">見出しの行で回り込み解除</h4>
<p class="image-left"><img decoding="async" loading="lazy" src="image.png" alt="" width="120" height="90"></p>
<p>テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。</p>
<p class="image-left"><img decoding="async" loading="lazy" src="image.png" alt="" width="120" height="90"></p>
<p>テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。</p>
<p class="image-right"><img decoding="async" loading="lazy" src="image.png" alt="" width="120" height="90"></p>
<p>テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。</p>
<p class="image-left"><img decoding="async" loading="lazy" src="image.png" alt="" width="120" height="90"></p>
<p>テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。</p>
</div>
</body>

実際の動作サンプル

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

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

サンプルコード

<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 id="container">
<div class="item">
<p class="image-left"><img decoding="async" loading="lazy" src="image.png" alt="" width="120" height="90"></p>
<h4 id="i-1">見出しの行も回り込みする</h4>
<p>テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。</p>
</div>
<div class="item">
<p class="image-left"><img decoding="async" loading="lazy" src="image.png" alt="" width="120" height="90"></p>
<h4 id="i-2">見出しの行も回り込みする</h4>
<p>テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。</p>
</div>
<div class="item">
<p class="image-right"><img decoding="async" loading="lazy" src="image.png" alt="" width="120" height="90"></p>
<h4 id="i-3">見出しの行も回り込みする</h4>
<p>テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。</p>
</div>
<div class="item">
<p class="image-right"><img decoding="async" loading="lazy" src="image.png" alt="" width="120" height="90"></p>
<h4 id="i-4">見出しの行も回り込みする</h4>
<p>テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。</p>
</div>
</div>
</body>