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

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

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

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

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

See the Pen
【CSS】『shape-outside』でテキストの回り込みを円形にしてみる by 125naroom (@125naroom)
on CodePen.

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

.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;
}

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

たんなるfloatです。

See the Pen
【CSS】『shape-outside』でテキストの回り込みを円形にしてみる by 125naroom (@125naroom)
on CodePen.

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

.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;
}

対応ブラウザ

『shape-outside』の対応ブラウザは下記サイトで確認できます。
IE対応は不要なので、『shape-outside』は問題なく使えますね。

Can I use

さいごに

できたー

さて、おやつにしましょうー