画像の形状に従ってテキストの回り込みを行うこと時は、shape-outside プロパティを使用します。
shape-outside プロパティは、回り込みを行う画像のスタイルに指定します。
画像の形状は、円、楕円、多角形などを指定することができます。
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サンプル（文字の回り込み）</title>
<style>
body {
margin: 0;
}
.container {
border: #ccc 1px solid;
}
p {
width: 500px;
padding: 0px;
margin: 20px 20px 0px 30px;
}
.box {
width: 500px;
padding: 20px;
margin: 0px 0px 20px 20px;
border: 1px #ccc solid;
overflow: hidden;
}
.image1 {
margin: 5px 10px 10px 5px;
float: left;
}
.image2 {
margin: 5px 5px 10px 10px;
float: right;
}
.image3 {
margin: 5px 10px 10px 5px;
float: right;
border-radius: 100%;
}
.image4 {
margin: 5px 5px 10px 10px;
float: right;
border-radius: 100%;
shape-outside: circle();
}
</style>
</head>
<body>
<div class="container">
<p>
img {<br>
margin: 5px 10px 10px 5px;<br>
float: left;<br>
}
</p>
<div class="box">
<img src="images/tips-256x256-red.jpg" alt="赤" class="image1">
現生の最大種はアルダブラゾウガメ（A. g. hololissaを亜種とした場合）で最大甲長138センチメートル。化石種も含めた最大種はColossochelys atlasで甲長約200センチメートル。最小種はシモフリヒラセリクガメで最大甲長9.6センチメートルとカメ目全種でも最小種。背甲はドーム状やアーチ状に盛り上がる傾向がある。 頭部は中型で、縦幅は短いが幅広い。咬合面や顎を覆う角質（嘴）は幅広い。種によっては嘴に鋸状の突起や畝があり、歯のように植物を切断したりすることができる。舌が発達するが、舌弓はあまり発達しない。頸部はやや短い。四肢は太くて短く、指趾は退化して短い（趾骨が2個以上ない）。頭部や四肢は大型鱗で覆われる。
</div>
<p>
img {<br>
margin: 5px 5px 10px 10px;<br>
float: right;<br>
}
</p>
<div class="box">
<img src="images/tips-256x256-red.jpg" alt="赤" class="image2">
現生の最大種はアルダブラゾウガメ（A. g. hololissaを亜種とした場合）で最大甲長138センチメートル。化石種も含めた最大種はColossochelys atlasで甲長約200センチメートル。最小種はシモフリヒラセリクガメで最大甲長9.6センチメートルとカメ目全種でも最小種。背甲はドーム状やアーチ状に盛り上がる傾向がある。 頭部は中型で、縦幅は短いが幅広い。咬合面や顎を覆う角質（嘴）は幅広い。種によっては嘴に鋸状の突起や畝があり、歯のように植物を切断したりすることができる。舌が発達するが、舌弓はあまり発達しない。頸部はやや短い。四肢は太くて短く、指趾は退化して短い（趾骨が2個以上ない）。頭部や四肢は大型鱗で覆われる。
</div>
<p>
img {<br>
margin: 5px 10px 10px 5px;<br>
float: right;<br>
border-radius: 100%;<br>
}
</p>
<div class="box">
<img src="images/tips-256x256-red.jpg" alt="赤" class="image3">
現生の最大種はアルダブラゾウガメ（A. g. hololissaを亜種とした場合）で最大甲長138センチメートル。化石種も含めた最大種はColossochelys atlasで甲長約200センチメートル。最小種はシモフリヒラセリクガメで最大甲長9.6センチメートルとカメ目全種でも最小種。背甲はドーム状やアーチ状に盛り上がる傾向がある。 頭部は中型で、縦幅は短いが幅広い。咬合面や顎を覆う角質（嘴）は幅広い。種によっては嘴に鋸状の突起や畝があり、歯のように植物を切断したりすることができる。舌が発達するが、舌弓はあまり発達しない。頸部はやや短い。四肢は太くて短く、指趾は退化して短い（趾骨が2個以上ない）。頭部や四肢は大型鱗で覆われる。
</div>
<p>
img {<br>
margin: 5px 5px 10px 10px;<br>
float: right;<br>
border-radius: 100%;<br>
shape-outside: circle();<br>
}
</p>
<div class="box">
<img src="images/tips-256x256-red.jpg" alt="赤" class="image4">
現生の最大種はアルダブラゾウガメ（A. g. hololissaを亜種とした場合）で最大甲長138センチメートル。化石種も含めた最大種はColossochelys atlasで甲長約200センチメートル。最小種はシモフリヒラセリクガメで最大甲長9.6センチメートルとカメ目全種でも最小種。背甲はドーム状やアーチ状に盛り上がる傾向がある。 頭部は中型で、縦幅は短いが幅広い。咬合面や顎を覆う角質（嘴）は幅広い。種によっては嘴に鋸状の突起や畝があり、歯のように植物を切断したりすることができる。舌が発達するが、舌弓はあまり発達しない。頸部はやや短い。四肢は太くて短く、指趾は退化して短い（趾骨が2個以上ない）。頭部や四肢は大型鱗で覆われる。
</div>
</div>
</body>
</html>
