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

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

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

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

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

HTML

<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

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

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

See the Pen 【CSS】テキストの回り込み(たんなるfloatです。) by 125naroom (@125naroom) on CodePen.

HTML

<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

.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さんの
おすすめ

4

/

14

2024

Googleさんの
おすすめ

4

/

14

2024

デザインの記事

TALKING CITY|柏の葉イノベーションフェス2023
5年経った無印良品窓の家
【jQuery】 ローディング、実装サンプル集