【CSS】『shape-outside』でテキストの回り込みを円形にしてみる

2023.2.23
更新 2026.10.17
デザインのメモ
CSS

文章の回り込みって丸くできないですかー？

あー、円形に回り込みですねー、できますよー

テキストの回り込みを円形にしてみる

floatが必須です。shape-outsideは、円形の『circle()』の他に楕円の『ellipse()』、多角形の『polygon()』などがあります。円形以外はあまり使う機会がないかなと思いますが、ここぞという時に使ってみてください。

コードを見る（HTML・CSS）

HTML

<div class="clearfix"><img src="https://125naroom.com/wp/wp-content/themes/design125naroom/img/dezao.png" alt="" class="circle_left">あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん</div>
<div class="clearfix"><img src="https://125naroom.com/wp/wp-content/themes/design125naroom/img/dezakoto.png" alt="" class="circle_right">あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん</div>

CSS

/* ---------- 01 円形に回り込む ---------- */
.circle_left {
  display: block;
  float: left;
  border-radius: 50%;
  shape-outside: circle();
  margin-right: 25px;
}
.circle_right {
  display: block;
  float: right;
  border-radius: 50%;
  shape-outside: circle();
  margin-left: 25px;
}

見本ページをひらく（円形に回り込む）

ちなみに、テキストの回り込みを『円形』にしなかったらこうなります

コードを見る（HTML・CSS）

HTML

<div class="clearfix"><img src="https://125naroom.com/wp/wp-content/themes/design125naroom/img/dezao.png" alt="" class="square_left">あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん</div>
<div class="clearfix"><img src="https://125naroom.com/wp/wp-content/themes/design125naroom/img/dezakoto.png" alt="" class="square_right">あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん</div>

CSS

/* ---------- 02 円形にしないと ---------- */
.square_left {
  display: block;
  float: left;
  margin-right: 25px;
}
.square_right {
  display: block;
  float: right;
  margin-left: 25px;
}

見本ページをひらく（円形にしないと）