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

【CSS】『shape-outside』でテキストの回り込みを円形にしてみる
文章の回り込みって丸くできないですかー?
あー、円形に回り込みですねー、できますよー

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

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

HTML

1
2
<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>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.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

1
2
<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>

CSS

1
2
3
4
5
6
7
8
9
10
.circle_left {
  display: block;
  float: left;
  margin-right: 25px;
}
.circle_right {
  display: block;
  float: right;
  margin-left: 25px;
}

対応ブラウザ

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

さいごに

できたー
さて、おやつにしましょうー
Author

デザコト

あ、いいな、と思うWebデザインを紹介しています。デザインの参考に。やさしいデザインが多いです。Webデザインギャラリー『デザインのこと - Web design gallery』を運営しています。

Googleさんの
おすすめ

7

/

31

2025

Googleさんの
おすすめ

7

/

31

2025

デザインの記事

映画『8番出口』
廊下ができたんだ